feat: zenmode

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>

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)

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'
 

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 />

styles/global.css

@@ -61,3 +61,7 @@ html {
     }
   }
 }
+
+.zenmode .zen-hide {
+  --at-apply: op0 hover:op100 transition duration-600;
+}