Merge pull request #76 from ethanniser/arman/scroll-restoration

Scroll restoration
ethanniser · Dec 1, 2024 · 0a79dab · 0a79dab
2 parents c918c1c + 849191b
commit 0a79dab
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/app/(category-sidebar)/layout.tsx b/src/app/(category-sidebar)/layout.tsx
@@ -9,7 +9,7 @@ export default async function Layout({
   const allCollections = await getCollections();
   return (
     <div className="flex flex-grow font-mono">
-      <aside className="hidden w-64 min-w-64 max-w-64 border-r p-4 md:block">
+      <aside className="fixed left-0 hidden w-64 min-w-64 max-w-64 overflow-y-auto border-r p-4 md:block">
         <h2 className="border-b border-accent1 text-sm font-semibold text-accent1">
           Choose a Category
         </h2>
@@ -28,7 +28,7 @@ export default async function Layout({
         </ul>
       </aside>
       <main
-        className="h-[calc(100vh-113px)] overflow-y-auto p-4 pt-0"
+        className="min-h-[calc(100vh-113px)] flex-1 overflow-y-auto p-4 pt-0 md:pl-64"
         id="main-content"
       >
         {children}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -30,10 +30,10 @@ export default async function RootLayout({
   return (
     <html lang="en" className="h-full">
       <body
-        className={`${GeistSans.variable} ${GeistMono.variable} flex flex-col antialiased`}
+        className={`${GeistSans.variable} ${GeistMono.variable} flex flex-col overflow-y-auto overflow-x-hidden antialiased`}
       >
         <div>
-          <header className="z-10 flex flex-grow items-center justify-between gap-4 border-b-2 border-accent2 bg-background p-2 pb-[4px] pt-2 sm:flex-row sm:p-4 sm:pb-[4px] sm:pt-0">
+          <header className="fixed top-0 z-10 flex h-[90px] w-[100vw] flex-grow items-center justify-between border-b-2 border-accent2 bg-background p-2 pb-[4px] pt-2 sm:h-[70px] sm:flex-row sm:gap-4 sm:p-4 sm:pb-[4px] sm:pt-0">
             <div className="flex flex-grow flex-col">
               <div className="absolute right-2 top-2 flex justify-end pt-2 font-sans text-sm hover:underline sm:relative sm:right-0 sm:top-0">
                 <Suspense
@@ -49,7 +49,7 @@ export default async function RootLayout({
                   <AuthServer />
                 </Suspense>
               </div>
-              <div className="flex w-full flex-col items-start justify-center gap-2 sm:w-auto sm:flex-row sm:items-center">
+              <div className="flex w-full flex-col items-start justify-center sm:w-auto sm:flex-row sm:items-center sm:gap-2">
                 <Link
                   prefetch={true}
                   href="/"
@@ -94,9 +94,9 @@ export default async function RootLayout({
               </div>
             </div>
           </header>
-          {children}
+          <div className="pt-[85px] sm:pt-[70px]">{children}</div>
         </div>
-        <footer className="flex h-[8px] flex-col items-center justify-between space-y-2 border-t border-gray-400 bg-background px-4 font-sans text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
+        <footer className="fixed bottom-0 flex h-12 w-screen flex-col items-center justify-between space-y-2 border-t border-gray-400 bg-background px-4 font-sans text-[11px] sm:h-6 sm:flex-row sm:space-y-0">
           <div className="flex flex-wrap justify-center space-x-2 pt-2 sm:justify-start">
             <span className="hover:bg-accent2 hover:underline">Home</span>
             <span>|</span>