Add new scripts to Navbar and enhance NavLink's functionality
New scripts added to 'Navbar' component improve design functionality. 'NavLink' handling of current page has been refined to accurately reflect the current user's location with the addition of splitting the URL pattern. Changes in 'MainLayout' reflect updated script paths to match recent directory changes. These refinements improve usability and streamline codebase.
This commit is contained in:
parent
f1fa424976
commit
10708a3d35
3 changed files with 19 additions and 18 deletions
|
@ -242,3 +242,5 @@ import Authentication from "./Authentication.astro";
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<script is:inline src="/scripts/vendor/preline/collapse/index.js"></script>
|
||||||
|
<script is:inline src="/scripts/vendor/preline/overlay/index.js"></script>
|
|
@ -24,19 +24,19 @@ If URL is '/' (home page), assign ID as 'home'
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
let url = window.location.pathname.slice(1);
|
let url = window.location.pathname;
|
||||||
url = url ? url : "home";
|
let firstPathSegment = url.split('/')[1];
|
||||||
let nav = document.getElementById(url);
|
let navId = firstPathSegment ? firstPathSegment : 'home';
|
||||||
|
let nav = document.getElementById(navId);
|
||||||
if (nav) {
|
if (nav) {
|
||||||
// If a matching link found, update its styles and set aria-current attribute
|
|
||||||
nav.classList.remove(
|
nav.classList.remove(
|
||||||
"text-neutral-600",
|
'text-neutral-600',
|
||||||
"dark:text-neutral-400",
|
'dark:text-neutral-400',
|
||||||
"hover:text-neutral-500",
|
'hover:text-neutral-500',
|
||||||
"dark:hover:text-neutral-500",
|
'dark:hover:text-neutral-500',
|
||||||
);
|
);
|
||||||
nav.classList.add("text-[#fa5a15]", "dark:text-[#fb713b]");
|
nav.classList.add('text-[#fa5a15]', 'dark:text-[#fb713b]');
|
||||||
nav.setAttribute("aria-current", "page");
|
nav.setAttribute('aria-current', 'page');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
|
@ -27,7 +27,7 @@ interface Props {
|
||||||
document.documentElement.classList.remove("dark");
|
document.documentElement.classList.remove("dark");
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<script is:inline src="/assets/vendor/lenis/lenis.js"></script>
|
<script is:inline src="/scripts/vendor/lenis/lenis.js"></script>
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
// This script is to handle lenis library settings and behaviors, like the smooth scrolling
|
// This script is to handle lenis library settings and behaviors, like the smooth scrolling
|
||||||
const lenis = new Lenis({ smooth: true, smoothTouch: false });
|
const lenis = new Lenis({ smooth: true, smoothTouch: false });
|
||||||
|
@ -39,7 +39,6 @@ interface Props {
|
||||||
|
|
||||||
requestAnimationFrame(raf);
|
requestAnimationFrame(raf);
|
||||||
</script>
|
</script>
|
||||||
<script is:inline src="/assets/vendor/preline/preline.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
class="bg-neutral-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-neutral-800"
|
class="bg-neutral-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-neutral-800"
|
||||||
|
|
Loading…
Add table
Reference in a new issue