import { ClockIcon, CogIcon, SparklesIcon, XIcon, } from '@heroicons/react/outline'; import { UsersIcon } from '@heroicons/react/solid'; import Link from 'next/link'; import { useRouter } from 'next/router'; import React, { ReactNode, useRef } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import useClickOutside from '../../../hooks/useClickOutside'; import { Permission, useUser } from '../../../hooks/useUser'; import Transition from '../../Transition'; import VersionStatus from '../VersionStatus'; const messages = defineMessages({ dashboard: 'Discover', requests: 'Requests', users: 'Users', settings: 'Settings', }); interface SidebarProps { open?: boolean; setClosed: () => void; } interface SidebarLinkProps { href: string; svgIcon: ReactNode; messagesKey: keyof typeof messages; activeRegExp: RegExp; as?: string; requiredPermission?: Permission | Permission[]; } const SidebarLinks: SidebarLinkProps[] = [ { href: '/', messagesKey: 'dashboard', svgIcon: ( ), activeRegExp: /^\/(discover\/?(movies|tv)?)?$/, }, { href: '/requests', messagesKey: 'requests', svgIcon: ( ), activeRegExp: /^\/requests/, }, { href: '/users', messagesKey: 'users', svgIcon: ( ), activeRegExp: /^\/users/, requiredPermission: Permission.MANAGE_USERS, }, { href: '/settings', messagesKey: 'settings', svgIcon: ( ), activeRegExp: /^\/settings/, requiredPermission: Permission.MANAGE_SETTINGS, }, ]; const Sidebar: React.FC = ({ open, setClosed }) => { const navRef = useRef(null); const router = useRouter(); const intl = useIntl(); const { hasPermission } = useUser(); useClickOutside(navRef, () => setClosed()); return ( <> <> setClosed()} > {SidebarLinks.filter((link) => link.requiredPermission ? hasPermission(link.requiredPermission) : true ).map((sidebarLink) => { return ( setClosed()} onKeyDown={(e) => { if (e.key === 'Enter') { setClosed(); } }} role="button" tabIndex={0} className={`flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150 ${ router.pathname.match( sidebarLink.activeRegExp ) ? 'bg-gray-900' : '' } `} > {sidebarLink.svgIcon} {intl.formatMessage( messages[sidebarLink.messagesKey] )} ); })} {hasPermission(Permission.ADMIN) && ( setClosed()} /> )} {/* */} > {SidebarLinks.filter((link) => link.requiredPermission ? hasPermission(link.requiredPermission) : true ).map((sidebarLink) => { return ( {sidebarLink.svgIcon} {intl.formatMessage(messages[sidebarLink.messagesKey])} ); })} {hasPermission(Permission.ADMIN) && } > ); }; export default Sidebar;