You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
3.1 KiB
JavaScript
80 lines
3.1 KiB
JavaScript
import React from 'react'
|
|
import { Link, router, usePage } from '@inertiajs/react'
|
|
import { Sidebar } from 'flowbite-react'
|
|
import { HiLogout } from 'react-icons/hi'
|
|
import { filterOpenMenu } from './helpers'
|
|
import routes from './routes'
|
|
|
|
export default function SidebarNav({ user }) {
|
|
const {
|
|
props: { app_name },
|
|
} = usePage()
|
|
|
|
const menus = routes.filter((item) => {
|
|
item.open = false
|
|
if (!item.show) {
|
|
return null
|
|
}
|
|
if (user.role === null) {
|
|
return filterOpenMenu(user, item)
|
|
}
|
|
if (user.role.permissions.find((p) => p.name === item.permission)) {
|
|
return item
|
|
}
|
|
|
|
return filterOpenMenu(user, item)
|
|
})
|
|
|
|
return (
|
|
<Sidebar aria-label="Sidebar with multi-level dropdown example">
|
|
<Sidebar.Items>
|
|
<Sidebar.ItemGroup>
|
|
{menus.map((item) => (
|
|
<div key={item.name}>
|
|
{item.items === undefined ? (
|
|
<Sidebar.Item
|
|
onClick={() => router.visit(item.route)}
|
|
icon={item.icon}
|
|
active={route().current(item.active)}
|
|
>
|
|
{item.name}
|
|
</Sidebar.Item>
|
|
) : (
|
|
<Sidebar.Collapse
|
|
icon={item.icon}
|
|
label={item.name}
|
|
open={item.open}
|
|
>
|
|
{item.items.map((item) => (
|
|
<Sidebar.Item
|
|
key={item.name}
|
|
icon={item.icon}
|
|
active={route().current(
|
|
item.active
|
|
)}
|
|
onClick={() =>
|
|
router.visit(item.route)
|
|
}
|
|
>
|
|
{item.name}
|
|
</Sidebar.Item>
|
|
))}
|
|
</Sidebar.Collapse>
|
|
)}
|
|
</div>
|
|
))}
|
|
<Sidebar.Item
|
|
onClick={() => router.post(route('logout'))}
|
|
icon={HiLogout}
|
|
>
|
|
Logout
|
|
</Sidebar.Item>
|
|
</Sidebar.ItemGroup>
|
|
<p className="text-sm font-light text-gray-900 dark:text-gray-100 text-center bottom-4 left-4 pt-10">
|
|
{app_name} © {new Date().getFullYear()}
|
|
</p>
|
|
</Sidebar.Items>
|
|
</Sidebar>
|
|
)
|
|
}
|