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 {
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 setup lang="ts">
@ -31,7 +34,7 @@ onMounted(() => {
</svg>
</div>
<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 />
</NuxtLink>
<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>
<div :class="{'desktop-hidden': !$route.path.startsWith('/explorer')}" class="site-body-left-column">
<div class="site-body-left-column-inner">
@ -5,12 +12,12 @@
<div class="nav-view">
<div class="tree-item">
<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>
<ContentNavigation :class="{'hidden': !$route.path.startsWith('/explorer')}" v-slot="{ navigation }" queryContent="/">
<NavigationLink v-if="!!navigation" v-for="link of navigation.filter(e => !['/tags', '/'].includes(e?._path ?? ''))" :link="link" />
<ContentNavigation v-slot="{ navigation }" queryContent="/">
<NavigationLink :class="{'hidden': !$route.path.startsWith('/explorer')}" v-if="!!navigation" v-for="link of navigation.filter(e => !['/tags', '/'].includes(e?._path ?? ''))" :link="link" />
</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>
</div>
</div>