diff --git a/src/App.scss b/src/App.scss index a0af177..c665890 100644 --- a/src/App.scss +++ b/src/App.scss @@ -30,9 +30,9 @@ .ka-menu { top: 0; left: 0; - width: 300px; height: 100%; position: fixed; + min-width: 300px; transform: translateX(-100%); background-color: var(--nav-color); transition: transform 0.3s ease-in-out; @@ -41,6 +41,18 @@ transform: translateX(0); } + .ka-menu-item { + width: 100%; + height: 55px; + padding: 5px 0.5rem; + display: flex; + align-items: center; + + span { + margin: 0 5px; + } + } + @media (max-width: 640px) { width: 100%; } diff --git a/src/App.tsx b/src/App.tsx index 69470fc..1008747 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,7 @@ import { useEffect, useState } from "react"; import "./App.scss"; import kuma from "./assets/kuma.png"; -import { Menu, PanelLeftClose } from "lucide-react"; +import { DynamicIcon, IconName } from "lucide-react/dynamic"; function App() { return ( @@ -26,7 +26,7 @@ function Dashboard() { path.update(location.pathname.substring(1, location.pathname.length)); setLoad(true); } - + const id = setInterval(() => { path.update(location.pathname.substring(1, location.pathname.length)); }, 5000); @@ -55,7 +55,7 @@ function Header() { ev.preventDefault(); setOpen(!open); }}> -
+