Add active page indicator

Nate created

Change summary

server/styles.css                    |  7 ++++++
server/templates/partials/layout.hbs | 35 +++++++++++++++++++++--------
2 files changed, 32 insertions(+), 10 deletions(-)

Detailed changes

server/styles.css 🔗 

@@ -47,6 +47,13 @@
     }
     
 }
+  .site-nav a:not(.active) .nav-active-arrow {
+    display: none;
+  }
+
+  .site-nav a.active .nav-active-arrow {
+    display: flex;
+  }
 
   .text-columns-2 {
     -webkit-column-break-inside: avoid;

server/templates/partials/layout.hbs 🔗 

@@ -13,7 +13,7 @@
 
 <body class="box-border font-light bg-black font-body text-main">
     <main class="container flex flex-col mx-auto lg:bg-white lg:flex-none lg:grid lg:min-h-full lg:grid-cols-4 max-w-screen-2xl lg:gap-x-px text-gray-50">
-        <nav id="nav" class="p-10 pb-0 bg-black font-extralight lg:hidden">
+        <nav class="p-10 pb-0 bg-black font-extralight lg:hidden">
             <a href="/">
                 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <mask id="path-2-inside-1" fill="white">
@@ -78,7 +78,7 @@
             {{/if}}
         </nav>
 
-        <nav class="hidden p-10 pt-20 bg-black lg:flex lg:flex-col font-extralight">
+        <nav id="nav" class="hidden p-10 pt-20 bg-black lg:flex lg:flex-col font-extralight site-nav">
             <a href="/" class="font-display">
                 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <mask id="path-2-inside-1" fill="white">
@@ -89,16 +89,22 @@
                 </svg>
             </a>
             <div class="flex flex-col mt-10 font-mono">
-                <a href="/team" class="mt-2 text-base no-underline lowercase hover:underline">
+                <a href="/team" class="relative mt-2 text-base no-underline lowercase hover:underline">
+                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
+                    </span>
                     The Team
                 </a>
-                <a href="/story" class="relative mt-2 text-base no-underline lowercase nav-active hover:underline">
-                    <span class="absolute flex items-center justify-center h-full align-middle nav-active-arrow -left-7">
+                <a href="/story" class="relative mt-2 text-base no-underline lowercase hover:underline">
+                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
                         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
                     </span>
                     Our Story
                 </a>
-                <a href="/community" class="mt-2 text-base no-underline lowercase hover:underline">
+                <a href="/community" class="relative mt-2 text-base no-underline lowercase hover:underline">
+                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
+                    </span>
                     Community
                 </a>
             </div>
@@ -108,10 +114,16 @@
             {{#if current_user}}
             <div class="flex flex-col mt-10 font-mono">
                 <p class="text-xs tracking-widest uppercase opacity-50">Insiders</p>
-                <a href="/updates" class="mt-2 text-base no-underline lowercase hover:underline">
+                <a href="/updates" class="relative mt-2 text-base no-underline lowercase hover:underline">
+                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
+                    </span>
                     Updates
                 </a>
-                <a href="/releases" class="mt-2 text-base no-underline lowercase hover:underline">
+                <a href="/releases" class="relative mt-2 text-base no-underline lowercase hover:underline">
+                    <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
+                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
+                    </span>
                     Releases
                 </a>
             </div>
@@ -120,8 +132,11 @@
             {{#if current_user.is_admin }}
                 <div class="flex flex-col mt-10 font-mono">
                     <p class="text-xs tracking-widest uppercase opacity-50">Admin</p>
-                    <a href="/admin" class="inline-block mt-2 text-base no-underline lowercase hover:underline">
-                        Users &amp Signups
+                    <a href="/admin" class="relative inline-block mt-2 text-base no-underline lowercase hover:underline">
+                        <span class="absolute items-center justify-center hidden h-full align-middle nav-active-arrow -left-7">
+                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1594 12.1606C10.0309 12.0567 9.96803 11.8899 9.96803 11.7204C9.96803 11.5509 10.0321 11.3846 10.1603 11.2564L12.7596 8.65813H1.6562C1.29392 8.65813 1 8.36284 1 7.97732C1 7.63829 1.29392 7.34573 1.6562 7.34573H12.7596L10.1613 4.74747C9.90501 4.49114 9.90501 4.07596 10.1613 3.81949C10.4177 3.56303 10.8328 3.56317 11.0893 3.81949L14.8078 7.53794C15.0641 7.79427 15.0641 8.20945 14.8078 8.46592L11.0893 12.1844C10.832 12.4395 10.4164 12.4395 10.1594 12.1606Z" fill="white"/></svg>
+                        </span>
+                        Manage
                     </a>
                 </div>
             {{/if}}