From 8055a27f73792daacd75f5498786ed5a9253eafa Mon Sep 17 00:00:00 2001
From: realtradam <github@tradam.dev>
Date: Sat, 22 Jun 2024 18:49:08 -0400
Subject: made mobile sidebar autohide when clicking away

---
 src/components/Layout.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 415e5f8..fd50710 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -23,11 +23,18 @@ export default function Layout ({userData}: userData)
 			setSidebarClosed(!sidebarClosed);
 		}
 	};
+	const handleSidebarClickaway = () => {
+		if(!sidebarInit)
+			{
+				setSidebarOpen(false);
+				setSidebarClosed(true);
+			}
+	};
 
 	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 onClick={handleSidebarOpen} className={`${sidebarOpen ? 'sidebarOpen' : ''} ${sidebarClosed ? 'sidebarClosed' : ''} ${sidebarInit ? 'sidebarInit' : ''} sidebar-animation flex items-center justify-center md:hidden fixed shadow-xl ml-[17rem] m-4 h-12 w-12 text-stone-50 bg-stone-800 border-b-4 border-black rounded-[5px] z-[5]`}>
+				<div onClick={handleSidebarOpen} className={`${sidebarOpen ? 'sidebarOpen' : ''} ${sidebarClosed ? 'sidebarClosed' : ''} ${sidebarInit ? 'sidebarInit' : ''} sidebar-animation flex items-center justify-center md:hidden fixed shadow-xl ml-[17rem] m-4 h-12 w-12 text-stone-50 bg-stone-800 rounded-[5px] z-[5]`}>
 				<div className={`${sidebarClosed || sidebarInit ? '' : 'hidden'} flex items-center justify-center`}>
 				<i className="fa-solid fa-chevron-right w-6 h-6"></i>	
 				</div>
@@ -41,9 +48,9 @@ export default function Layout ({userData}: userData)
 					{ 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> }
 					<div className="text-3xl py-10 text-center font-title">Adam <br/>Malczewski</div>
 					<div className="flex flex-col items-center gap-1">
-							<Button link={ <Link to="/" className="absolute flex top-0 left-0 w-36 h-16 text-stone-50 bg-transparent justify-center items-center" role="button"><div className="h-min">About Me</div></Link> }/>
-							<Button link={ <Link to="/apps" className="absolute flex top-0 left-0 w-36 h-16 text-stone-50 bg-transparent justify-center items-center" role="button"><div className="h-min">Apps</div></Link> }/>
-							<Button link={ <Link to="/games" className="absolute flex top-0 left-0 w-36 h-16 text-stone-50 bg-transparent justify-center items-center" role="button"><div className="h-min">Games</div></Link> }/>
+							<Button link={ <Link onClick={handleSidebarClickaway} to="/" className="absolute flex top-0 left-0 w-36 h-16 text-stone-50 bg-transparent justify-center items-center" role="button"><div className="h-min">About Me</div></Link> }/>
+							<Button link={ <Link onClick={handleSidebarClickaway} to="/apps" className="absolute flex top-0 left-0 w-36 h-16 text-stone-50 bg-transparent justify-center items-center" role="button"><div className="h-min">Apps</div></Link> }/>
+							<Button link={ <Link onClick={handleSidebarClickaway} to="/games" className="absolute flex top-0 left-0 w-36 h-16 text-stone-50 bg-transparent justify-center items-center" role="button"><div className="h-min">Games</div></Link> }/>
 							{/*<Button link={ <Link to="/blogs" className="absolute flex top-0 left-0 w-36 h-16 text-stone-50 bg-transparent justify-center items-center" role="button"><div className="h-min">Blog</div></Link> }/>*/}
 							<Button link={ <div className="text-stone-50 bg-transparent w-36 h-16 flex justify-center items-center">
 								<a id="contact" href="mailto:adam@malcz.com" className="w-36 h-16 relative text-center whitespace-nowrap flex justify-center items-center">
@@ -68,7 +75,7 @@ export default function Layout ({userData}: userData)
 				</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 onClick={handleSidebarClickaway} 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 py-20 px-14 dmd:px-6">	<Outlet /> </div>
 			</div>
 		</div>
-- 
cgit v1.2.3