diff options
| author | realtradam <[email protected]> | 2024-06-20 16:13:23 -0400 |
|---|---|---|
| committer | realtradam <[email protected]> | 2024-06-20 16:13:23 -0400 |
| commit | eada50342a7c9ba21d6d86b1416bf5c10d05e2a2 (patch) | |
| tree | 6828870de85b31b3cb65e1885377dc7c7fca6d06 | |
| parent | 204f862917e9a9014e47a475d6c49cc33d5a6d5e (diff) | |
| download | malcz.com-eada50342a7c9ba21d6d86b1416bf5c10d05e2a2.tar.gz malcz.com-eada50342a7c9ba21d6d86b1416bf5c10d05e2a2.zip | |
change button to pull open sidebar on mobile
| -rw-r--r-- | src/components/Layout.tsx | 15 | ||||
| -rw-r--r-- | src/index.css | 2 |
2 files changed, 10 insertions, 7 deletions
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 83aa172..e51f89f 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -27,12 +27,15 @@ export default function Layout ({userData}: userData) 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="md:hidden 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`}> + <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> + <div className={`${sidebarOpen ? '' : 'hidden'} flex items-center justify-center`}> + <i className="fa-solid fa-chevron-left w-6 h-6"></i> + </div> + </div> + <div id="sidebar" className={`${sidebarOpen ? 'sidebarOpen' : ''} ${sidebarClosed ? 'sidebarClosed' : ''} ${sidebarInit ? 'sidebarInit' : ''} sidebar-animation 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> } diff --git a/src/index.css b/src/index.css index 1a84e98..ff3ab22 100644 --- a/src/index.css +++ b/src/index.css @@ -45,7 +45,7 @@ left: -16rem; } - #sidebar { + .sidebar-animation { animation-duration: 0.5s; animation-iteration-count: 1; } |