69 lines
No EOL
1.9 KiB
TypeScript
69 lines
No EOL
1.9 KiB
TypeScript
import { Link } from "react-router";
|
|
import React from "react";
|
|
import useRoutes from "~/hooks/useRoutes";
|
|
import classNames from "classnames";
|
|
|
|
interface Props {
|
|
isOpen: boolean;
|
|
setIsOpen: (isOpen: boolean) => void;
|
|
handleLogout: (e: React.MouseEvent) => void;
|
|
}
|
|
|
|
const divStyles = classNames(
|
|
'absolute', 'text-xxl', 'rounded-b', 'top-full mt-1', 'left-0', 'right-0', '', 'py-2',
|
|
'bg-gray-600', 'border-secondary', 'shadow-md', 'flex', 'flex-col', 'space-y-3',
|
|
'md:hidden'
|
|
)
|
|
|
|
const linkStyles = classNames(
|
|
'border-b-2', 'border-secondary', 'uppercase',
|
|
'text-primary', 'hover:background-secondary', 'pb-2', 'pl-5',
|
|
'space-grotesk', 'text-xl'
|
|
)
|
|
|
|
const MobileDropdownMenu = ({ isOpen, setIsOpen, handleLogout }: Props) => {
|
|
const routes = useRoutes();
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className={divStyles}>
|
|
<Link
|
|
to={routes.home()}
|
|
className={linkStyles}
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
Home
|
|
</Link>
|
|
<Link
|
|
to={routes.dish.index()}
|
|
className={linkStyles}
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
Dishes
|
|
</Link>
|
|
<Link
|
|
to={routes.user.index()}
|
|
className={linkStyles}
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
Users
|
|
</Link>
|
|
<Link
|
|
to={routes.schedule.history()}
|
|
className={linkStyles}
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
History
|
|
</Link>
|
|
<Link
|
|
to={routes.auth.login()}
|
|
onClick={handleLogout}
|
|
className={linkStyles}>
|
|
Logout
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MobileDropdownMenu |