443597b15d
Due to design changes, removed old authentication components and related configuration settings in .idea and .vscode folders. Changes include elimination of subscription input, email input, login and register modals, and user interface blocks. All changes aim to clean up the codebase and eliminate unused or unnecessary code.
244 lines
12 KiB
Text
244 lines
12 KiB
Text
---
|
|
// Import the necessary dependencies from individual component files
|
|
import ThemeIcon from "./ThemeIcon.astro";
|
|
import NavLink from "./ui/links/NavLink.astro";
|
|
import Authentication from "./Authentication.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-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">
|
|
<a
|
|
class="flex-none text-xl outline-none rounded-lg font-bold dark:focus:outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200"
|
|
href="/"
|
|
aria-label="Brand"
|
|
>
|
|
<!-- 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>
|
|
<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="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>
|
|
<span class="inline-block md:hidden">
|
|
<ThemeIcon />
|
|
</span>
|
|
</div>
|
|
<div
|
|
id="navbar-collapse-with-animation"
|
|
class="hs-collapse hidden grow basis-full overflow-hidden transition-all duration-300 md:block"
|
|
>
|
|
<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"
|
|
>
|
|
<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 />
|
|
<span class="hidden md:inline-block">
|
|
<ThemeIcon />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<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>
|