From efdfa9277575076078b4fcbf7d504e4ea0e67fe2 Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Mon, 29 Jul 2024 17:51:42 +0200
Subject: [PATCH] Fix left column not hidden on none explorer pages on phone +
 Hide panel on link click outside of navigation links

---
 app.vue                      |  5 ++++-
 components/LeftComponent.vue | 15 +++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/app.vue b/app.vue
index 96131a8..eec1b3f 100644
--- a/app.vue
+++ b/app.vue
@@ -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'"
diff --git a/components/LeftComponent.vue b/components/LeftComponent.vue
index d615968..1b158eb 100644
--- a/components/LeftComponent.vue
+++ b/components/LeftComponent.vue
@@ -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>