feat: zenmode
parent
3ce1eb3537
commit
e17b918c00
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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'
|
||||
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -61,3 +61,7 @@ html {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zenmode .zen-hide {
|
||||
--at-apply: op0 hover:op100 transition duration-600;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue