rollover menu

HJfod · Mar 4, 2024 · fc80849 · fc80849
1 parent 907116c
commit fc80849
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 31 deletions.
diff --git a/src/components/Button.astro b/src/components/Button.astro
@@ -17,7 +17,8 @@ const url = link.startsWith('https') || link.startsWith('#') ? link : `${import.
             border-accent-lightest border-opacity-50 border-solid border-2 rounded-full
             sm:text-xl max-sm:text-lg
             sm:p-4 max-sm:p-3
-            sm:min-w-60 max-sm:min-w-52
+            sm:min-w-52 max-sm:min-w-44
+            gap-8
             transition-colors;
 
         grid-template-columns: 1.75rem 1fr 1.75rem;

diff --git a/src/components/ButtonRow.astro b/src/components/ButtonRow.astro
@@ -1,6 +1,11 @@
 ---
 const { reverseOnMobile } = Astro.props;
-const classList = `flex sm:flex-row ${reverseOnMobile === 'true' ? 'max-sm:flex-col-reverse' : 'max-sm:flex-col'} justify-center gap-8`;
+const classList = `
+    flex
+    sm:flex-row ${reverseOnMobile === 'true' ? 'max-sm:flex-col-reverse' : 'max-sm:flex-col'}
+    items-center justify-center
+    gap-8
+`;
 ---
 
 <div class={classList}><slot/></div>
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -1,5 +1,5 @@
 ---
-import { BookIcon, DownloadIcon, GithubIcon, HomeIcon } from "astro-feather";
+import { BookIcon, DownloadIcon, GithubIcon, GlobeIcon, HomeIcon } from "astro-feather";
 import { Image } from "astro:assets";
 import logo from "../images/logo.png"
 import discord from "../images/discord.svg?raw"
@@ -9,56 +9,103 @@ import kofi from "../images/kofi.svg?raw"
 const base = import.meta.env.BASE_URL;
 ---
 
-<div class="
+<nav class="
     fixed
-    grid sm:grid-cols-3 max-sm:grid-cols-2
-    justify-center items-center
+    flex flex-col
+    justify-stretch items-stretch
     w-full
     bg-quardiary-darkest
     border-b-2 border-b-accent-lightest
+    transition-all
 ">
-    <div class="flex flex-row justify-start items-center gap-3 ml-3">
-        <Image src={logo} alt="Globed logo" class="w-[24px] h-[24px]"/>
-        <p class="font-head text-xl text-accent-lightest">Globed</p>
+    <div class="grid sm:grid-cols max-sm:grid-cols-2 justify-center items-center">
+        <div class="flex flex-row justify-start items-center gap-3">
+            <a class="home-button">
+                <!-- <Image src={logo} alt="Globed logo" class="w-[24px] h-[24px]"/> -->
+                <GlobeIcon/>
+                <span class="font-head text-xl">Globed</span>
+            </a>
+        </div>
+        <div class="flex flex-row justify-center max-sm:hidden">
+            <a href={base}>
+                <HomeIcon/>
+                <span class="max-sm:hidden">Home</span>
+            </a>
+            <a href={`${base}/install`}>
+                <DownloadIcon/>
+                <span class="max-sm:hidden">Install</span>
+            </a>
+            <a href={`${base}/about`}>
+                <BookIcon/>
+                <span class="max-sm:hidden">About</span>
+            </a>
+        </div>
+        <div class="flex flex-row justify-end">
+            <a href="https://ko-fi.com/globed">
+                <div class="w-[24px]">
+                    <Fragment set:html={kofi} />
+                </div>
+            </a>
+            <a href="https://discord.gg/d56q5Dkdm3">
+                <div class="w-[24px]">
+                    <Fragment set:html={discord} />
+                </div>
+            </a>
+            <a href="https://github.com/dankmeme01/globed2">
+                <div class="w-[24px]">
+                    <Fragment set:html={github} />
+                </div>
+            </a>
+        </div>
     </div>
-    <div class="flex flex-row justify-center max-sm:hidden">
+    <div id="rollover" class="flex flex-col">
         <a href={base}>
             <HomeIcon/>
-            <span class="max-sm:hidden">Home</span>
+            <span>Home</span>
         </a>
         <a href={`${base}/install`}>
             <DownloadIcon/>
-            <span class="max-sm:hidden">Install</span>
+            <span>Install</span>
         </a>
         <a href={`${base}/about`}>
             <BookIcon/>
-            <span class="max-sm:hidden">About</span>
+            <span>About</span>
         </a>
     </div>
-    <div class="flex flex-row justify-end">
-        <a href="https://ko-fi.com/globed">
-            <div class="w-[24px]">
-                <Fragment set:html={kofi} />
-            </div>
-        </a>
-        <a href="https://discord.gg/d56q5Dkdm3">
-            <div class="w-[24px]">
-                <Fragment set:html={discord} />
-            </div>
-        </a>
-        <a href="https://github.com/dankmeme01/globed2">
-            <div class="w-[24px]">
-                <Fragment set:html={github} />
-            </div>
-        </a>
-    </div>
-</div>
+</nav>
+
+<script define:vars={{ base }}>
+    document.querySelectorAll('.home-button').forEach(btn => {
+        btn.addEventListener('click', e => {
+            if (window.matchMedia("(max-width: 640px)").matches) {
+                document.querySelector('nav')?.classList.toggle('open');
+            }
+            else {
+                window.location.href = base;
+            }
+        });
+    });
+</script>
 
 <style>
+    nav > #rollover {
+        @apply
+            max-h-0
+            transition-all
+            overflow-hidden;
+
+        transition-duration: 350ms;
+    }
+    nav.open > #rollover {
+        @apply
+            max-h-44;
+    }
+
     a {
         @apply
             p-3
             flex flex-row gap-2
+            items-center
             text-accent-lightest
             fill-accent-lightest
             transition-colors;