KoPKB/mykopkb-fe
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DONE: fix issue on top header where it is hidden on iOS

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-09-23 14:38:41 +08:00
parent ee2397ace6
commit 6bc80ea23b
2 changed files with 43 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -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>
src/themes/Enigma/SideMenu/SideMenu.vue
+12 -10
View File
@@ -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,19 +193,17 @@ onUnmounted(() => {
'relative h-full',
'[--color-nav-foreground:var(--color-background)] dark:[--color-nav-foreground:var(--color-foreground)]',
]">
<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) -->
<!-- TOP HEADER must sit outside overflow scroll ancestors so position:fixed works on iOS -->
<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',
'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 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">
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"
@@ -234,6 +233,9 @@ onUnmounted(() => {
</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">
<EmailVerificationBanner
v-if="authStore.isAuthenticated && !authStore.isEmailVerified"
class="mb-4"