feat: middle save

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%;
 	}

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);
 			}}>
-				<Menu />
+				<DynamicIcon className="link" name="more-vertical" />
 			</a>
 			<MenuView open={open} setOpen={setOpen} />
 		</nav>
@@ -66,15 +66,27 @@ function Header() {
 function MenuView({ open, setOpen }: { open: boolean; setOpen: (value: boolean) => void }) {
 	return (
 		<div className={`ka-menu ${open ? "open" : ""}`}>
-			<a onClick={ev => {
-				ev.preventDefault();
+			<MenuItem icon="panel-left-close" name="Close" block={() => {
 				setOpen(false);
-			}}>
-				<PanelLeftClose />
-				<span>Close</span>
-			</a>
+			}} />
 		</div>
 	);
 }
 
+function MenuItem({ icon, name, block }: { icon: IconName, name: string, block?: () => void }) {
+	return (
+		<a className={"ka-menu-item link"} onClick={ev => {
+			ev.preventDefault();
+
+			if (typeof block === "undefined")
+				return;
+
+			block();
+		}}>
+			<DynamicIcon name={icon} className="link" />
+			<span>{name}</span>
+		</a>
+	);
+}
+
 export default App;

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);
 }