mirror of
https://github.com/oxynote/oxynote.git
synced 2026-10-17 19:09:19 +02:00
78c4244619
* overhaul the notif inbox * make hook summary abstract --------- Co-authored-by: David <SE.David@protonmail.com> Co-authored-by: david <58231312+davseby@users.noreply.github.com>
64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
|
import { cn } from "~/lib/utils"
|
|
import { useSidebar, useSidebarWidth } from "./shadcn/ui/sidebar"
|
|
|
|
const open = defineModel<boolean>({ default: false })
|
|
|
|
const { open: sidebarOpen, state: sidebarState } = useSidebar()
|
|
const { width: sidebarWidth } = useSidebarWidth()
|
|
const isMobile = useMediaQuery("(max-width: 1250px)") // match SidebarProvider (needs to fit maintainers/reviewers and other name editor things)
|
|
|
|
const leftPosition = computed(() => {
|
|
if (!open.value || sidebarState.value === "collapsed") {
|
|
return 0
|
|
}
|
|
|
|
return sidebarWidth.value
|
|
})
|
|
</script>
|
|
<template>
|
|
<ShadcnUiSheet
|
|
v-if="isMobile"
|
|
:open="open"
|
|
@update:open="(value) => (open = value)"
|
|
>
|
|
<ShadcnUiSheetContent side="left" class="w-fit p-0">
|
|
<ShadcnUiSheetHeader class="sr-only">
|
|
<ShadcnUiSheetTitle>
|
|
{{ $t("sidebar.notification-sheet.title") }}
|
|
</ShadcnUiSheetTitle>
|
|
<ShadcnUiSheetDescription>
|
|
{{ $t("sidebar.notification-sheet.description") }}
|
|
</ShadcnUiSheetDescription>
|
|
</ShadcnUiSheetHeader>
|
|
<NotificationBox class="w-80" @close-notification-box="open = false" />
|
|
</ShadcnUiSheetContent>
|
|
</ShadcnUiSheet>
|
|
<div
|
|
v-else
|
|
:class="
|
|
cn(
|
|
'grid transition-[grid-template-columns] duration-200 ease-out',
|
|
open && sidebarOpen
|
|
? 'grid-cols-[clamp(20rem,22dvw,26.25rem)]'
|
|
: 'grid-cols-[0rem]',
|
|
)
|
|
"
|
|
>
|
|
<div
|
|
:class="
|
|
cn(
|
|
'fixed inset-y-0 h-svh overflow-hidden border-r border-border transition-transform duration-200 ease-out',
|
|
open && sidebarOpen ? 'translate-x-0' : '-translate-x-full',
|
|
)
|
|
"
|
|
:style="{ left: `${leftPosition}px` }"
|
|
>
|
|
<NotificationBox
|
|
class="w-[clamp(20rem,22dvw,26.25rem)]"
|
|
@close-notification-box="open = false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|