161sh/jointrashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/Crimekillz/jointrashposs.git synced 2024-11-22 08:53:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

(add) AsideNavを個別で開閉できるように

Browse Source 
Fix #63
This commit is contained in:
kakkokari-gtyih 2023-12-21 19:22:53 +09:00
parent d17fc7b846
commit cd48d46318
4 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/content/MkIndex.vue
View File

@ -2,10 +2,10 @@
<div :class="['grid grid-cols-1 md:grid-cols-2 gap-4', wide && 'lg:grid-cols-3']"> <div :class="['grid grid-cols-1 md:grid-cols-2 gap-4', wide && 'lg:grid-cols-3']">
<ContentNavigation v-slot="{ navigation }" :query="query"> <ContentNavigation v-slot="{ navigation }" :query="query">
<GNuxtLink <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 ?? []" v-for="item in findDeepObject((navigation[0] as Record<string, any>), (v) => realBasePath.replace(/\/$/, '') === v?._path.replace(/\/$/, ''))?.children ?? []"
:key="item._path" :key="item._path"
:to="localePath(item._path)" :to="item._path"
> >
<h3 class="font-bold !text-lg !mt-0 !mb-2"> <h3 class="font-bold !text-lg !mt-0 !mb-2">
{{ item.navTitle || item.title }}<ArrowRightIco class="ml-1.5" /> {{ item.navTitle || item.title }}<ArrowRightIco class="ml-1.5" />

23
components/docs/AsideNav.vue
View File

@ -8,7 +8,7 @@
:key="link.text" :key="link.text"
:class="[ :class="[
depth === 2 && 'border-l-2 flex flex-col', 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 <GNuxtLink
@ -22,20 +22,27 @@
]" ]"
> >
<div class="flex"> <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 <ArrowIco
:class="[ :class="[
'transition-transform', '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>{{ link.title }}</div>
</div> </div>
</GNuxtLink> </GNuxtLink>
<AsideNav <AsideNav
v-if="link.children && link.children.filter((v) => !isSamePath(v._path, link._path)).length > 0" 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]" :links="[link]"
:depth="depth + 1" :depth="depth + 1"
/> />
@ -51,6 +58,12 @@ import ArrowIco from "bi/chevron-right.svg";
const isAsideNavOpen = useState<boolean>('miHub_docs_asideNav_openState', () => false); 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<{ const props = withDefaults(defineProps<{
links: NavItem[]; links: NavItem[];
depth?: number; depth?: number;

2
components/g/LargeLinks.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="space-y-6"> <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"> <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> <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> <p class="text-slate-500 dark:text-slate-300">{{ item.description }}</p>

2
components/g/Links.vue
View File

@ -2,7 +2,7 @@
<div :class="['grid grid-cols-1 md:grid-cols-2 gap-4', wide && 'lg:grid-cols-3']"> <div :class="['grid grid-cols-1 md:grid-cols-2 gap-4', wide && 'lg:grid-cols-3']">
<GNuxtLink <GNuxtLink
class="block p-4 rounded-lg border transition-colors hover:!no-underline" 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" v-for="item in items"
:key="item.to" :key="item.to"
:to="item.to" :to="item.to"