This commit is contained in:
natib21
2026-07-14 08:47:46 +00:00
parent 22cf8eabd1
commit e63e6a2fc0
6 changed files with 92 additions and 16 deletions

View File

@@ -234,7 +234,10 @@ export const AppMenuTabs = () => {
);
return (
<div className="fixed top-16 left-0 right-0 z-30 bg-white dark:bg-gray-900 border-b dark:border-gray-800 overflow-hidden flex flex-col">
// Sticky (not fixed) so it stays in flow: content below never needs a
// magic offset matching this bar's responsive height. top-16 keeps it
// pinned just below the fixed 64px <Top> header while scrolling.
<div className="sticky top-16 z-30 bg-white dark:bg-gray-900 border-b dark:border-gray-800 overflow-hidden flex flex-col">
{/* Mobile View - Two separate rows */}
<div className="md:hidden flex flex-col pt-5 pb-3 px-4 space-y-3 mt-2">
{/* Primary items row */}

View File

@@ -27,10 +27,12 @@ export const AppLayout = () => {
}
return (
<div className="w-full h-dvh overflow-y-auto flex flex-col bg-background text-foreground">
// pt-16 clears the fixed 64px <Top>; AppMenuTabs is sticky and in flow,
// so content starts right below it at any tabs height (mobile/desktop).
<div className="w-full h-dvh overflow-y-auto flex flex-col pt-16 bg-background text-foreground">
<Top onToggleSidebar={toggleSidebar} showRecordManagementShortcut={!isSuperAdmin} />
<AppMenuTabs />
<div className="px-2 pb-2 pt-8 sm:px-4 sm:pb-4 sm:pt-10 flex-1">
<div className="px-2 pb-2 pt-4 sm:px-4 sm:pb-4 sm:pt-6 flex-1">
<div className="w-full overflow-x-auto">
<Outlet />
</div>