Add underline to active menu item on mobile devices (#72)

Co-authored-by: Paulo Valim <[email protected]> Co-authored-by: Jonatan Kłosko <[email protected]>
livebook-dev · May 10, 2023 · f11c743 · f11c743
1 parent 7c35803
commit f11c743
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/src/js/main.js b/src/js/main.js
@@ -363,6 +363,24 @@ if (document.body.dataset.page === "integrations") {
   }
 }
 
+// Add underline class to menu links on Mobile
+
+function setActiveMenuItem() {
+  const currentPath = window.location.pathname;
+  const menuItems = document.querySelectorAll("[data-el-menu] a");
+
+  menuItems.forEach((item) => {
+    const itemPathname = item.pathname;
+    const shouldBeUnderlined =
+      itemPathname !== "/" && currentPath.startsWith(itemPathname);
+
+    item.classList.toggle("border-b-2", shouldBeUnderlined);
+    item.classList.toggle("border-gray-600", shouldBeUnderlined);
+  });
+}
+
+setActiveMenuItem();
+
 // Change header style
 
 const header = document.querySelector("#header");

diff --git a/src/partials/layout.html b/src/partials/layout.html
@@ -56,7 +56,7 @@
           </a>
         </div>
         <div class="flex-grow flex items-center justify-center">
-          <nav class="flex space-x-12 text-gray-600">
+          <nav data-el-menu class="flex space-x-12 text-gray-600">
             <a href="/#install">Install</a>
             <a href="/#features">Features</a>
             <a href="/integrations.html">Integrations</a>
@@ -116,6 +116,7 @@
         class="h-full mt-12 flex flex-col items-center space-y-12"
       >
         <nav
+          data-el-menu
           class="flex flex-col items-center space-y-10 text-xl text-gray-700"
         >
           <a href="/#install">Install</a>
@@ -197,14 +198,12 @@
           <span class="mt-2 text-gray-50 text-xl font-semibold">Livebook</span>
           <span class="mt-1 text-gray-300">
             Copyright 2023. All rights reserved,
-            <a
-              class="border-b-2 border-gray-300"
-              href="https://dashbit.co/"
-            >Dashbit</a>.
-            <a
-              class="border-b-2 border-gray-300"
-              href="/privacy-policy.html"
-            >Privacy Policy</a>.
+            <a class="border-b-2 border-gray-300" href="https://dashbit.co/"
+              >Dashbit</a
+            >.
+            <a class="border-b-2 border-gray-300" href="/privacy-policy.html"
+              >Privacy Policy</a
+            >.
           </span>
         </div>
         <div class="md:hidden w-full border-t border-gray-700"></div>