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); }}> - + @@ -66,15 +66,27 @@ function Header() { function MenuView({ open, setOpen }: { open: boolean; setOpen: (value: boolean) => void }) { return (
- { - ev.preventDefault(); + { setOpen(false); - }}> - - Close - + }} />
); } +function MenuItem({ icon, name, block }: { icon: IconName, name: string, block?: () => void }) { + return ( + { + ev.preventDefault(); + + if (typeof block === "undefined") + return; + + block(); + }}> + + {name} + + ); +} + export default App; diff --git a/src/index.scss b/src/index.scss index e2b8396..d75c8b9 100644 --- a/src/index.scss +++ b/src/index.scss @@ -100,6 +100,22 @@ a { } } +.link { + cursor: pointer; + user-select: none; + text-decoration: none; + transition-duration: 0.3s; + color: var(--foreground); + + &:hover { + color: var(--hover); + } + + &:focus { + color: var(--focus); + } +} + input { background-color: var(--background); }