feat: middle save

src/App.scss

@@ -26,3 +26,22 @@
 		}
 	}
 }
+
+.ka-menu {
+	top: 0;
+	left: 0;
+	width: 300px;
+	height: 100%;
+	position: fixed;
+	transform: translateX(-100%);
+	background-color: var(--nav-color);
+	transition: transform 0.3s ease-in-out;
+
+	&.open {
+		transform: translateX(0);
+	}
+
+	@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 } from "lucide-react";
+import { Menu, PanelLeftClose } from "lucide-react";
 
 function App() {
 	return (
@@ -42,18 +42,39 @@ function Dashboard() {
 }
 
 function Header() {
+	const [open, setOpen] = useState(false);
+
 	return (
 		<nav className="ka-nav">
-			<div className="title">
+			<a className="title">
 				<img src={kuma} alt="" />
 				<h4 className="title-content">Kuma Archive</h4>
-			</div>
+			</a>
 
-			<button>
+			<a onClick={ev => {
+				ev.preventDefault();
+				setOpen(!open);
+			}}>
 				<Menu />
-			</button>
+			</a>
+			<MenuView open={open} setOpen={setOpen} />
 		</nav>
 	);
 }
 
+// TODO: create menu modal
+function MenuView({ open, setOpen }: { open: boolean; setOpen: (value: boolean) => void }) {
+	return (
+		<div className={`ka-menu ${open ? "open" : ""}`}>
+			<a onClick={ev => {
+				ev.preventDefault();
+				setOpen(false);
+			}}>
+				<PanelLeftClose />
+				<span>Close</span>
+			</a>
+		</div>
+	);
+}
+
 export default App;