From cd48d46318437be2cde3206e5fff08267460c60c Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Thu, 21 Dec 2023 19:22:53 +0900
Subject: [PATCH] =?UTF-8?q?(add)=20AsideNav=E3=82=92=E5=80=8B=E5=88=A5?=
 =?UTF-8?q?=E3=81=A7=E9=96=8B=E9=96=89=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB=20Fix=20#63?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/content/MkIndex.vue |  4 ++--
 components/docs/AsideNav.vue   | 23 ++++++++++++++++++-----
 components/g/LargeLinks.vue    |  2 +-
 components/g/Links.vue         |  2 +-
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/components/content/MkIndex.vue b/components/content/MkIndex.vue
index cc0b4584..77da4879 100644
--- a/components/content/MkIndex.vue
+++ b/components/content/MkIndex.vue
@@ -2,10 +2,10 @@
 	<div :class="['grid grid-cols-1 md:grid-cols-2 gap-4', wide && 'lg:grid-cols-3']">
 		<ContentNavigation v-slot="{ navigation }" :query="query">
 			<GNuxtLink
-				class="block p-4 rounded-lg border border-slate-200 dark:border-accent-900 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 hover:!no-underline"
+				class="block p-4 rounded-lg border border-slate-200 dark:border-slate-700 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 hover:!no-underline"
 				v-for="item in findDeepObject((navigation[0] as Record<string, any>), (v) => realBasePath.replace(/\/$/, '') === v?._path.replace(/\/$/, ''))?.children ?? []"
 				:key="item._path"
-				:to="localePath(item._path)"
+				:to="item._path"
 			>
 				<h3 class="font-bold !text-lg !mt-0 !mb-2">
 					{{ item.navTitle || item.title }}<ArrowRightIco class="ml-1.5" />
diff --git a/components/docs/AsideNav.vue b/components/docs/AsideNav.vue
index c5708c12..d0beabe3 100644
--- a/components/docs/AsideNav.vue
+++ b/components/docs/AsideNav.vue
@@ -8,7 +8,7 @@
             :key="link.text"
             :class="[
                 depth === 2 && 'border-l-2 flex flex-col',
-                path.includes(link._path) ? 'border-accent-500' : 'border-gray-300',
+                path.includes(link._path) ? 'border-accent-500' : 'border-gray-300 dark:border-gray-600',
             ]"
         >
             <GNuxtLink
@@ -22,20 +22,27 @@
                 ]"
             >
                 <div class="flex">
-                    <div v-if="link.children && link.children.filter((v) => !isSamePath(v._path, link._path)).length > 0" class="mr-2">
+                    <button
+                        v-if="link.children && link.children.filter((v) => !isSamePath(v._path, link._path)).length > 0"
+                        class="block px-1 mr-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                        @click.prevent.stop="() => {
+                            console.log('State:', path.includes(link._path));
+                            manualOpen[link._path] = !(manualOpen[link._path] ?? path.includes(link._path));
+                        }"
+                    >
                         <ArrowIco 
                             :class="[
                                 'transition-transform',
-                                path.includes(link._path) && 'rotate-90'
+                                ((path.includes(link._path) && (manualOpen[link._path] !== false)) || manualOpen[link._path]) && 'rotate-90'
                             ]"
                         />
-                    </div>
+                    </button>
                     <div>{{ link.title }}</div>
                 </div>
             </GNuxtLink>
             <AsideNav
                 v-if="link.children && link.children.filter((v) => !isSamePath(v._path, link._path)).length > 0"
-                v-show="path.includes(link._path)"
+                v-show="(path.includes(link._path) && (manualOpen[link._path] !== false)) || manualOpen[link._path]"
                 :links="[link]"
                 :depth="depth + 1"
             />
@@ -51,6 +58,12 @@ import ArrowIco from "bi/chevron-right.svg";
 
 const isAsideNavOpen = useState<boolean>('miHub_docs_asideNav_openState', () => false);
 
+const manualOpen = useState<Record<string, boolean>>('miHub-docs-aside-manual-collapse', () => ({}));
+
+onUnmounted(() => {
+    manualOpen.value = {};
+});
+
 const props = withDefaults(defineProps<{
     links: NavItem[];
     depth?: number;
diff --git a/components/g/LargeLinks.vue b/components/g/LargeLinks.vue
index 8d2d8c0c..6c49be42 100644
--- a/components/g/LargeLinks.vue
+++ b/components/g/LargeLinks.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="space-y-6">
-        <GNuxtLink v-for="item in items" :to="item.to" :target="isLocalPath(item.to) ? undefined : '_blank'" class="rounded-xl border border-slate-200 dark:border-accent-900 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 p-4 sm:pt-0 sm:pb-0 sm:pl-6 sm:pr-0 overflow-hidden flex">
+        <GNuxtLink v-for="item in items" :to="item.to" :target="isLocalPath(item.to) ? undefined : '_blank'" class="rounded-xl border border-slate-200 dark:border-slate-700 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 p-4 sm:pt-0 sm:pb-0 sm:pl-6 sm:pr-0 overflow-hidden flex">
             <div class="flex flex-col justify-center">
                 <h2 class="text-xl sm:text-2xl font-bold mb-2">{{ item.title }}<ArrowRightIco v-if="isLocalPath(item.to)" class="ml-2" /><ArrowUpRightIco v-else class="ml-2" /></h2>
                 <p class="text-slate-500 dark:text-slate-300">{{ item.description }}</p>
diff --git a/components/g/Links.vue b/components/g/Links.vue
index 48b644ba..ceb043ad 100644
--- a/components/g/Links.vue
+++ b/components/g/Links.vue
@@ -2,7 +2,7 @@
 	<div :class="['grid grid-cols-1 md:grid-cols-2 gap-4', wide && 'lg:grid-cols-3']">
 	    <GNuxtLink
 	    	class="block p-4 rounded-lg border transition-colors hover:!no-underline"
-			:class="gray ? 'hover:bg-white dark:hover:bg-slate-950 border-slate-300 dark:border-accent-800' : 'hover:bg-slate-100 dark:hover:bg-slate-800 border-slate-200 dark:border-accent-900'"
+			:class="gray ? 'hover:bg-white dark:hover:bg-slate-950 border-slate-300 dark:border-accent-800' : 'hover:bg-slate-100 dark:hover:bg-slate-800 border-slate-200 dark:border-slate-700'"
 	    	v-for="item in items"
 	    	:key="item.to"
 	    	:to="item.to"