Peaceultime
/
obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix left column not hidden on none explorer pages on phone + Hide panel on link click outside of navigation links

This commit is contained in:
Peaceultime 2024-07-29 17:51:42 +02:00
parent ec0feb909c
commit efdfa92775
2 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app.vue
View File

@ -3,6 +3,9 @@ let icon: HTMLDivElement | null;
function toggleLeftPanel(_: Event): void { function toggleLeftPanel(_: Event): void {
document.querySelector('.published-container')?.classList.toggle('is-left-column-open'); document.querySelector('.published-container')?.classList.toggle('is-left-column-open');
} }
function hideLeftPanel(_: Event): void {
document.querySelector('.published-container')?.classList.remove('is-left-column-open');
}
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
@ -31,7 +34,7 @@ onMounted(() => {
</svg> </svg>
</div> </div>
<div class="gapx-3 flex align-stretch"> <div class="gapx-3 flex align-stretch">
<NuxtLink class="site-nav-bar-text" aria-label="Accueil" :href="'/'"> <NuxtLink @click="hideLeftPanel" class="site-nav-bar-text" aria-label="Accueil" :href="'/'">
<ThemeIcon icon="logo" :width=40 :height=40 /> <ThemeIcon icon="logo" :width=40 :height=40 />
</NuxtLink> </NuxtLink>
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Systeme" :href="'/explorer'" <NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Systeme" :href="'/explorer'"

15
components/LeftComponent.vue
View File

@ -1,3 +1,10 @@
<script setup lang="ts">
function hideLeftPanel(_: Event)
{
document?.querySelector('.published-container')?.classList.remove('is-left-column-open');
}
</script>
<template> <template>
<div :class="{'desktop-hidden': !$route.path.startsWith('/explorer')}" class="site-body-left-column"> <div :class="{'desktop-hidden': !$route.path.startsWith('/explorer')}" class="site-body-left-column">
<div class="site-body-left-column-inner"> <div class="site-body-left-column-inner">
@ -5,12 +12,12 @@
<div class="nav-view"> <div class="nav-view">
<div class="tree-item"> <div class="tree-item">
<div class="tree-item-children"> <div class="tree-item-children">
<NuxtLink class="site-nav-bar-text desktop-hidden" aria-label="Systeme" :href="'/explorer'" <NuxtLink @click="hideLeftPanel" class="site-nav-bar-text desktop-hidden" aria-label="Systeme" :href="'/explorer'"
:class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink> :class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
<ContentNavigation :class="{'hidden': !$route.path.startsWith('/explorer')}" v-slot="{ navigation }" queryContent="/"> <ContentNavigation v-slot="{ navigation }" queryContent="/">
<NavigationLink v-if="!!navigation" v-for="link of navigation.filter(e => !['/tags', '/'].includes(e?._path ?? ''))" :link="link" /> <NavigationLink :class="{'hidden': !$route.path.startsWith('/explorer')}" v-if="!!navigation" v-for="link of navigation.filter(e => !['/tags', '/'].includes(e?._path ?? ''))" :link="link" />
</ContentNavigation> </ContentNavigation>
<NuxtLink class="site-nav-bar-text desktop-hidden" aria-label="Outils" :href="'/tools'" <NuxtLink @click="hideLeftPanel" class="site-nav-bar-text desktop-hidden" aria-label="Outils" :href="'/tools'"
:class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink> :class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
</div> </div>
</div> </div>