From 039ea6fb525d096ed001d48696c040b5c3de52d7 Mon Sep 17 00:00:00 2001
From: Project_IO <me@projecttl.net>
Date: Sat, 15 Mar 2025 15:30:07 +0900
Subject: [PATCH] feat: middle save

---
 src/App.scss | 19 +++++++++++++++++++
 src/App.tsx  | 31 ++++++++++++++++++++++++++-----
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index c8621bc..a0af177 100644
--- a/src/App.scss
+++ b/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%;
+	}
+}
diff --git a/src/App.tsx b/src/App.tsx
index 06a3371..69470fc 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 } 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;