fix active links

vanessacor · May 11, 2024 · 2ee9479 · 2ee9479
1 parent e791731
commit 2ee9479
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,8 @@
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "build-preview": "astro build && astro preview"
   },
   "dependencies": {
     "@astrojs/mdx": "^2.2.0",

diff --git a/src/components/navigation/Navigation.astro b/src/components/navigation/Navigation.astro
@@ -3,65 +3,67 @@ import NavigationItem from "./NavigationItem.astro";
 import TagsMenu from "./TagsMenu.astro";
 const { pathname } = Astro.url;
 
-const currentUrl = pathname.replace(/^\/|\/$/g, "");
+const currentUrl = pathname.replace(/\/$/, '')
 
-const isActive = (item: string) => {
-  return currentUrl.includes(item)
-}
+const isTagsActive = currentUrl === "tags"
 
 const navigationItems = [
-  {label: 'Home', href: '/'}, {label: 'About', href: "/about"}, {label: 'Work', href: "/work"}]
+  { label: "Home", href: "/" },
+  { label: "About", href: "/about" },
+  { label: "Work", href: "/work" },
+];
 ---
 
 <nav class="nav-items">
-
   {
     navigationItems.map((item) => {
-     return <NavigationItem label={item.label} href={item.href} />
-    }) 
+      return <NavigationItem label={item.label} href={item.href} />;
+    })
   }
- <button class="tag-button" class:list={[isActive("tags") ? "active" : "", "link"]}>Tags</button> 
- <TagsMenu />
-
+  <button
+    class="tag-button"
+    class:list={[{active: isTagsActive}, "link"]}>Tags</button
+  >
+  <TagsMenu />
 </nav>
 <script>
+  const tagsButton = document.querySelector(".tag-button");
+  if (tagsButton)
+    tagsButton.addEventListener("click", () => {
+      toggleTagsMenu();
+    });
 
-  const tagsButton = document.querySelector('.tag-button');
-  if(tagsButton) tagsButton.addEventListener('click', () => {
-    toggleTagsMenu()
-  });
-
-  const closeButton = document.querySelector('.close-button');
-  if(closeButton) closeButton.addEventListener('click', () => {
-    toggleTagsMenu()
-  });
+  const closeButton = document.querySelector(".close-button");
+  if (closeButton)
+    closeButton.addEventListener("click", () => {
+      toggleTagsMenu();
+    });
 
   const toggleTagsMenu = () => {
-    const modal = document.getElementById('tags-modal')
-    if(!modal) return
+    const modal = document.getElementById("tags-modal");
+    if (!modal) return;
 
-    modal.style.display === 'block' 
-      ? modal.style.display = 'none' 
-      : modal.style.display = 'block'
-  }
-
+    modal.style.display === "block"
+      ? (modal.style.display = "none")
+      : (modal.style.display = "block");
+  };
 </script>
 <style scoped>
   .nav-items {
     padding: var(--space-medium) 0;
     display: flex;
-    gap: var(--space-small)
+    gap: var(--space-small);
   }
 
   .tag-button {
     border: none;
     background-color: transparent;
-    color: var(--accent-color-dark);
+    color: var(--highligth-color);
     font-family: var(--text-font);
     font-size: var(--font-size-3);
     padding: 0;
 
-    @media(min-width: 1200px) {
+    @media (min-width: 1200px) {
       display: none;
     }
   }
@@ -70,6 +72,4 @@ const navigationItems = [
     border-bottom: 2px solid var(--highligth-tertiary-color);
     font-weight: bold;
   }
-
-
 </style>
diff --git a/src/components/navigation/NavigationItem.astro b/src/components/navigation/NavigationItem.astro
@@ -2,15 +2,13 @@
 const { label, href } = Astro.props;
 const { pathname } = Astro.url;
 
-const isActive = () => {
-  if(label === 'Home') {
-    return pathname.includes('blog') || pathname === "/"
-  } else return pathname === href
-}
-
+const route = pathname.replace(/\/$/, '')
+const isHome = route.includes('blog') || pathname === href
+const isCurrent = route === href
+const isActive = isHome || isCurrent
 ---
-<a class:list={[isActive() ? "active" : "", "link"]} href={href}>
-  {label}
+<a class:list={[{active: isActive}, "link"]} href={href}>
+  {label} 
 </a>
 
 <style scoped>
@@ -22,4 +20,4 @@ const isActive = () => {
     border-bottom: 2px solid var(--highligth-tertiary-color);
     font-weight: bold;
   }
-</style>
+</style>