118 lines
4.9 KiB
Plaintext
118 lines
4.9 KiB
Plaintext
---
|
|
import { Icon } from 'astro-icon/components';
|
|
import DisplaySettings from "./widget/DisplaySettings.svelte";
|
|
import {LinkPreset, type NavBarLink} from "../types/config";
|
|
import {navBarConfig, siteConfig} from "../config";
|
|
import NavMenuPanel from "./widget/NavMenuPanel.astro";
|
|
import Search from "./Search.svelte";
|
|
import {LinkPresets} from "../constants/link-presets";
|
|
import LightDarkSwitch from "./LightDarkSwitch.svelte";
|
|
import {url} from "../utils/url-utils";
|
|
const className = Astro.props.class;
|
|
|
|
let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset): NavBarLink => {
|
|
if (typeof item === "number") {
|
|
return LinkPresets[item]
|
|
}
|
|
return item;
|
|
});
|
|
|
|
---
|
|
<div class:list={[
|
|
className,
|
|
"card-base sticky top-0 overflow-visible max-w-[var(--page-width)] h-[4.5rem] rounded-t-none mx-auto flex items-center justify-between px-4"]}>
|
|
<a href={url('/')} class="btn-plain scale-animation rounded-lg h-[3.25rem] px-5 font-bold active:scale-95">
|
|
<div class="flex flex-row text-[var(--primary)] items-center text-md">
|
|
<Icon name="material-symbols:home-outline-rounded" class="text-[1.75rem] mb-1 mr-2" />
|
|
{siteConfig.title}
|
|
</div>
|
|
</a>
|
|
<div class="hidden md:flex">
|
|
{links.map((l) => {
|
|
return <a aria-label={l.name} href={l.external ? l.url : url(l.url)} target={l.external ? "_blank" : null}
|
|
class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"
|
|
>
|
|
<div class="flex items-center">
|
|
{l.name}
|
|
{l.external && <Icon name="fa6-solid:arrow-up-right-from-square" class="text-[0.875rem] transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]"></Icon>}
|
|
</div>
|
|
</a>;
|
|
})}
|
|
</div>
|
|
<div class="flex">
|
|
<!--<SearchPanel client:load>-->
|
|
<Search client:load>
|
|
<Icon slot="search-icon" name="material-symbols:search" class="absolute text-[1.25rem] pointer-events-none ml-3 transition my-auto text-black/30 dark:text-white/30"></Icon>
|
|
<!--<Icon slot="arrow-icon" name="material-symbols:chevron-right-rounded" class="transition text-[1.25rem] my-auto text-[var(--primary)]"></Icon>-->
|
|
<Icon slot="arrow-icon" name="fa6-solid:chevron-right" class="transition text=[0.75rem] translate-x-0.5 my-auto text-[var(--primary)]"></Icon>
|
|
<Icon slot="search-switch" name="material-symbols:search" class="text-[1.25rem]"></Icon>
|
|
</Search>
|
|
{!siteConfig.themeColor.fixed && (
|
|
<button aria-label="Display Settings" class="btn-plain scale-animation rounded-lg h-11 w-11 active:scale-90" id="display-settings-switch">
|
|
<Icon name="material-symbols:palette-outline" class="text-[1.25rem]"></Icon>
|
|
</button>
|
|
)}
|
|
<LightDarkSwitch client:load></LightDarkSwitch>
|
|
<button aria-label="Menu" name="Nav Menu" class="btn-plain scale-animation rounded-lg w-11 h-11 active:scale-90 md:hidden" id="nav-menu-switch">
|
|
<Icon name="material-symbols:menu-rounded" class="text-[1.25rem]"></Icon>
|
|
</button>
|
|
</div>
|
|
<NavMenuPanel links={links}></NavMenuPanel>
|
|
<DisplaySettings client:only="svelte">
|
|
<Icon slot="restore-icon" name="fa6-solid:arrow-rotate-left" class="text-[0.875rem]"></Icon>
|
|
</DisplaySettings>
|
|
</div>
|
|
|
|
<style lang="stylus">
|
|
</style>
|
|
|
|
<script>
|
|
|
|
function switchTheme() {
|
|
if (localStorage.theme === 'dark') {
|
|
document.documentElement.classList.remove('dark');
|
|
localStorage.theme = 'light';
|
|
} else {
|
|
document.documentElement.classList.add('dark');
|
|
localStorage.theme = 'dark';
|
|
}
|
|
}
|
|
|
|
function loadButtonScript() {
|
|
let switchBtn = document.getElementById("scheme-switch");
|
|
switchBtn!.addEventListener("click", function () {
|
|
switchTheme()
|
|
});
|
|
|
|
let settingBtn = document.getElementById("display-settings-switch");
|
|
settingBtn!.addEventListener("click", function () {
|
|
let settingPanel = document.getElementById("display-setting");
|
|
settingPanel!.classList.toggle("float-panel-closed");
|
|
});
|
|
|
|
let menuBtn = document.getElementById("nav-menu-switch");
|
|
menuBtn!.addEventListener("click", function () {
|
|
let menuPanel = document.getElementById("nav-menu-panel");
|
|
menuPanel!.classList.toggle("float-panel-closed");
|
|
});
|
|
}
|
|
|
|
loadButtonScript();
|
|
|
|
document.addEventListener('astro:after-swap', () => {
|
|
loadButtonScript();
|
|
}, { once: false });
|
|
</script>
|
|
|
|
{import.meta.env.PROD && <script is:inline define:vars={{scriptUrl: url('/pagefind/pagefind.js')}}>
|
|
async function loadPagefind() {
|
|
const pagefind = await import(scriptUrl)
|
|
await pagefind.options({
|
|
'excerptLength': 20
|
|
})
|
|
pagefind.init()
|
|
window.pagefind = pagefind
|
|
pagefind.search('') // speed up the first search
|
|
}
|
|
loadPagefind()
|
|
</script>} |