marco/contexted-v3
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects 1 Releases Wiki Activity

click outside sidebar collapse on mobile

Browse Source
This commit is contained in:
Marco Crapts
2023-05-23 22:49:36 +02:00
parent ef1830aaf1
commit eb02ab7648
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/App.vue
View File

@@ -8,6 +8,7 @@ import {
passphraseRequired passphraseRequired
} from '@/composables/useEncryption' } from '@/composables/useEncryption'
import { windowIsMobile } from '@/utils/helpers' import { windowIsMobile } from '@/utils/helpers'
import SideBar from '@/components/SideBar.vue'
import firebase from 'firebase/compat/app' import firebase from 'firebase/compat/app'
import * as firebaseui from 'firebaseui' import * as firebaseui from 'firebaseui'
@@ -54,14 +55,14 @@ provide('loading', loading)
/> />
<div class="mx-auto flex w-full max-w-app flex-grow"> <div class="mx-auto flex w-full max-w-app flex-grow">
<Transition name="sidebar"> <Transition name="sidebar">
<SideBar <SideBar
:view-modes="viewModes" :view-modes="viewModes"
:active-view-mode="activeViewMode" :active-view-mode="activeViewMode"
@set-view-mode="(viewMode) => (activeViewMode = viewMode)" @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
@collapse="(collapse) => (sideBarCollapsed = collapse)" @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" 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" v-if="!sideBarCollapsed"
/> />
</Transition> </Transition>
<main <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" 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"> <Transition name="overlay">
<div <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" v-if="!sideBarCollapsed"
/> />
</Transition> </Transition>