03f0d73c45
The changes made include code refactoring and reformatting in several files for better readability, and to adhere to best practices. Detailed and intuitive comments were added to the code, improving clarity and understanding of the codebase. There were also some class adjustments and minor changes in several files ranging from reordering class listings to updating element selections. Import statements were also modified for clarity. Accordion functionality was removed, potentially indicating a pending replacement or enhancement.
257 lines
13 KiB
Text
257 lines
13 KiB
Text
---
|
|
//Import relevant dependencies
|
|
import ThemeIcon from "./ThemeIcon.astro";
|
|
import NavLink from "./ui/links/NavLink.astro";
|
|
import Authentication from "./Authentication.astro";
|
|
---
|
|
|
|
<!-- Main header component -->
|
|
<header
|
|
class="sticky inset-x-0 top-4 z-50 flex w-full flex-wrap text-sm md:flex-nowrap md:justify-start"
|
|
>
|
|
<!-- Navigation container -->
|
|
<nav
|
|
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">
|
|
<!-- Brand logo -->
|
|
<a
|
|
class="flex-none rounded-lg text-xl font-bold outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
|
|
href="/"
|
|
aria-label="Brand"
|
|
>
|
|
<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>
|
|
<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>
|
|
<!-- Collapse toggle for smaller screens -->
|
|
<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 text-sm font-bold 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-[1.25rem] w-[1.25rem] flex-shrink-0 hs-collapse-open:hidden"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<line x1="3" x2="21" y1="6" y2="6"></line>
|
|
<line x1="3" x2="21" y1="12" y2="12"></line>
|
|
<line x1="3" x2="21" y1="18" y2="18"></line>
|
|
</svg>
|
|
<svg
|
|
class="hidden h-[1.25rem] w-[1.25rem] flex-shrink-0 hs-collapse-open:block"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M18 6 6 18"></path>
|
|
<path d="m6 6 12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<!-- ThemeIcon component specifically for smaller screens -->
|
|
<span class="inline-block md:hidden">
|
|
<ThemeIcon />
|
|
</span>
|
|
</div>
|
|
<!-- Contains navigation links -->
|
|
<div
|
|
id="navbar-collapse-with-animation"
|
|
class="hs-collapse hidden grow basis-full overflow-hidden transition-all duration-300 md:block"
|
|
>
|
|
<!-- Navigation links container -->
|
|
<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"
|
|
>
|
|
<!-- Navigation links and Authentication component -->
|
|
<NavLink url="/" name="Home" />
|
|
<NavLink url="/products" name="Products" />
|
|
<NavLink url="/services" name="Services" />
|
|
<NavLink url="/blog" name="Blog" />
|
|
<NavLink url="/contact" name="Contact" />
|
|
|
|
<Authentication />
|
|
<!-- ThemeIcon component specifically for larger screens -->
|
|
<span class="hidden md:inline-block">
|
|
<ThemeIcon />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<!-- Theme Appearance script to manage light/dark modes -->
|
|
<script is:inline>
|
|
const HSThemeAppearance = {
|
|
init() {
|
|
const defaultTheme = "default";
|
|
let theme = localStorage.getItem("hs_theme") || defaultTheme;
|
|
|
|
if (document.querySelector("html").classList.contains("dark")) return;
|
|
this.setAppearance(theme);
|
|
},
|
|
_resetStylesOnLoad() {
|
|
const $resetStyles = document.createElement("style");
|
|
$resetStyles.innerText = `*{transition: unset !important;}`;
|
|
$resetStyles.setAttribute("data-hs-appearance-onload-styles", "");
|
|
document.head.appendChild($resetStyles);
|
|
return $resetStyles;
|
|
},
|
|
setAppearance(theme, saveInStore = true, dispatchEvent = true) {
|
|
const $resetStylesEl = this._resetStylesOnLoad();
|
|
|
|
if (saveInStore) {
|
|
localStorage.setItem("hs_theme", theme);
|
|
}
|
|
|
|
if (theme === "auto") {
|
|
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "default";
|
|
}
|
|
|
|
document.querySelector("html").classList.remove("dark");
|
|
document.querySelector("html").classList.remove("default");
|
|
document.querySelector("html").classList.remove("auto");
|
|
|
|
document
|
|
.querySelector("html")
|
|
.classList.add(this.getOriginalAppearance());
|
|
|
|
setTimeout(() => {
|
|
$resetStylesEl.remove();
|
|
});
|
|
|
|
if (dispatchEvent) {
|
|
window.dispatchEvent(
|
|
new CustomEvent("on-hs-appearance-change", { detail: theme }),
|
|
);
|
|
}
|
|
},
|
|
getAppearance() {
|
|
let theme = this.getOriginalAppearance();
|
|
if (theme === "auto") {
|
|
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "default";
|
|
}
|
|
return theme;
|
|
},
|
|
getOriginalAppearance() {
|
|
const defaultTheme = "default";
|
|
return localStorage.getItem("hs_theme") || defaultTheme;
|
|
},
|
|
};
|
|
HSThemeAppearance.init();
|
|
|
|
window
|
|
.matchMedia("(prefers-color-scheme: dark)")
|
|
.addEventListener("change", (e) => {
|
|
if (HSThemeAppearance.getOriginalAppearance() === "auto") {
|
|
HSThemeAppearance.setAppearance("auto", false);
|
|
}
|
|
});
|
|
|
|
window.addEventListener("load", () => {
|
|
const $clickableThemes = document.querySelectorAll(
|
|
"[data-hs-theme-click-value]",
|
|
);
|
|
const $switchableThemes = document.querySelectorAll(
|
|
"[data-hs-theme-switch]",
|
|
);
|
|
|
|
$clickableThemes.forEach(($item) => {
|
|
$item.addEventListener("click", () =>
|
|
HSThemeAppearance.setAppearance(
|
|
$item.getAttribute("data-hs-theme-click-value"),
|
|
true,
|
|
$item,
|
|
),
|
|
);
|
|
});
|
|
|
|
$switchableThemes.forEach(($item) => {
|
|
$item.addEventListener("change", (e) => {
|
|
HSThemeAppearance.setAppearance(e.target.checked ? "dark" : "default");
|
|
});
|
|
|
|
$item.checked = HSThemeAppearance.getAppearance() === "dark";
|
|
});
|
|
|
|
window.addEventListener("on-hs-appearance-change", (e) => {
|
|
$switchableThemes.forEach(($item) => {
|
|
$item.checked = e.detail === "dark";
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<!--Import the necessary Collapse and Overlay plugins-->
|
|
<!--https://preline.co/plugins/html/collapse.html-->
|
|
<!--https://preline.co/plugins/html/overlay.html-->
|
|
<script is:inline src="/scripts/vendor/preline/collapse/index.js"></script>
|
|
<script is:inline src="/scripts/vendor/preline/overlay/index.js"></script>
|