fix: update overall layout due to scroll-lock bug (#66)

Resolves #65
satnaing · Dec 25, 2024 · 3580ea6 · 3580ea6
1 parent ed77023
commit 3580ea6
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 52 deletions.
diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@
 
     <meta name="theme-color" content="#fff" />
   </head>
-  <body>
+  <body class="group/body">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
@@ -3,42 +3,46 @@ import { cn } from '@/lib/utils'
 import { Separator } from '@/components/ui/separator'
 import { SidebarTrigger } from '@/components/ui/sidebar'
 
-interface HeaderProps extends React.HTMLAttributes<React.ElementRef<'header'>> {
-  sticky?: boolean
+interface HeaderProps extends React.HTMLAttributes<HTMLElement> {
+  fixed?: boolean
+  ref?: React.Ref<HTMLElement>
 }
 
-export const Header = React.forwardRef<React.ElementRef<'header'>, HeaderProps>(
-  ({ className, sticky, children, ...props }, ref) => {
-    const [offset, setOffset] = React.useState(0)
+export const Header = ({
+  className,
+  fixed,
+  children,
+  ...props
+}: HeaderProps) => {
+  const [offset, setOffset] = React.useState(0)
 
-    React.useEffect(() => {
-      const onScroll = () => {
-        setOffset(document.body.scrollTop || document.documentElement.scrollTop)
-      }
+  React.useEffect(() => {
+    const onScroll = () => {
+      setOffset(document.body.scrollTop || document.documentElement.scrollTop)
+    }
 
-      // Add scroll listener to the body
-      document.addEventListener('scroll', onScroll, { passive: true })
+    // Add scroll listener to the body
+    document.addEventListener('scroll', onScroll, { passive: true })
 
-      // Clean up the event listener on unmount
-      return () => document.removeEventListener('scroll', onScroll)
-    }, [])
+    // Clean up the event listener on unmount
+    return () => document.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <header
+      className={cn(
+        'flex items-center gap-3 sm:gap-4 bg-background p-4 h-16',
+        fixed && 'header-fixed peer/header w-[inherit] fixed z-50 rounded-md',
+        offset > 10 && fixed ? 'shadow' : 'shadow-none',
+        className
+      )}
+      {...props}
+    >
+      <SidebarTrigger variant='outline' className='scale-125 sm:scale-100' />
+      <Separator orientation='vertical' className='h-6' />
+      {children}
+    </header>
+  )
+}
 
-    return (
-      <header
-        ref={ref}
-        className={cn(
-          'flex items-center gap-3 sm:gap-4 bg-background p-4 h-16',
-          sticky && 'sticky top-0 z-20',
-          offset > 10 && sticky ? 'shadow' : 'shadow-none',
-          className
-        )}
-        {...props}
-      >
-        <SidebarTrigger variant='outline' className='scale-125 sm:scale-100' />
-        <Separator orientation='vertical' className='h-6' />
-        {children}
-      </header>
-    )
-  }
-)
 Header.displayName = 'Header'
diff --git a/src/components/layout/main.tsx b/src/components/layout/main.tsx
@@ -1,22 +1,22 @@
 import React from 'react'
 import { cn } from '@/lib/utils'
 
-interface MainProps extends React.HTMLAttributes<React.ElementRef<'main'>> {
+interface MainProps extends React.HTMLAttributes<HTMLElement> {
   fixed?: boolean
+  ref?: React.Ref<HTMLElement>
+}
+
+export const Main = ({ fixed, ...props }: MainProps) => {
+  return (
+    <main
+      className={cn(
+        'peer-[.header-fixed]/header:mt-16',
+        'px-4 py-6',
+        fixed && 'fixed-main flex flex-col flex-grow overflow-hidden'
+      )}
+      {...props}
+    />
+  )
 }
 
-export const Main = React.forwardRef<React.ElementRef<'main'>, MainProps>(
-  ({ fixed, ...props }, ref) => {
-    return (
-      <main
-        ref={ref}
-        className={cn(
-          'px-4 py-6',
-          fixed && 'flex flex-col flex-grow overflow-hidden'
-        )}
-        {...props}
-      />
-    )
-  }
-)
 Main.displayName = 'Main'
diff --git a/src/features/tasks/index.tsx b/src/features/tasks/index.tsx
@@ -25,7 +25,7 @@ export default function Tasks() {
   return (
     <TasksContextProvider value={{ open, setOpen, currentRow, setCurrentRow }}>
       {/* ===== Top Heading ===== */}
-      <Header sticky>
+      <Header fixed>
         <Search />
         <div className='ml-auto flex items-center space-x-4'>
           <ThemeSwitch />

diff --git a/src/features/users/index.tsx b/src/features/users/index.tsx
@@ -29,7 +29,7 @@ export default function Users() {
   return (
     <UsersContextProvider value={{ open, setOpen, currentRow, setCurrentRow }}>
       {/* ===== Top Heading ===== */}
-      <Header sticky>
+      <Header fixed>
         <Search />
         <div className='ml-auto flex items-center space-x-4'>
           <ThemeSwitch />

diff --git a/src/routes/_authenticated/route.tsx b/src/routes/_authenticated/route.tsx
@@ -21,10 +21,12 @@ function RouteComponent() {
           id='content'
           className={cn(
             'max-w-full w-full ml-auto',
-            'peer-data-[state=collapsed]:w-[calc(100%-var(--sidebar-width-icon))]',
+            'peer-data-[state=collapsed]:w-[calc(100%-var(--sidebar-width-icon)-1rem)]',
             'peer-data-[state=expanded]:w-[calc(100%-var(--sidebar-width))]',
             'transition-[width] ease-linear duration-200',
-            'h-svh flex flex-col'
+            'h-svh flex flex-col',
+            'group-data-[scroll-locked=1]/body:h-full',
+            'group-data-[scroll-locked=1]/body:has-[main.fixed-main]:h-svh'
           )}
         >
           <Outlet />