From eb02ab7648f4150ef0ee5ce0012e60ed33258f4c Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Tue, 23 May 2023 22:49:36 +0200
Subject: [PATCH] click outside sidebar collapse on mobile

---
 src/App.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5f4beb9..b50c893 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,7 @@ import {
   passphraseRequired
 } from '@/composables/useEncryption'
 import { windowIsMobile } from '@/utils/helpers'
+import SideBar from '@/components/SideBar.vue'
 import firebase from 'firebase/compat/app'
 import * as firebaseui from 'firebaseui'
 
@@ -54,14 +55,14 @@ provide('loading', loading)
   />
   <div class="mx-auto flex w-full max-w-app flex-grow">
     <Transition name="sidebar">
-      <SideBar
-        :view-modes="viewModes"
-        :active-view-mode="activeViewMode"
-        @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
-        @collapse="(collapse) => (sideBarCollapsed = collapse)"
-        class="mt-[50px] bg-gray-100 px-3 py-6 transition-[width] delay-200 duration-0 max-sm:z-50 max-sm:border-x-[1px] max-sm:py-3 max-sm:transition-transform max-sm:delay-0 max-sm:duration-200"
-        v-if="!sideBarCollapsed"
-      />
+        <SideBar
+          :view-modes="viewModes"
+          :active-view-mode="activeViewMode"
+          @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
+          @collapse="(collapse) => (sideBarCollapsed = collapse)"
+          class="mt-[50px] bg-gray-100 px-3 py-6 transition-[width] delay-200 duration-0 max-sm:z-50 max-sm:border-x-[1px] max-sm:py-3 max-sm:transition-transform max-sm:delay-0 max-sm:duration-200"
+          v-if="!sideBarCollapsed"
+        />
     </Transition>
     <main
       class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out max-sm:px-4 max-sm:py-3"
@@ -69,7 +70,8 @@ provide('loading', loading)
     >
       <Transition name="overlay">
         <div
-          class="absolute bottom-0 left-0 right-0 top-0 bg-neutral-800 bg-opacity-60 transition-opacity duration-200 sm:hidden"
+          class="absolute bottom-0 left-0 right-0 top-0 bg-neutral-800 bg-opacity-60 transition-opacity duration-200 sm:hidden cursor-pointer z-40"
+          @click="sideBarCollapsed = true"
           v-if="!sideBarCollapsed"
         />
       </Transition>