From b5a8a3e635f94484559d08e60c16b343552ae989 Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Thu, 24 Oct 2024 16:37:48 +0700
Subject: [PATCH] lfg

---
 .../docs/components/layouts/navbar.mdx        | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/resources/content/docs/components/layouts/navbar.mdx b/resources/content/docs/components/layouts/navbar.mdx
index 5b90b896..7596a814 100644
--- a/resources/content/docs/components/layouts/navbar.mdx
+++ b/resources/content/docs/components/layouts/navbar.mdx
@@ -129,7 +129,7 @@ You also make the navbar sticky by setting the `isSticky` prop to `true`.
 ```
 
 ## 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.
+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 />
@@ -148,3 +148,38 @@ If you'd like to use icons on the navbar items, that's no problem at all. The na
 ## Disabled
 Disable individual navbar items when needed.
 <How className='lg:[&_header]:min-h-80 [&_header]:min-h-56' isCenter={false} toUse="layouts/navbar/navbar-disabled-demo" />
+
+## Controlled
+On mobile devices, the navbar is hidden by default. You can open it using `Navbar.Trigger`, but there are times when you might want to manage its state by clicking one of the links within the navbar. You can achieve this because it shares the sheet properties, specifically `isOpen` and `onOpenChange`. There are multiple ways to control the state, but the simplest method is to listen for path changes and set `isOpen` to `true` or `false` accordingly.
+
+### Inertia.js
+When you are using inertia.js, you can listen the path by using `usePage` hooks. If you're not sure, you can always see the real example here at [starter kit inertia.js](https://github.com/justdlabs/inertia.ts).
+```
+import { usePage } from '@inertiajs/react';
+
+export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) {
+
+  const page = usePage();
+  const [isOpen, setIsOpen] = React.useState(false);
+  React.useEffect(() => setIsOpen(false), [page.url]);
+
+  return (
+    <Navbar isOpen={isOpen} onOpenChange={setIsOpen} {...props}/>
+  )
+}
+```
+
+### Next.js
+On next.js, you can listen the path by using `usePathname` hooks. If you're not sure, you can always see the real example here at [starter kit next.js](https://github.com/justdlabs/next.js). or see live example [here](/blocks/navbar/navbar-01).
+```
+import { usePathname } from "next/navigation"
+
+export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) {
+
+  const pathname = usePathname();
+  const [isOpen, setIsOpen] = React.useState(false);
+  React.useEffect(() => setIsOpen(false), [pathname]);
+
+  return (
+    <Navbar isOpen={isOpen} onOpenChange={setIsOpen} {...props}>
+```