Introduce temp sidebar

v3xlabs · Aug 22, 2024 · 4ba31ba · 4ba31ba
1 parent d44d0c1
commit 4ba31ba
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 28 deletions.
diff --git a/web/src/components/Navbar.tsx b/web/src/components/Navbar.tsx
@@ -8,9 +8,14 @@ export const Navbar = () => {
     return (
         <div className="w-full bg-white border-b h-8 flex items-center justify-between">
             <div className="h-full flex space-x-2">
-                <div className="font-semibold text-base pl-4 pr-4 hover:bg-black/10 border-r h-full flex items-center">
+                <button
+                    className="font-semibold text-base pl-4 pr-4 hover:bg-black/10 border-r h-full flex items-center"
+                    onClick={() => {
+                        document.querySelector('#sidebar-toggle')?.click();
+                    }}
+                >
                     sample.rip
-                </div>
+                </button>
                 <div className="h-full flex items-center">
                     {[
                         ['/', 'Home'],

diff --git a/web/src/components/PackSidebar.tsx b/web/src/components/PackSidebar.tsx
@@ -4,32 +4,41 @@ import { PACKS } from '../config';
 
 export const PackSidebar = () => {
     return (
-        <div className="w-full max-w-sm h-full border-r border-neutral-200 bg-neutral-50">
-            <ul>
-                {Object.entries(PACKS).map(([packId, pack]) => (
-                    <li key={packId} className="">
-                        <Link
-                            to={'/pack/$packId'}
-                            params={{ packId }}
-                            className="flex items-center gap-2 border-b border-neutral-200 px-4 py-2 hover:bg-neutral-100"
-                        >
-                            {pack.cover && (
-                                <img
-                                    src={pack.cover}
-                                    className="w-10 h-10 rounded-sm "
-                                    alt={pack.name}
-                                />
-                            )}
-                            <div className="flex-1">
-                                <div className="font-semibold">{pack.name}</div>
-                                <div className="text-neutral-600">
-                                    {pack.description}
+        <>
+            <input
+                type="checkbox"
+                className="hidden peer"
+                id="sidebar-toggle"
+            />
+            <div className="peer-checked:block hidden lg:block absolute lg:static w-full max-w-sm h-full border-r border-neutral-200 bg-neutral-50">
+                <ul>
+                    {Object.entries(PACKS).map(([packId, pack]) => (
+                        <li key={packId} className="">
+                            <Link
+                                to={'/pack/$packId'}
+                                params={{ packId }}
+                                className="flex items-center gap-2 border-b border-neutral-200 px-4 py-2 hover:bg-neutral-100"
+                            >
+                                {pack.cover && (
+                                    <img
+                                        src={pack.cover}
+                                        className="w-10 h-10 rounded-sm "
+                                        alt={pack.name}
+                                    />
+                                )}
+                                <div className="flex-1">
+                                    <div className="font-semibold">
+                                        {pack.name}
+                                    </div>
+                                    <div className="text-neutral-600">
+                                        {pack.description}
+                                    </div>
                                 </div>
-                            </div>
-                        </Link>
-                    </li>
-                ))}
-            </ul>
-        </div>
+                            </Link>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </>
     );
 };