From e17b918c00ba7c2a234ba28c98c20ff992b91dc5 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 24 Nov 2022 12:21:30 +0800
Subject: [PATCH] feat: zenmode

---
 components/nav/NavFooter.vue | 9 ++++++++-
 composables/dialog.ts        | 4 +++-
 constants/index.ts           | 1 +
 layouts/default.vue          | 6 +++---
 styles/global.css            | 4 ++++
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 6b336e6c..2d8e6ee5 100644
--- a/components/nav/NavFooter.vue
+++ b/components/nav/NavFooter.vue
@@ -7,7 +7,14 @@ const buildTimeAgo = useTimeAgo(buildTime)
 
 <template>
   <div p4 text-sm op25 flex="~ col">
-    <button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
+    <div flex="~ gap2">
+      <button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
+      <button
+        text-lg mb4
+        :class="isZenmode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
+        @click="toggleZenmode()"
+      />
+    </div>
     <a cursor-pointer hover:underline @click="openPreviewHelp">Show intro</a>
     <div>A Mastodon client made with 💛</div>
     <div>Built <span :title="buildTime">{{ buildTimeAgo }}</span> · <a href="https://github.com/antfu/elk" target="_blank">GitHub</a></div>
diff --git a/composables/dialog.ts b/composables/dialog.ts
index e8d56bf4..3d586ade 100644
--- a/composables/dialog.ts
+++ b/composables/dialog.ts
@@ -1,6 +1,8 @@
-import { STORAGE_KEY_FIRST_VISIT } from '~/constants'
+import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants'
 
 export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, true)
+export const isZenmode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
+export const toggleZenmode = useToggle(isZenmode)
 
 export const isUserSwitcherOpen = ref(false)
 export const isSigninDialogOpen = ref(false)
diff --git a/constants/index.ts b/constants/index.ts
index dcc0f923..6a074d95 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -11,4 +11,5 @@ export const STORAGE_KEY_USERS = 'elk-users'
 export const STORAGE_KEY_CURRENT_USER = 'elk-current-user'
 export const STORAGE_KEY_NOTIFY_TAB = 'elk-notify-tab'
 export const STORAGE_KEY_FIRST_VISIT = 'elk-first-visit'
+export const STORAGE_KEY_ZEN_MODE = 'elk-zenmode'
 
diff --git a/layouts/default.vue b/layouts/default.vue
index 2425b23a..f36b3bd3 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
-  <div h-full>
+  <div h-full :class="{ zenmode: isZenmode }">
     <main flex w-full mxa lg:max-w-80rem>
-      <div class="hidden md:block w-1/4" relative>
+      <div class="hidden md:block w-1/4 zen-hide" relative>
         <div sticky top-0 h-screen flex="~ col">
           <slot name="left">
             <template v-if="currentUser">
@@ -23,7 +23,7 @@
       <div class="w-full md:w-2/4 min-h-screen" border="l r base">
         <slot />
       </div>
-      <div class="hidden md:block w-1/4">
+      <div class="hidden md:block w-1/4 zen-hide">
         <div sticky top-0 h-screen flex="~ col">
           <slot name="right">
             <NavTitle p5 />
diff --git a/styles/global.css b/styles/global.css
index 79dba27d..a6508127 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -61,3 +61,7 @@ html {
     }
   }
 }
+
+.zenmode .zen-hide {
+  --at-apply: op0 hover:op100 transition duration-600;
+}