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.

99 lines
3.5 KiB
JavaScript

import React from 'react'
import { Link, router } from '@inertiajs/react'
import { Sidebar } from 'flowbite-react'
import { HiLogout } from 'react-icons/hi'
import { filterOpenMenu } from './helpers'
import routes from './routes'
const Item = ({ item, children }) => {
const Icon = () =>
item.icon({
className:
'w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white',
})
const isActive = route().current(item.active)
const className = `flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 ${
isActive && 'bg-gray-200 dark:bg-gray-700'
}`
return (
<Link href={item.route} className={className}>
<Icon />
<span className="ml-3">{children}</span>
</Link>
)
}
const SubItem = ({ item, children }) => {
const Icon = () =>
item.icon({
className:
'w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white',
})
const isActive = route().current(item.active)
const className = `flex items-center w-full p-2 text-gray-900 transition duration-75 rounded-lg pl-11 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700 ${
isActive && 'bg-gray-200 dark:bg-gray-700'
}`
return (
<Link href={item.route} className={className}>
<Icon />
<span className="ml-3">{children}</span>
</Link>
)
}
export default function SidebarNav({ user }) {
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 ? (
<Item item={item}>{item.name}</Item>
) : (
<Sidebar.Collapse
icon={item.icon}
label={item.name}
open={item.open}
>
{item.items.map((item) => (
<SubItem item={item} key={item.name}>
{item.name}
</SubItem>
))}
</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">
Elsoft &copy; {new Date().getFullYear()}
</p>
</Sidebar.Items>
</Sidebar>
)
}