From c92fd7939e95ae59d207fd3329c34491220cccb6 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Wed, 11 Jan 2023 15:00:41 +0100
Subject: [PATCH] feat: bring zen mode to mobile footer nav (#969)

---
 components/nav/NavBottomMoreMenu.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/components/nav/NavBottomMoreMenu.vue b/components/nav/NavBottomMoreMenu.vue
index 45799cbc..3d124c8c 100644
--- a/components/nav/NavBottomMoreMenu.vue
+++ b/components/nav/NavBottomMoreMenu.vue
@@ -82,6 +82,20 @@ onBeforeUnmount(() => {
               <span class="i-ri:sun-line dark:i-ri:moon-line flex-shrink-0 text-xl me-4 !align-middle" />
               {{ colorMode.value === 'light' ? $t('menu.toggle_theme.dark') : $t('menu.toggle_theme.light') }}
             </button>
+
+            <!-- Zen Mode -->
+            <button
+              flex flex-row items-center
+              block px-5 py-2 focus-blue w-full
+              text-sm text-base capitalize text-left whitespace-nowrap
+              transition-colors duration-200 transform
+              hover="bg-gray-100 dark:(bg-gray-700 text-white)"
+              :aria-label="$t('nav.zen_mode')"
+              @click="userSettings.zenMode = !userSettings.zenMode"
+            >
+              <span :class="userSettings.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'" class="flex-shrink-0 text-xl me-4 !align-middle" />
+              {{ $t('nav.zen_mode') }}
+            </button>
           </div>
         </div>
       </div>