Laravel 11.x

CHANGELOG.md

@@ -1,18 +1,23 @@
 
 
+## [1.1.2](https://github.com/justdlabs/inertia.ts/compare/1.1.1...1.1.2) (2024-10-24)
+
+
+### Bug Fixes
+
+* fix the navbar ([26859f4](https://github.com/justdlabs/inertia.ts/commit/26859f44dafa5519f46cb88235c3362b8c426548))
+
 ## [1.1.1](https://github.com/justdlabs/inertia.ts/compare/1.1.0...1.1.1) (2024-10-22)
 
 ## [1.1.0](https://github.com/justdlabs/inertia.ts/compare/1.0.34...1.1.0) (2024-10-22)
 
-
 ### Features
 
-* sync justd ([5ccf885](https://github.com/justdlabs/inertia.ts/commit/5ccf885ca9f09e85e004acc07b006a7b500c1c7c))
-
+-   sync justd ([5ccf885](https://github.com/justdlabs/inertia.ts/commit/5ccf885ca9f09e85e004acc07b006a7b500c1c7c))
 
 ### Bug Fixes
 
-* bump ([9cd9ba5](https://github.com/justdlabs/inertia.ts/commit/9cd9ba563d2107e603e2f68e46aa120a7a02454b))
+-   bump ([9cd9ba5](https://github.com/justdlabs/inertia.ts/commit/9cd9ba563d2107e603e2f68e46aa120a7a02454b))
 
 ## [1.0.34](https://github.com/justdlabs/inertia.ts/compare/1.0.33...1.0.34) (2024-10-17)
 

composer.json

@@ -1,6 +1,6 @@
 {
     "name": "justd/laravel",
-    "version": "1.1.1",
+    "version": "1.1.2",
     "type": "project",
     "description": "The skeleton application for the Laravel framework.",
     "keywords": [

package.json

@@ -80,5 +80,5 @@
             }
         }
     },
-    "version": "1.1.1"
+    "version": "1.1.2"
 }

resources/js/components/ui/navbar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 import { LayoutGroup, motion } from 'framer-motion';
@@ -20,8 +22,6 @@ type NavbarOptions = {
 type NavbarContextProps = {
     open: boolean;
     setOpen: (open: boolean) => void;
-    openCompact: boolean;
-    setOpenCompact: (open: boolean) => void;
     isCompact: boolean;
     toggleNavbar: () => void;
 } & NavbarOptions;
@@ -65,7 +65,6 @@ const Navbar = ({
     intent = 'navbar',
     ...props
 }: NavbarProviderProps) => {
-    const [openCompact, setOpenCompact] = React.useState(false);
     const isCompact = useMediaQuery('(max-width: 600px)');
     const [_open, _setOpen] = React.useState(defaultOpen);
     const open = openProp ?? _open;
@@ -82,21 +81,20 @@ const Navbar = ({
     );
 
     const toggleNavbar = React.useCallback(() => {
-        return isCompact ? setOpenCompact((open) => !open) : setOpen((open) => !open);
-    }, [isCompact, setOpen, setOpenCompact]);
+        setOpen((open) => !open);
+    }, [isCompact, setOpen]);
+
     const contextValue = React.useMemo<NavbarContextProps>(
         () => ({
             open,
             setOpen,
             isCompact,
-            openCompact,
-            setOpenCompact,
             toggleNavbar,
             intent,
             isSticky,
             side
         }),
-        [open, setOpen, isCompact, openCompact, setOpenCompact, toggleNavbar, intent, isSticky, side]
+        [open, setOpen, isCompact, toggleNavbar, intent, isSticky, side]
     );
     return (
         <NavbarContext.Provider value={contextValue}>
@@ -128,11 +126,11 @@ interface NavbarProps extends React.ComponentProps<'div'> {
 }
 
 const Nav = ({ className, ...props }: NavbarProps) => {
-    const { isCompact, side, intent, isSticky, openCompact, setOpenCompact } = useNavbar();
+    const { isCompact, side, intent, isSticky, open, setOpen } = useNavbar();
 
     if (isCompact) {
         return (
-            <Sheet isOpen={openCompact} onOpenChange={setOpenCompact} {...props}>
+            <Sheet isOpen={open} onOpenChange={setOpen} {...props}>
                 <Sheet.Content
                     side={side}
                     aria-label="Compact Navbar"
@@ -273,7 +271,7 @@ const insetStyles = tv({
     variants: {
         intent: {
             floating: '',
-            inset: 'min-h-svh bg-tertiary lg:rounded-lg lg:shadow-sm lg:ring-1 lg:ring-dark/5 lg:dark:ring-light/10',
+            inset: 'bg-tertiary lg:rounded-lg lg:shadow-sm lg:ring-1 lg:ring-dark/5 lg:dark:ring-light/10',
             navbar: ''
         }
     }

resources/js/layouts/app-navbar.tsx

@@ -47,8 +47,10 @@ const navigations = [
 export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Navbar>) {
     const page = usePage();
     const { auth } = usePage<PagePropsData>().props;
+    const [isOpen, setIsOpen] = React.useState(false);
+    React.useEffect(() => setIsOpen(false), [page.url]);
     return (
-        <Navbar {...props}>
+        <Navbar isOpen={isOpen} onOpenChange={setIsOpen} {...props}>
             <Navbar.Nav>
                 <Navbar.Logo aria-label="Logo">
                     <IconBrandLaravel className="size-6" />