From b64cf8eee335f5d64039da31938c16d9440aebee Mon Sep 17 00:00:00 2001
From: saicaca <zephyird@gmail.com>
Date: Mon, 6 Nov 2023 21:55:52 +0800
Subject: [PATCH] feat: nav-menu for mobile view

---
 src/components/Navbar.astro              | 20 +++++++--
 src/components/widget/NavMenuPanel.astro | 52 ++++++++++++++++++++++++
 src/layouts/Layout.astro                 | 23 ++++++-----
 3 files changed, 81 insertions(+), 14 deletions(-)
 create mode 100644 src/components/widget/NavMenuPanel.astro

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 4b4aa9b..9803f88 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -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 });
 
 
diff --git a/src/components/widget/NavMenuPanel.astro b/src/components/widget/NavMenuPanel.astro
new file mode 100644
index 0000000..6f499e2
--- /dev/null
+++ b/src/components/widget/NavMenuPanel.astro
@@ -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>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index ca91a30..d19ce51 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -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() {