161sh/jointrashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/Crimekillz/jointrashposs.git synced 2024-11-22 00:43:50 +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']">
<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" />

23
components/docs/AsideNav.vue
View File

@ -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;

2
components/g/LargeLinks.vue
View File

@ -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>

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']">
<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"