From 54f0f2ab1414996dc39bf8eff0fb079f1e8d4f16 Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Sat, 26 Oct 2024 17:46:23 +0700
Subject: [PATCH] improve navbar mw

---
 .../docs/overlays/drawer/drawer-basic-demo.tsx     |  2 +-
 components/ui/navbar.tsx                           | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/docs/overlays/drawer/drawer-basic-demo.tsx b/components/docs/overlays/drawer/drawer-basic-demo.tsx
index 82559837..85f841e1 100644
--- a/components/docs/overlays/drawer/drawer-basic-demo.tsx
+++ b/components/docs/overlays/drawer/drawer-basic-demo.tsx
@@ -16,7 +16,7 @@ export default function DrawerBasicDemo() {
           </Drawer.Description>
         </Drawer.Header>
         <Drawer.Body className="space-y-4">
-          <TextField label='Email' type="email" placeholder="john.doe@example.com" />
+          <TextField label="Email" type="email" placeholder="john.doe@example.com" />
           <TextField label="Password" type="password" placeholder="••••••••••••" isRevealable />
         </Drawer.Body>
         <Drawer.Footer>
diff --git a/components/ui/navbar.tsx b/components/ui/navbar.tsx
index 7a8f9e8d..0b0985b5 100644
--- a/components/ui/navbar.tsx
+++ b/components/ui/navbar.tsx
@@ -106,15 +106,21 @@ const Navbar = ({
 }
 
 const navStyles = tv({
-  base: "hidden h-[--navbar-height] [--navbar-height:3.5rem] px-4 group peer lg:flex items-center w-full max-w-screen-2xl mx-auto",
+  base: [
+    "hidden h-[--navbar-height] [--navbar-height:3.5rem] px-4 group peer lg:flex items-center w-full",
+    "[&>div]:max-w-[1680px] lg:[&>div]:flex [&>div]:items-center [&>div]:w-full [&>div]:mx-auto"
+  ],
   variants: {
     isSticky: {
       true: "sticky top-0"
     },
     intent: {
-      floating: "bg-tertiary shadow-sm border rounded-xl sm:px-4",
+      floating: "bg-tertiary max-w-[1680px] mx-auto shadow-sm border rounded-xl sm:px-4",
       navbar: "bg-tertiary shadow-sm border-b sm:px-6",
-      inset: "bg-secondary dark:bg-bg sm:px-6"
+      inset: [
+        "bg-secondary mx-auto dark:bg-bg sm:px-6",
+        "[&>div]:max-w-[1680px] lg:[&>div]:flex [&>div]:items-center [&>div]:w-full [&>div]:mx-auto"
+      ]
     }
   }
 })
@@ -148,7 +154,7 @@ const Nav = ({ className, ...props }: NavbarProps) => {
 
   return (
     <div className={navStyles({ isSticky, intent, className })} {...props}>
-      {props.children}
+      <div>{props.children}</div>
     </div>
   )
 }