lfg

app/blocks/navbar/navbar-01/page.tsx

@@ -1,10 +1,14 @@
 import type { Metadata } from "next"
-import { Heading } from "ui"
+import { Container, Heading } from "ui"
 
 export const metadata: Metadata = {
   title: "Navbar Default"
 }
 
 export default function Page() {
-  return <Heading>Home</Heading>
+  return (
+    <Container className="py-6 sm:py-12">
+      <Heading>Store</Heading>
+    </Container>
+  )
 }

app/blocks/navbar/navbar-02/page.tsx

@@ -1,9 +1,13 @@
 import type { Metadata } from "next"
-import { Heading } from "ui"
+import { Container, Heading } from "ui"
 
 export const metadata: Metadata = {
   title: "Navbar Floating"
 }
 export default function Page() {
-  return <Heading>Home</Heading>
+  return (
+    <Container className="py-6 sm:py-12">
+      <Heading>Mac</Heading>
+    </Container>
+  )
 }

app/blocks/navbar/navbar-03/page.tsx

@@ -1,9 +1,13 @@
 import type { Metadata } from "next"
-import { Heading } from "ui"
+import { Container, Heading } from "ui"
 
 export const metadata: Metadata = {
   title: "Navbar Inset"
 }
 export default function Page() {
-  return <Heading>Home</Heading>
+  return (
+    <Container className="py-6 sm:py-12">
+      <Heading>iPad</Heading>
+    </Container>
+  )
 }

app/blocks/navbar/navbar-04/page.tsx

@@ -1,9 +1,13 @@
 import type { Metadata } from "next"
-import { Heading } from "ui"
+import { Container, Heading } from "ui"
 
 export const metadata: Metadata = {
   title: "Basic Navbar"
 }
 export default function Page() {
-  return <Heading>Home</Heading>
+  return (
+    <Container className="py-6 sm:py-12">
+      <Heading>iPhone</Heading>
+    </Container>
+  )
 }

app/blocks/navbar/navbar-05/page.tsx

@@ -1,9 +1,13 @@
 import type { Metadata } from "next"
-import { Heading } from "ui"
+import { Container, Heading } from "ui"
 
 export const metadata: Metadata = {
   title: "Navbar using Icons"
 }
 export default function Page() {
-  return <Heading>Home</Heading>
+  return (
+    <Container className="py-6 sm:py-12">
+      <Heading>Watch</Heading>
+    </Container>
+  )
 }

components/docs/layouts/navbar/navbar-basic-demo.tsx

@@ -11,7 +11,7 @@ import {
   IconSearch,
   IconSettings
 } from "justd-icons"
-import { Avatar, Button, Menu, Navbar, Separator } from "ui"
+import { Avatar, Button, Container, Heading, Menu, Navbar, Separator } from "ui"
 
 export default function NavbarBasicDemo() {
   return (
@@ -97,9 +97,11 @@ export default function NavbarBasicDemo() {
         </Navbar.Flex>
       </Navbar.Compact>
 
-      {/*<Navbar.Inset>*/}
-      {/*  <Heading>Home</Heading>*/}
-      {/*</Navbar.Inset>*/}
+      <Navbar.Inset>
+        <Container className="sm:py-12 py-6">
+          <Heading>Home</Heading>
+        </Container>
+      </Navbar.Inset>
     </Navbar>
   )
 }

components/ui/navbar.tsx

@@ -9,7 +9,6 @@ import { Link } from "react-aria-components"
 import { tv } from "tailwind-variants"
 
 import { Button } from "./button"
-import { Container } from "./container"
 import { cn, cr, useMediaQuery } from "./primitive"
 import { Sheet } from "./sheet"
 
@@ -279,7 +278,7 @@ const Compact = ({ className, ...props }: React.ComponentProps<"div">) => {
 }
 
 const insetStyles = tv({
-  base: "grow lg:py-10",
+  base: "grow",
   variants: {
     intent: {
       floating: "",
@@ -297,9 +296,7 @@ const Inset = ({ className, ...props }: React.ComponentProps<"div">) => {
       data-intent={intent}
       className={cn("flex flex-1 flex-col", intent === "inset" && "pb-2 lg:px-2", className)}
     >
-      <div className={insetStyles({ intent, className })}>
-        <Container>{props.children}</Container>
-      </div>
+      <div className={insetStyles({ intent, className })}>{props.children}</div>
     </main>
   )
 }

resources/content/docs/components/layouts/navbar.mdx

@@ -16,7 +16,7 @@ A navbar provides a variety of actions or options for users to select.
 <WarningFramer/>
 
 ## Composed Components
-<Composed components={['button', 'container', 'sheet']}/>
+<Composed components={['button', 'sheet']}/>
 
 ## Manual Installation
 <Installation options={{ isManual: true }} items={['react-aria-components', 'framer-motion']}/>
@@ -128,18 +128,6 @@ You also make the navbar sticky by setting the `isSticky` prop to `true`.
 <Navbar isSticky />
 ```
 
-## Without Inset
-If you prefer full control of your layout and don't want to use the `<Navbar.Inset />` component which by default centers your content within a container, simply avoid using the `inset` intent. This allows you to freely manage the layout without the automatic centering effect.
-```
-<Navbar {...props}>
-  <Navbar.Nav />
-  <Navbar.Compact />
-  <Navbar.Inset> {/* remove this line */} // [!code --]
-    {children}
-  </Navbar.Inset> {/* remove this line */} // [!code --]
-</Navbar>
-```
-
 ## Using Icons
 If you'd like to use icons on the navbar items, that's no problem at all. The navbar is already designed and optimized to accommodate icons seamlessly. First of all, you need to install the `justd-icons` package.
 <Installation options={{ isManual: false }} items={['justd-icons']}/>