Add NavLink component for navbar
This commit introduces a reusable NavLink component for the navigation bar. This component has a script to highlight the active link by comparing the current URL with each link's href. It also improves code readability by separating concerns.
This commit is contained in:
Emil Gulamov
parent
5f51d16307
commit
5e2a3f88b9
2 changed files with 109 additions and 50 deletions
|
|
@ -1,12 +1,13 @@
|
|||
---
|
||||
import ThemeIcon from "../components/ThemeIcon.astro";
|
||||
import ThemeIcon from "./ThemeIcon.astro";
|
||||
import NavLink from "./ui/links/NavLink.astro";
|
||||
---
|
||||
|
||||
<header
|
||||
class="sticky inset-x-0 top-4 z-50 flex w-full flex-wrap text-sm md:flex-nowrap md:justify-start"
|
||||
>
|
||||
<nav
|
||||
class="relative mx-2 w-full rounded-[36px] border border-amber-100/40 bg-amber-50/60 px-4 py-3 backdrop-blur-md dark:border-neutral-700/40 dark:bg-neutral-800/80 dark:backdrop-blur-md md:flex md:items-center md:justify-between md:px-6 md:py-0 lg:px-8 xl:mx-auto"
|
||||
class="relative mx-2 w-full rounded-[36px] border border-yellow-100/40 bg-yellow-50/60 px-4 py-3 backdrop-blur-md dark:border-neutral-700/40 dark:bg-neutral-800/80 dark:backdrop-blur-md md:flex md:items-center md:justify-between md:px-6 md:py-0 lg:px-8 xl:mx-auto"
|
||||
aria-label="Global"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
|
|
@ -17,36 +18,69 @@ import ThemeIcon from "../components/ThemeIcon.astro";
|
|||
>
|
||||
<!-- Brand Logo -->
|
||||
<svg class="h-auto w-24" viewBox="0 0 521 226" fill="none">
|
||||
<rect width="78.937" height="18.485" x="269" y="154.911" class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor" rx="9.242" transform="rotate(-43.075 269 154.911)"/>
|
||||
<rect width="78.937" height="18.485" x="319" y="154.911" class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor" rx="9.242" transform="rotate(-43.075 319 154.911)"/>
|
||||
<rect width="78.937" height="18.485" x="369.285" y="154.911" class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor" rx="9.242" transform="rotate(-43.075 369.285 154.911)"/>
|
||||
<rect width="28.464" height="18.485" x="419.57" y="154.911" class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor" rx="9.242" transform="rotate(-43.075 419.57 154.911)"/>
|
||||
<path class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor" d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"/>
|
||||
<path class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||
fill="currentColor" d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"/>
|
||||
<path class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||
fill="currentColor" d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"/>
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="269"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 269 154.911)"></rect>
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="319"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 319 154.911)"></rect>
|
||||
<rect
|
||||
width="78.937"
|
||||
height="18.485"
|
||||
x="369.285"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 369.285 154.911)"></rect>
|
||||
<rect
|
||||
width="28.464"
|
||||
height="18.485"
|
||||
x="419.57"
|
||||
y="154.911"
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
rx="9.242"
|
||||
transform="rotate(-43.075 419.57 154.911)"></rect>
|
||||
<path
|
||||
class="fill-current text-yellow-500 dark:text-yellow-400"
|
||||
fill="currentColor"
|
||||
d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"
|
||||
></path>
|
||||
<path
|
||||
class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||
fill="currentColor"
|
||||
d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"
|
||||
></path>
|
||||
<path
|
||||
class="fill-current text-neutral-700 dark:text-neutral-300"
|
||||
fill="currentColor"
|
||||
d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"
|
||||
></path>
|
||||
</svg>
|
||||
|
||||
|
||||
</a
|
||||
>
|
||||
<div class="md:hidden ml-auto mr-5">
|
||||
</a>
|
||||
<div class="ml-auto mr-5 md:hidden">
|
||||
<button
|
||||
type="button"
|
||||
class="hs-collapse-toggle flex h-8 w-8 items-center justify-center rounded-full border border-neutral-200 text-sm font-semibold text-neutral-800 hover:bg-neutral-100 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600"
|
||||
class="hs-collapse-toggle flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold text-neutral-600 transition duration-300 hover:bg-neutral-200 disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:outline-none"
|
||||
data-hs-collapse="#navbar-collapse-with-animation"
|
||||
aria-controls="navbar-collapse-with-animation"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4 flex-shrink-0 hs-collapse-open:hidden"
|
||||
|
||||
class="h-[1.25rem] w-[1.25rem] flex-shrink-0 hs-collapse-open:hidden"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -61,8 +95,7 @@ import ThemeIcon from "../components/ThemeIcon.astro";
|
|||
<line x1="3" x2="21" y1="18" y2="18"></line>
|
||||
</svg>
|
||||
<svg
|
||||
class="hidden h-4 w-4 flex-shrink-0 hs-collapse-open:block"
|
||||
|
||||
class="hidden h-[1.25rem] w-[1.25rem] flex-shrink-0 hs-collapse-open:block"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -78,7 +111,8 @@ import ThemeIcon from "../components/ThemeIcon.astro";
|
|||
</button>
|
||||
</div>
|
||||
<span class="inline-block md:hidden">
|
||||
<ThemeIcon /></span>
|
||||
<ThemeIcon />
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
id="navbar-collapse-with-animation"
|
||||
|
|
@ -87,27 +121,11 @@ import ThemeIcon from "../components/ThemeIcon.astro";
|
|||
<div
|
||||
class="mt-5 flex flex-col gap-x-0 gap-y-4 md:mt-0 md:flex-row md:items-center md:justify-end md:gap-x-7 md:gap-y-0 md:ps-7"
|
||||
>
|
||||
<a
|
||||
class="font-medium text-[#fa5a15] dark:text-[#fa5a15] dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600 md:py-6"
|
||||
href="#"
|
||||
aria-current="page">Home</a
|
||||
>
|
||||
<a
|
||||
class="font-medium text-neutral-500 hover:text-neutral-400 dark:text-neutral-400 dark:hover:text-neutral-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600 md:py-6"
|
||||
href="#">Products</a
|
||||
>
|
||||
<a
|
||||
class="font-medium text-neutral-500 hover:text-neutral-400 dark:text-neutral-400 dark:hover:text-neutral-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600 md:py-6"
|
||||
href="#">Services</a
|
||||
>
|
||||
<a
|
||||
class="font-medium text-neutral-500 hover:text-neutral-400 dark:text-neutral-400 dark:hover:text-neutral-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600 md:py-6"
|
||||
href="#">Blog</a
|
||||
>
|
||||
<a
|
||||
class="font-medium text-neutral-500 hover:text-neutral-400 dark:text-neutral-400 dark:hover:text-neutral-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600 md:py-6"
|
||||
href="#">Contact</a
|
||||
>
|
||||
<NavLink url="/" name="Home" />
|
||||
<NavLink url="/products" name="Products" />
|
||||
<NavLink url="/services" name="Services" />
|
||||
<NavLink url="/blog" name="Blog" />
|
||||
<NavLink url="/contact" name="Contact" />
|
||||
|
||||
<a
|
||||
class="flex items-center gap-x-2 font-medium text-neutral-500 hover:text-[#fa5a15] dark:border-neutral-700 dark:text-neutral-400 dark:hover:text-[#fb713b] md:my-6 md:border-s md:border-neutral-300 md:ps-6"
|
||||
|
|
@ -130,7 +148,8 @@ import ThemeIcon from "../components/ThemeIcon.astro";
|
|||
Log in
|
||||
</a>
|
||||
<span class="hidden md:inline-block">
|
||||
<ThemeIcon /></span>
|
||||
<ThemeIcon />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -239,4 +258,4 @@ import ThemeIcon from "../components/ThemeIcon.astro";
|
|||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
40
src/components/ui/links/NavLink.astro
Normal file
40
src/components/ui/links/NavLink.astro
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
const { url, name } = Astro.props;
|
||||
|
||||
interface Props {
|
||||
url: string;
|
||||
name: string;
|
||||
}
|
||||
---
|
||||
<!--
|
||||
Re-usable link component for navigation bar. Highlights the active link
|
||||
by comparing the current URL with the href of each link.
|
||||
We assign an ID matching the URL for easy reference in our script.
|
||||
If URL is '/' (home page), assign ID as 'home'
|
||||
-->
|
||||
<a
|
||||
id={url === "/" ? "home" : url.split("/")[1]}
|
||||
href={url}
|
||||
class="font-medium text-neutral-500 hover:text-neutral-400 dark:text-neutral-400 dark:hover:text-neutral-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600 md:py-6"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
let url = window.location.pathname.slice(1);
|
||||
url = url ? url : "home";
|
||||
let nav = document.getElementById(url);
|
||||
if (nav) {
|
||||
// If a matching link found, update its styles and set aria-current attribute
|
||||
nav.classList.remove(
|
||||
"text-neutral-500",
|
||||
"dark:text-neutral-400",
|
||||
"hover:text-neutral-400",
|
||||
"dark:hover:text-neutral-500",
|
||||
);
|
||||
nav.classList.add("text-[#fa5a15]", "dark:text-[#fa5a15]");
|
||||
nav.setAttribute("aria-current", "page");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue