add mobile sliding sidepanel

3 files changed, 65 insertions, 7 deletions

diff --git a/src/components/Home.tsx b/src/components/Home.tsx
index 91e241a..1dbc574 100644
--- a/src/components/Home.tsx
+++ b/src/components/Home.tsx
@@ -5,10 +5,10 @@ export default function Home () {
 		<>
 		<div>
 		<div className="flex flex-col gap-16 max-w-16xl shrink">
-			<div className="title font-bold text-6xl font-title mb-32">Welcome</div>
+			<div className="title font-bold text-6xl font-title mb-16 dsm:mb-10">Welcome</div>
 			<div className="">
 				<div className="jumbotron jumbotron-fluid bg-transparent">
-					<div className="container secondary-color bg-stone-950 prose prose-invert marker:text-stone-50 p-16 rounded-xl">
+					<div className="container secondary-color bg-stone-950 prose prose-invert marker:text-stone-50 p-16 dsm:py-10 dsm:px-4 rounded-xl">
 					<HomeMD />
 					</div>
 				</div>
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 6daf865..9abfdf0 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,4 +1,5 @@
 import { Outlet, Link } from "react-router-dom";
+import { useState } from "react";
 import Button from "./Button";
 
 export type userData = { userData: { name: string } };
@@ -8,11 +9,30 @@ export default function Layout ({userData}: userData)
 	const loginLink = () => {
 		window.open(`https://github.com/login/oauth/authorize?client_id=${import.meta.env.VITE_GITHUB_CLIENTID}`);
 	};
-	console.log(userData);
+
+	const [sidebarOpen, setSidebarOpen] = useState(false);
+	const [sidebarClosed, setSidebarClosed] = useState(false);
+	const [sidebarInit, setSidebarInit] = useState(true);
+	const handleSidebarOpen = () => {
+		if(sidebarInit) {
+			setSidebarOpen(true);
+			setSidebarInit(false);
+		}
+		else {
+			setSidebarOpen(!sidebarOpen);
+			setSidebarClosed(!sidebarClosed);
+		}
+	};
+
 	return (
 	<>
 		<div id="page" className="star flex flex-row min-h-screen max-h-screen bg-amber-400 text-stone-950 text-xl bg-star bg-repeat bg-[length:170px_170px]">
-			<div id="sidebar" className="dsm:hidden flex flex-row shrink-0 grow-0 h-vh w-64 items-top bg-stone-800">
+				<div onClick={handleSidebarOpen} className="fixed shadow-xl right-4 m-4 p-1 w-min h-min text-stone-50 bg-stone-800 rounded-[5px] z-[5]">
+				<div className="rounded-[5px] border-2 border-stone-50 border-amber-500">
+		<Button width={12} height={12} link={ <i className="fa-solid fa-bars"></i> }/>
+		</div>
+		</div>
+			<div id="sidebar" className={`${sidebarOpen ? 'sidebarOpen' : ''} ${sidebarClosed ? 'sidebarClosed' : ''} ${sidebarInit ? 'sidebarInit' : ''} dmd:fixed dmd:z-[4] relative flex flex-row shrink-0 grow-0 h-vh w-64 items-top bg-stone-800`}>
 				<nav id="sidebar-content" dir="rtl" className="text-stone-50 p-6 w-full h-screen overflow-y-auto overflow-x-hidden">
 		<div dir='ltr'>
 					{ userData.name ? <div className="flex items-end gap-2 pb-2"> <div className="text-xs"> Logged in as: </div> <div>{userData.name}</div> </div> : <a href="" onClick={loginLink} className="pb-2"> Login with Github </a> }
@@ -40,12 +60,13 @@ export default function Layout ({userData}: userData)
 					</div>
 		</div>
 				</nav>
-				<div id="sawtooth-wrap" className="sawtooth-left-wrap h-full">
+				<div id="sawtooth-wrap" className="dmd:relative dmd:h-screen z-[5] sawtooth-left-wrap h-full">
 					<div id="sawtooth" className="sawtooth-left w-4 h-full bg-amber-400"></div>
 				</div>
+				<div className="md:hidden h-full w-5 -right-5 absolute" style={{background: "linear-gradient(90deg, rgba(251,191,36,1) 0%, rgba(251,191,36,0) 100%)"}}></div>
 			</div>
 			<div id="radial-wrap" className="shrink w-full max-h-vh h-vh overflow-auto overflow-x-hidden">
-				<div id="content" className="flex justify-center items-center w-full p-20 dsm:px-4">	<Outlet /> </div>
+				<div id="content" className="flex justify-center items-center w-full py-20 px-14 dmd:px-6">	<Outlet /> </div>
 			</div>
 		</div>
 		</>
diff --git a/src/index.css b/src/index.css
index 72845f6..153686f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,8 +9,45 @@
 @apply py-2 px-4 bg-blue-200;
 }
 }
-
  */
+
+@keyframes sidebar-enter {
+	from {
+		left: -16rem;
+	}
+	to {
+		left: 0;
+	}
+}
+
+@keyframes sidebar-exit {
+	from {
+		left: 0;
+	}
+	to {
+		left: -16rem;
+	}
+}
+
+.sidebarInit {
+	left: -16rem;
+}
+
+.sidebarOpen {
+	animation-name: sidebar-enter;
+	left: 0;
+}
+
+.sidebarClosed {
+	animation-name: sidebar-exit;
+	left: -16rem;
+}
+
+#sidebar {
+	animation-duration: 0.5s;
+	animation-iteration-count: 1;
+}
+
 .gameCard {
 	aspect-ratio: 5/7;
 	width: 300px;