change navigation fix

resources/js/Components/Icons.jsx

@@ -0,0 +1,7 @@
+export const ArrowDownIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-4 h-4">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+        </svg>
+    )
+}

resources/js/Components/NavDropdown.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { Link } from "@inertiajs/react"
+import { ArrowDownIcon } from "./Icons"
+
+export default function NavDropdown({ name, items }) {
+    const active = items.find(act => act.route === route().current()) 
+
+    return (
+        <div className="dropdown">
+            <label tabIndex={0} className={`btn btn-ghost rounded-btn gap-2 ${active ? 'btn-active' : ''}`}>
+                {name}
+                <ArrowDownIcon/>
+            </label>
+            <ul tabIndex={0} className="menu dropdown-content p-2 shadow bg-base-100 rounded-box w-52 mt-4">
+            {items.map((item, index) => (
+                <li key={index}>
+                    <Link href={route(item.route)}>{item.name}</Link>
+                </li>
+            ))}
+            </ul>
+        </div>
+    )
+}

resources/js/Components/NavItem.jsx

@@ -1,30 +1,13 @@
 import React from 'react';
 import { Link } from '@inertiajs/react';
 
-export function NavItem({ href, active, children }) {
+export default function NavItem({ href, active, children }) {
     return (
         <Link
-            href={href}  
+            href={href}
             className={`btn btn-ghost rounded-btn ${active ? 'btn-active' : ''}`}
         >
             {children}
         </Link>
     );
-}
-
-export function NavDropdown({ name, items }) {
-    const active = items.find(act => act.route === route().current()) 
-
-    return (
-        <div className="dropdown">
-            <label tabIndex={0} className={`btn btn-ghost rounded-btn ${active ? 'btn-active' : ''}`}>{name}</label>
-            <ul tabIndex={0} className="menu dropdown-content p-2 shadow bg-base-100 rounded-box w-52 mt-4">
-            {items.map((item, index) => (
-                <li key={index}>
-                    <Link href={route(item.route)}>{item.label}{route}</Link>
-                </li>
-            ))}
-            </ul>
-        </div>
-    )
 }

resources/js/Layouts/AuthenticatedLayout.jsx

@@ -1,14 +1,22 @@
 import React, { useState, useEffect } from 'react';
-import ApplicationLogo from '@/Components/ApplicationLogo';
 import Dropdown from '@/Components/Dropdown';
 import { ToastContainer, toast } from 'react-toastify'
 import ResponsiveNavLink from '@/Components/ResponsiveNavLink';
-import { NavItem, NavDropdown } from '@/Components/NavItem';
+import NavItem from '@/Components/NavItem';
-import NavLink from '@/Components/NavLink';
+import NavDropdown from '@/Components/NavDropdown';
-import { Link } from '@inertiajs/react';
-import MenuItem from '@/Components/SidebarMenuItem';
 import { IconBell, IconBellRing } from '@/Icons';
 import { router } from '@inertiajs/react'
+import { ArrowDownIcon } from '@/Components/Icons';
+
+const routes = [
+    {name: "Dashboard", route: "dashboard"},
+    {name: "Dokumen", items: [
+        {name: "Dokumen", route: 'docs.index'},
+        {name: "Ketegori", route: 'docs.index'},
+        {name: "Jenis", route: 'docs.index'},
+    ]},
+    {name: "User", route: "users.index"},
+]
 
 const Notification = ({ notifications, hasUnread }) => {
     const redirect = (item) => {
@@ -59,23 +67,36 @@ export default function Authenticated({ auth, children, flash, notify }) {
                     </div> 
                     <div className="sm:flex flex-1 px-6 hidden">
                         <div className="flex items-stretch">
-                            <NavItem href={route("dashboard")}  active={route().current('dashboard')}>
+                            {routes.map((item, index) => (
-                                Dashboard
+                                <div key={index}>
-                            </NavItem>
+                                    {'items' in item ? (
-                           <NavDropdown
+                                        <NavDropdown
-                            name="Dokumen"
+                                            name={item.name}
-                            items={[
+                                            items={item.items}
-                                {label: "Dokumen", route: 'docs.index'},
+                                        />
-                                {label: "User", route: 'users.index'},
+                                    ) : (
-                            ]}
+                                        <NavItem href={route(item.route)}  active={route().current(item.route)}>
-                           ></NavDropdown>
+                                            {item.name}
-                            <NavItem href={route("users.index")}  active={route().current('users.*')}>
+                                        </NavItem>
-                                User
+                                    )}
-                            </NavItem>
+                                </div>
+                            ))}
                         </div>
                     </div>
                     <div className="sm:flex justify-end flex-1 px-2 hidden">
-                        {auth.user.name}
+                        <div className="dropdown dropdown-end">
+                            <label tabIndex={0} className="btn btn-ghost gap-2 m-1 normal-case">
+                                {auth.user.name}
+                                <ArrowDownIcon/>
+                            </label>
+                            <ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+                                <li>
+                                    <ResponsiveNavLink method="post" href={route('logout')} as="button">
+                                        Log Out
+                                    </ResponsiveNavLink>
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                     <div className="flex-1 justify-end items-center sm:hidden">
                         <button
@@ -102,18 +123,25 @@ export default function Authenticated({ auth, children, flash, notify }) {
                     </div>
                 </div>
 
-                
                 <div className={(showingNavigationDropdown ? 'block' : 'hidden') + ' sm:hidden'}>
                     <div className="pt-2 pb-3 space-y-1">
-                        <ResponsiveNavLink href={route('dashboard')} active={route().current('dashboard')}>
+                        {routes.map((item, index) => (
-                            Dashboard
+                            <div key={index}>
-                        </ResponsiveNavLink>
+                                {'items' in item ? (
-                        <ResponsiveNavLink href={route('docs.index')} active={route().current('docs.*')}>
+                                    <>
-                            Monitoring
+                                        {item.items.map((i, k) => (
-                        </ResponsiveNavLink>
+                                            <ResponsiveNavLink href={route(i.route)} active={route().current(i.route)} key={k+i.route}>
-                        <ResponsiveNavLink href={route('users.index')} active={route().current('users.*')}>
+                                                {i.name}
-                            Users
+                                            </ResponsiveNavLink>
-                        </ResponsiveNavLink>
+                                        ))}
+                                    </>
+                                ) : (
+                                    <ResponsiveNavLink href={route(item.route)} active={route().current(item.route)}>
+                                        {item.name}
+                                    </ResponsiveNavLink>
+                                )}
+                            </div>
+                        ))}
                     </div>
 
                     <div className="pt-4 pb-1 border-t border-gray-200">