feat: nav-menu for mobile view
This commit is contained in:
saicaca
parent
ab89683cd7
commit
b64cf8eee3
|
|
@ -6,6 +6,7 @@ import I18nKey from "../i18n/i18nKey";
|
|||
import {i18n} from "../i18n/translation";
|
||||
import {LinkPreset, NavBarLink} from "../types/config";
|
||||
import {navBarConfig, siteConfig} from "../config";
|
||||
import NavMenuPanel from "./widget/NavMenuPanel.astro";
|
||||
const className = Astro.props.class;
|
||||
|
||||
function isI18nKey(key: string): key is I18nKey {
|
||||
|
|
@ -49,7 +50,7 @@ function getLinkPresetInfo(p: LinkPreset): NavBarLink {
|
|||
{siteConfig.title}
|
||||
</div>
|
||||
</Button></a>
|
||||
<div>
|
||||
<div class="hidden md:block">
|
||||
{links.map((l) => {
|
||||
return <a aria-label={l.name} href={l.url} target={l.external ? "_blank" : null}>
|
||||
<Button light class="font-bold px-5 rounded-lg active:scale-95">
|
||||
|
|
@ -71,8 +72,13 @@ function getLinkPresetInfo(p: LinkPreset): NavBarLink {
|
|||
<Icon name="material-symbols:dark-mode-outline-rounded" size={20} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Button name="Nav Menu" class="rounded-lg active:scale-90 block md:hidden" id="nav-menu-switch" iconName="material-symbols:menu-rounded" iconSize={20} isIcon light></Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<DisplaySetting></DisplaySetting>
|
||||
<NavMenuPanel links={links}></NavMenuPanel>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -91,7 +97,7 @@ function switchTheme() {
|
|||
}
|
||||
}
|
||||
|
||||
function loadThemeSwitchScript() {
|
||||
function loadButtonScript() {
|
||||
let switchBtn = document.getElementById("scheme-switch");
|
||||
switchBtn.addEventListener("click", function () {
|
||||
switchTheme()
|
||||
|
|
@ -102,12 +108,18 @@ function loadThemeSwitchScript() {
|
|||
let settingPanel = document.getElementById("display-setting");
|
||||
settingPanel.classList.toggle("closed");
|
||||
});
|
||||
|
||||
let menuBtn = document.getElementById("nav-menu-switch");
|
||||
menuBtn.addEventListener("click", function () {
|
||||
let menuPanel = document.getElementById("nav-menu-panel");
|
||||
menuPanel.classList.toggle("closed");
|
||||
});
|
||||
}
|
||||
|
||||
loadThemeSwitchScript();
|
||||
loadButtonScript();
|
||||
|
||||
document.addEventListener('astro:after-swap', () => {
|
||||
loadThemeSwitchScript();
|
||||
loadButtonScript();
|
||||
}, { once: false });
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
---
|
||||
import {NavBarLink} from "../../types/config";
|
||||
import {siteConfig} from "../../config";
|
||||
import {Icon} from "astro-icon/components";
|
||||
|
||||
interface Props {
|
||||
links: NavBarLink[],
|
||||
}
|
||||
|
||||
const links = Astro.props.links;
|
||||
|
||||
const enableBanner = siteConfig.banner.enable;
|
||||
|
||||
---
|
||||
<div id="nav-menu-panel" class:list={["card-base closed absolute transition-all fixed right-4 border-[var(--primary)] px-2 py-2",
|
||||
{"border-[3px]": !enableBanner}
|
||||
]}>
|
||||
{links.map((link) => (
|
||||
<a href={link.url} class="group flex justify-between items-center py-2 pl-3 pr-1 rounded-md gap-8
|
||||
hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)] transition
|
||||
"
|
||||
target={link.external ? "_blank" : null}
|
||||
>
|
||||
<div class="transition text-black/75 dark:text-white/75 font-bold group-hover:text-[var(--primary)] group-active:text-[var(--primary)]">
|
||||
{link.name}
|
||||
</div>
|
||||
{!link.external && <Icon name="material-symbols:chevron-right-rounded"
|
||||
class="transition text-[var(--primary)]" size="20"
|
||||
>
|
||||
</Icon>}
|
||||
{link.external && <Icon name="fa6-solid:arrow-up-right-from-square"
|
||||
class="transition text-black/25 dark:text-white/25 -translate-x-1" size="12"
|
||||
>
|
||||
</Icon>}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
#nav-menu-panel {
|
||||
@apply top-[84px]
|
||||
}
|
||||
#nav-menu-panel.closed {
|
||||
@apply top-[76px] opacity-0 pointer-events-none
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -198,7 +198,6 @@ function disableAnimation() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
function activateDisplaySettings() {
|
||||
let output = document.getElementById("hueValue");
|
||||
let slider = document.getElementById("colorSlider");
|
||||
|
|
@ -227,15 +226,19 @@ function activateDisplaySettings() {
|
|||
setHue(hue);
|
||||
}
|
||||
|
||||
document.addEventListener("click", event => {
|
||||
var cDom = document.getElementById("display-setting");
|
||||
let settingBtn = document.getElementById("display-settings-switch");
|
||||
var tDom = event.target;
|
||||
if (cDom == tDom || cDom.contains(tDom) || settingBtn == tDom || settingBtn.contains(tDom)) {
|
||||
return;
|
||||
}
|
||||
cDom.classList.add("closed");
|
||||
});
|
||||
function setClickOutsideToClose(panel, switchBtn) {
|
||||
document.addEventListener("click", event => {
|
||||
var cDom = document.getElementById(panel);
|
||||
let settingBtn = document.getElementById(switchBtn);
|
||||
var tDom = event.target;
|
||||
if (cDom == tDom || cDom.contains(tDom) || settingBtn == tDom || settingBtn.contains(tDom)) {
|
||||
return;
|
||||
}
|
||||
cDom.classList.add("closed");
|
||||
});
|
||||
}
|
||||
setClickOutsideToClose("display-setting", "display-settings-switch")
|
||||
setClickOutsideToClose("nav-menu-panel", "nav-menu-switch")
|
||||
}
|
||||
|
||||
function loadTheme() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue