teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: bring zen mode to mobile footer nav (#969)

Browse source
This commit is contained in:
Ayo Ayco 2023-01-11 15:00:41 +01:00 committed by GitHub
parent af85a5ea8d
commit c92fd7939e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
components/nav/NavBottomMoreMenu.vue
View file

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