Improve mobile navi usability

hakuzumon · Aug 6, 2024 · dc7194f · dc7194f
1 parent 40cf734
commit dc7194f
Showing 1 changed file with 39 additions and 29 deletions.
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -11,6 +11,7 @@ export default function Nav() {
     const [scrollPosition, setScrollPosition] = createSignal(0);
     const [scrollDirection, setScrollDirection] = createSignal(0);
     const [showSideNavi, setShowSideNavi] = createSignal(false);
+    const [topH, setTopH] = createSignal("h-[5rem]");
     const location = useLocation();
 
     const showTopNaviLinksScrollAmount = convertRemToPixels(1.5);
@@ -31,6 +32,12 @@ export default function Nav() {
             }
 
             setShowTopNaviLinks(currentPos < showTopNaviLinksScrollAmount || scrollDirection() < 0);
+
+            if (currentPos > 50) {
+                setTopH("h-[3.5rem]");
+            } else {
+                setTopH("h-[5rem]");
+            }
         };
 
         window.addEventListener("scroll", handleScroll);
@@ -51,7 +58,7 @@ export default function Nav() {
         }
         return isActive(path) ? "active bg-amber-800" : "";
     }
-    const headerLinkStyle: string = `p-4 pt-8 pb-2 whitespace-nowrap leading-6 transition-all`;
+    const headerLinkStyle: string = `whitespace-nowrap transition-all h-full flex items-center`;
     const links: Link[] = [
         {url: "/references", label: "Töitämme"},
         {url: "/personnel", label: "Henkilöstö"},
@@ -64,36 +71,39 @@ export default function Nav() {
     }
 
     return (
-        <div class="sticky top-[-1.5rem] z-10 h-[4.4rem]">
-            <nav class="bg-gradient-to-tr w-full from-stone-900 to-stone-800 h-fit">
-                <div class="flex items-center text-white font-light">
-                    <a class={`${headerLinkStyle} ${active('/')}`} href={'/'}>
-                        <span class={`leading-7 blinker text-2xl blinker-adjust-text}`}>evident</span>
-                    </a>
-
-                    <For each={links}>{(link) =>
-                        <a class={`${headerLinkStyle} ${!isActive(link.url) ? 'hidden sm:inline' : ''} ${active(link.url)} ${!showTopNaviLinks() ? 'opacity-0' : ''}`} href={link.url}>
-                            <span class={`leading-7`}>{link.label}</span>
+        <div>
+            <div class="h-[6rem]"></div>
+            <div class={`fixed top-0 left-0 right-0 z-10 ${topH()} transition-all`}>
+                <nav class={`bg-gradient-to-tr w-full from-stone-900 to-stone-800 h-full`}>
+                    <div class="flex items-center text-white font-light h-full">
+                        <a class={`${headerLinkStyle} ${active('/')}`} href={'/'}>
+                            <span class={`blinker text-2xl blinker-adjust-text px-4`}>evident</span>
                         </a>
-                    }</For>
-
-                    <div class={`sm:hidden ml-auto cursor-pointer select-none p-4 pt-6 pb-0 leading-6`} onClick={() => toggleNavigation()}>
-                        <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
-                            <rect x="0" y="2" width="20" height="2" fill="white"/>
-                            <rect x="0" y="9" width="20" height="2" fill="white"/>
-                            <rect x="0" y="16" width="20" height="2" fill="white"/>
-                        </svg>
+
+                        <For each={links}>{(link) =>
+                            <a class={`${headerLinkStyle} ${!isActive(link.url) ? 'hidden sm:flex' : ''} ${active(link.url)} ${!showTopNaviLinks() ? 'opacity-0' : ''}`} href={link.url}>
+                                <span class={`px-4`}>{link.label}</span>
+                            </a>
+                        }</For>
+
+                        <div class={`sm:hidden ml-auto cursor-pointer select-none p-4 mr-4 rounded-full bg-stone-800`} onClick={() => toggleNavigation()}>
+                            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+                                <rect x="0" y="2" width="20" height="2" fill="white"/>
+                                <rect x="0" y="9" width="20" height="2" fill="white"/>
+                                <rect x="0" y="16" width="20" height="2" fill="white"/>
+                            </svg>
+                        </div>
+                    </div>
+                </nav>
+
+                <div class={`${showSideNavi() ? 'block' : 'hidden'} bg-gradient-to-br from-stone-900 to-stone-800 h-fit`}>
+                    <div class="text-xl font-light text-right text-white">
+                        <For each={links}>{(link) =>
+                            <a class="whitespace-nowrap block p-8"
+                               onClick={() => toggleNavigation()}
+                               href={link.url}>{link.label}</a>
+                        }</For>
                     </div>
-                </div>
-            </nav>
-
-            <div class={`${showSideNavi() ? 'block' : 'hidden'} bg-gradient-to-br from-stone-900 to-stone-800 h-fit`}>
-                <div class="text-xl font-light text-right text-white">
-                    <For each={links}>{(link) =>
-                        <a class="whitespace-nowrap block p-8"
-                           onClick={() => toggleNavigation()}
-                           href={link.url}>{link.label}</a>
-                    }</For>
                 </div>
             </div>
         </div>