change navigation fix
parent
8af7a281a9
commit
eb2de92662
@ -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>
|
||||
)
|
||||
}
|
@ -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>
|
||||
)
|
||||
}
|
@ -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>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue