import React, { ReactNode, useRef } from 'react';
import Transition from '../../Transition';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { defineMessages, FormattedMessage } from 'react-intl';
import { useUser, Permission } from '../../../hooks/useUser';
import useClickOutside from '../../../hooks/useClickOutside';
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 { hasPermission } = useUser();
useClickOutside(navRef, () => setClosed());
return (
<>
);
};
export default Sidebar;
