Add glass effect to top menu

pahans · May 19, 2024 · 6d66b14 · 6d66b14
1 parent 2dbc9b6
commit 6d66b14
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 18 deletions.
diff --git a/src/app/[slug]/edit/page.tsx b/src/app/[slug]/edit/page.tsx
diff --git a/src/app/components/header/header.tsx b/src/app/components/header/header.tsx
@@ -13,8 +13,11 @@ interface HeaderProps {}
 
 export const Header: React.FC<HeaderProps> = () => {
   return (
-    <header className="border-b mb-10 py-2 sticky top-0 flex-none w-full mx-auto bg-white border-gray-200 dark:border-gray-600 dark:bg-gray-800">
-      <div className="flex gap-2 max-w-2xl mx-auto items-center justify-between container">
+    <header
+      aria-label="Site navigation"
+      className="border-b mb-10 py-2 sticky top-0 flex-none w-full mx-auto bg-white border-gray-200 dark:border-gray-600 dark:bg-gray-800 border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+    >
+      <nav className="flex gap-2 max-w-2xl mx-auto items-center justify-between container">
         <Link className="flex gap-2 relative items-center" href="/">
           <Image
             src={ComposeLogo}
@@ -43,7 +46,7 @@ export const Header: React.FC<HeaderProps> = () => {
             </Drawer.Content>
           </Drawer.Portal>
         </Drawer.Root>
-      </div>
+      </nav>
     </header>
   );
 };
diff --git a/src/app/components/header/menu.tsx b/src/app/components/header/menu.tsx
@@ -25,7 +25,7 @@ export const Menu: React.FC<MenuProps> = ({ mobile, className = "" }) => {
       })}
     >
       {menuItems.map((item) => (
-        <>
+        <React.Fragment key={item.label}>
           <Button variant="ghost" asChild>
             <Link
               key={item.label}
@@ -39,7 +39,7 @@ export const Menu: React.FC<MenuProps> = ({ mobile, className = "" }) => {
             </Link>
           </Button>
           {mobile && <Separator />}
-        </>
+        </React.Fragment>
       ))}
     </div>
   );

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         )}
       >
         <Header />
-        <div className="max-w-2xl container">{children}</div>
+        <main className="max-w-2xl container">{children}</main>
       </body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,10 +2,8 @@ import { PostsList } from "./components/posts-list";
 import { Suspense } from "react";
 export default function HomePage() {
   return (
-    <main>
-      <Suspense fallback={<p>Loading...</p>}>
-        <PostsList />
-      </Suspense>
-    </main>
+    <Suspense fallback={<p>Loading...</p>}>
+      <PostsList />
+    </Suspense>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up @@
             )}
           >
             <Header />
-            <div className="max-w-2xl container">{children}</div>
+            <main className="max-w-2xl container">{children}</main>
           </body>
         </html>
       );
@@ Expand Down @@