DONE: fix issue on top header where it is hidden on iOS
This commit is contained in:
ISMAIL MASSERAN
+1
-1
@@ -4,7 +4,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<title>MyKOPKB 1.0</title>
|
||||
</head>
|
||||
|
||||
|
||||
@@ -182,7 +182,8 @@ onUnmounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[
|
||||
'content h-screen transition-[margin,width] duration-100 pt-32 pb-8 px-7 z-10 relative group',
|
||||
'content relative z-10 h-screen px-7 pb-8 transition-[margin,width] duration-100 group',
|
||||
'pt-[calc(8rem+env(safe-area-inset-top,0px))]',
|
||||
'before:absolute before:bottom-4 before:top-27 before:-ml-px before:right-4 before:opacity-[.07] before:left-4 xl:before:left-0 before:bg-foreground before:rounded-4xl',
|
||||
'after:absolute after:bottom-4 after:top-27 after:-ml-px after:right-4 after:left-4 xl:after:left-0 after:bg-[color-mix(in_oklch,var(--color-background),var(--color-foreground)_2%)] after:rounded-4xl after:border after:border-foreground/15 dark:after:opacity-[.59]',
|
||||
'xl:ml-[320px]',
|
||||
@@ -192,48 +193,49 @@ onUnmounted(() => {
|
||||
'relative h-full',
|
||||
'[--color-nav-foreground:var(--color-background)] dark:[--color-nav-foreground:var(--color-foreground)]',
|
||||
]">
|
||||
<!-- TOP HEADER must sit outside overflow scroll ancestors so position:fixed works on iOS -->
|
||||
<div :class="[
|
||||
'top-bar group fixed inset-x-0 z-50 pl-9 pr-9 transition-[margin,width] duration-100 xl:ml-[320px] xl:mr-5 xl:pl-6 xl:pr-5 group-[.content--compact]:xl:ml-[165px]',
|
||||
'top-[max(0.75rem,env(safe-area-inset-top,0px))]',
|
||||
'before:absolute before:inset-y-0 before:left-4 before:right-0 before:my-3 before:mr-4 before:rounded-2xl before:border before:border-primary before:bg-primary before:transition-[margin] before:duration-100 xl:before:-mr-1 xl:before:ml-[-320px] group-[.content--compact]:xl:before:ml-[-165px] dark:before:border-[color-mix(in_oklch,var(--color-background),white_27%)] dark:before:bg-[color-mix(in_oklch,var(--color-background),white_14%)]',
|
||||
'after:absolute after:inset-0 after:left-8 after:right-0 after:z-[-1] after:mb-3 after:mr-8 after:rounded-2xl after:border after:border-primary/10 after:bg-primary/30 after:transition-[margin] after:duration-100 xl:after:mr-4 xl:after:ml-[-320px] group-[.content--compact]:xl:after:ml-[-165px] dark:after:border-[color-mix(in_oklch,var(--color-background),white_27%)] dark:after:bg-[color-mix(in_oklch,var(--color-background),white_14%)]',
|
||||
{ scrolled: scrolled },
|
||||
]">
|
||||
<div class="relative z-20 flex h-[90px] items-center gap-5">
|
||||
<div @click="openMobileMenu"
|
||||
class="open-mobile-menu mr-auto flex size-9 cursor-pointer items-center justify-center rounded-xl border border-(--color-nav-foreground)/30 bg-(--color-nav-foreground)/10 xl:hidden">
|
||||
<Lucide class="rotate-90 [--color:var(--color-nav-foreground)]" icon="ChartNoAxesColumn" />
|
||||
</div>
|
||||
<Breadcrumb v-if="breadcrumbItems.length"
|
||||
class="mr-auto hidden xl:flex [&_ol]:text-(--color-nav-foreground)/70 [&_li]:last:text-(--color-nav-foreground)/90 [&_li]:hover:text-(--color-nav-foreground)/90"
|
||||
:items="breadcrumbItems" />
|
||||
<div ref="notificationsRef"
|
||||
class="group/notifications relative flex size-10 flex-none cursor-pointer items-center justify-center rounded-xl border border-(--color-nav-foreground)/30 bg-(--color-nav-foreground)/10 transition-colors hover:bg-(--color-nav-foreground)/20"
|
||||
@click.stop="toggleNotifications">
|
||||
<Lucide class="size-[22px] stroke-[1.75] [--color:var(--color-nav-foreground)]" icon="Bell" />
|
||||
<span v-if="unreadCount > 0"
|
||||
class="bg-danger text-background ring-background absolute -right-1.5 -top-1.5 flex min-w-5 items-center justify-center rounded-full px-1 py-0.5 text-[11px] font-semibold leading-none ring-2">
|
||||
{{ unreadCount > 9 ? '9+' : unreadCount }}
|
||||
</span>
|
||||
<NotificationDropdown :open="notificationsOpen"
|
||||
class="absolute right-0 top-full mt-2 origin-top-right"
|
||||
boxClass="absolute right-0 top-0 -mr-0.5 -mt-0.5" />
|
||||
</div>
|
||||
<div ref="profileRef" class="group/profile relative size-9 flex-none cursor-pointer"
|
||||
@click.stop="toggleProfile">
|
||||
<AvatarRoot class="ring-(--color)/40 size-full [--color:var(--color-nav-foreground)] rounded-full">
|
||||
<AvatarFallback>{{ authStore.userName }}</AvatarFallback>
|
||||
<AvatarImage v-if="authStore.userImageUrl" :src="authStore.userImageUrl"
|
||||
:alt="authStore.userName" />
|
||||
</AvatarRoot>
|
||||
<AccountDropdown :open="profileOpen" class="absolute right-0 top-full mt-2 origin-top-right"
|
||||
boxClass="absolute right-0 top-0 -mr-0.5 -mt-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full overflow-x-hidden">
|
||||
<div @scroll="onScrollContent"
|
||||
class="content__scroll-area relative z-20 -mr-7 h-full overflow-y-auto pl-4 pr-11 pb-5 pt-2 transition-[margin] duration-100 xl:pl-0">
|
||||
<!-- TOP HEADER (top-bar: breadcrumb, role switch, notifications, profile) -->
|
||||
<div :class="[
|
||||
'top-bar group fixed inset-x-0 mt-3 top-0 z-50 pl-9 xl:pl-6 pr-9 xl:pr-5 transition-[margin,width] duration-100 xl:ml-[320px] xl:mr-5 group-[.content--compact]:xl:ml-[165px]',
|
||||
'before:inset-y-0 before:left-4 before:transition-[margin] before:duration-100 before:right-0 before:absolute xl:before:ml-[-320px] group-[.content--compact]:xl:before:ml-[-165px] before:bg-primary before:border before:border-primary dark:before:border-[color-mix(in_oklch,var(--color-background),white_27%)] dark:before:bg-[color-mix(in_oklch,var(--color-background),white_14%)] before:my-3 before:rounded-2xl before:mr-4 xl:before:-mr-1',
|
||||
'after:inset-0 after:left-8 after:transition-[margin] after:duration-100 after:right-0 after:absolute xl:after:ml-[-320px] group-[.content--compact]:xl:after:ml-[-165px] after:bg-primary/30 after:border after:border-primary/10 dark:after:border-[color-mix(in_oklch,var(--color-background),white_27%)] dark:after:bg-[color-mix(in_oklch,var(--color-background),white_14%)] after:z-[-1] after:mb-3 after:rounded-2xl after:mr-8 xl:after:mr-4',
|
||||
{ scrolled: scrolled },
|
||||
]">
|
||||
<div :class="['relative z-20 flex h-[90px] items-center gap-5']">
|
||||
<div @click="openMobileMenu"
|
||||
class="open-mobile-menu bg-(--color-nav-foreground)/10 border-(--color-nav-foreground)/30 mr-auto flex size-9 cursor-pointer items-center justify-center rounded-xl border xl:hidden">
|
||||
<Lucide class="rotate-90 [--color:var(--color-nav-foreground)]" icon="ChartNoAxesColumn" />
|
||||
</div>
|
||||
<Breadcrumb v-if="breadcrumbItems.length"
|
||||
class="mr-auto hidden xl:flex [&_ol]:text-(--color-nav-foreground)/70 [&_li]:last:text-(--color-nav-foreground)/90 [&_li]:hover:text-(--color-nav-foreground)/90"
|
||||
:items="breadcrumbItems" />
|
||||
<div ref="notificationsRef"
|
||||
class="group/notifications relative flex size-10 flex-none cursor-pointer items-center justify-center rounded-xl border border-(--color-nav-foreground)/30 bg-(--color-nav-foreground)/10 transition-colors hover:bg-(--color-nav-foreground)/20"
|
||||
@click.stop="toggleNotifications">
|
||||
<Lucide class="size-[22px] stroke-[1.75] [--color:var(--color-nav-foreground)]" icon="Bell" />
|
||||
<span v-if="unreadCount > 0"
|
||||
class="bg-danger text-background ring-background absolute -right-1.5 -top-1.5 flex min-w-5 items-center justify-center rounded-full px-1 py-0.5 text-[11px] font-semibold leading-none ring-2">
|
||||
{{ unreadCount > 9 ? '9+' : unreadCount }}
|
||||
</span>
|
||||
<NotificationDropdown :open="notificationsOpen"
|
||||
class="absolute right-0 top-full mt-2 origin-top-right"
|
||||
boxClass="absolute right-0 top-0 -mr-0.5 -mt-0.5" />
|
||||
</div>
|
||||
<div ref="profileRef" class="group/profile relative size-9 flex-none cursor-pointer"
|
||||
@click.stop="toggleProfile">
|
||||
<AvatarRoot class="ring-(--color)/40 size-full [--color:var(--color-nav-foreground)] rounded-full">
|
||||
<AvatarFallback>{{ authStore.userName }}</AvatarFallback>
|
||||
<AvatarImage v-if="authStore.userImageUrl" :src="authStore.userImageUrl"
|
||||
:alt="authStore.userName" />
|
||||
</AvatarRoot>
|
||||
<AccountDropdown :open="profileOpen" class="absolute right-0 top-full mt-2 origin-top-right"
|
||||
boxClass="absolute right-0 top-0 -mr-0.5 -mt-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<EmailVerificationBanner
|
||||
v-if="authStore.isAuthenticated && !authStore.isEmailVerified"
|
||||
class="mb-4"
|
||||
|
||||
Reference in New Issue
Block a user