367 lines
12 KiB
TypeScript
367 lines
12 KiB
TypeScript
import React, {ReactElement, useState} from 'react';
|
|
import {useRouter} from 'next/router';
|
|
import {AnimatePresence, motion} from 'framer-motion';
|
|
import Link from 'next/link';
|
|
import {ProjectSelector} from '../../index';
|
|
import Image from 'next/image';
|
|
import logo from '../../../../public/assets/logo.png';
|
|
import {Home, LayoutTemplate, LineChart, LogOut, Send, Settings, TerminalSquare, Users2, Workflow} from 'lucide-react';
|
|
|
|
interface SidebarLinkType {
|
|
to: string;
|
|
text: string;
|
|
disabled: boolean;
|
|
highlight?: boolean;
|
|
position: 'top' | 'bottom';
|
|
icon: ReactElement;
|
|
}
|
|
|
|
interface SidebarLinkProps {
|
|
active?: boolean;
|
|
to: string;
|
|
text: string;
|
|
disabled?: boolean;
|
|
highlight?: boolean;
|
|
svgPath: React.ReactElement;
|
|
}
|
|
|
|
export interface SidebarProps {
|
|
mobileOpen: boolean;
|
|
onSidebarVisibilityChange: () => void;
|
|
}
|
|
|
|
const links: SidebarLinkType[] = [
|
|
{
|
|
to: '/',
|
|
text: 'Dashboard',
|
|
disabled: false,
|
|
position: 'top',
|
|
icon: <Home />,
|
|
},
|
|
{
|
|
to: '/contacts',
|
|
text: 'Contacts',
|
|
disabled: false,
|
|
position: 'top',
|
|
icon: <Users2 />,
|
|
},
|
|
{
|
|
to: '/analytics',
|
|
text: 'Analytics',
|
|
disabled: false,
|
|
position: 'top',
|
|
icon: <LineChart />,
|
|
},
|
|
// {
|
|
// to: '/developers',
|
|
// text: 'Developers',
|
|
// disabled: false,
|
|
// position: 'top',
|
|
// icon: <TerminalSquare />,
|
|
// },
|
|
{
|
|
to: '/settings/project',
|
|
text: 'Project Settings',
|
|
disabled: false,
|
|
position: 'top',
|
|
icon: <Settings />,
|
|
},
|
|
{
|
|
to: '/events',
|
|
text: 'Events',
|
|
disabled: false,
|
|
position: 'top',
|
|
icon: <TerminalSquare />,
|
|
},
|
|
{
|
|
to: '/templates',
|
|
text: 'Templates',
|
|
disabled: false,
|
|
position: 'top',
|
|
icon: <LayoutTemplate />,
|
|
},
|
|
{
|
|
to: '/actions',
|
|
text: 'Actions',
|
|
disabled: false,
|
|
position: 'top',
|
|
icon: <Workflow />,
|
|
},
|
|
{
|
|
to: '/campaigns',
|
|
text: 'Campaigns',
|
|
disabled: false,
|
|
position: 'top',
|
|
icon: <Send />,
|
|
},
|
|
|
|
// {
|
|
// to: '/settings/account',
|
|
// text: 'Account Settings',
|
|
// disabled: false,
|
|
// position: 'bottom',
|
|
// icon: (
|
|
// <>
|
|
// <Settings />
|
|
// </>
|
|
// ),
|
|
// },
|
|
];
|
|
|
|
/**
|
|
* @param root0
|
|
* @param root0.active
|
|
* @param root0.to
|
|
* @param root0.text
|
|
* @param root0.disabled
|
|
* @param root0.svgPath
|
|
* @param root0.highlight
|
|
*/
|
|
function SidebarLink({active, to, text, disabled, highlight, svgPath}: SidebarLinkProps) {
|
|
if (to.startsWith('http')) {
|
|
return (
|
|
<a
|
|
onClick={() => window.open(to, '_blank')?.focus()}
|
|
className={`${
|
|
active
|
|
? 'cursor-default bg-neutral-100 text-neutral-700'
|
|
: disabled
|
|
? 'text-neutral-200'
|
|
: 'cursor-pointer text-neutral-400 hover:bg-neutral-50 hover:text-neutral-700'
|
|
} flex items-center gap-x-3 rounded p-2 text-sm font-medium transition ease-in-out`}
|
|
>
|
|
<div className="flex h-5 w-5 items-center justify-center">{svgPath}</div>
|
|
{text}
|
|
{highlight && <div className="ml-auto rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-800">New</div>}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
href={to}
|
|
className={`${
|
|
active
|
|
? 'cursor-default bg-neutral-100 text-neutral-700'
|
|
: disabled
|
|
? 'text-neutral-200'
|
|
: 'cursor-pointer text-neutral-400 hover:bg-neutral-50 hover:text-neutral-700'
|
|
} flex items-center gap-x-3 rounded p-2 text-sm font-medium transition ease-in-out`}
|
|
>
|
|
<div className="flex h-5 w-5 items-center justify-center">{svgPath}</div>
|
|
{text}
|
|
{highlight && <div className="ml-auto rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-800">New</div>}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @param root0
|
|
* @param root0.mobileOpen
|
|
* @param root0.onSidebarVisibilityChange
|
|
*/
|
|
export default function Sidebar({mobileOpen, onSidebarVisibilityChange}: SidebarProps) {
|
|
const router = useRouter();
|
|
|
|
const projectSelectorRef = React.createRef<HTMLDivElement>();
|
|
|
|
const [projectSelectorOpen, setProjectSelectorOpen] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<AnimatePresence>
|
|
{mobileOpen && (
|
|
<motion.div
|
|
initial={{opacity: 0, x: -100}}
|
|
animate={{opacity: 1, x: 0}}
|
|
exit={{opacity: 0, x: -100}}
|
|
transition={{ease: 'easeOut', duration: 0.15}}
|
|
className="fixed inset-0 z-40 flex w-full md:hidden"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<motion.div
|
|
animate={{opacity: [0, 1]}}
|
|
transition={{ease: 'easeOut', duration: 0.15}}
|
|
className="fixed inset-0 bg-neutral-600 bg-opacity-75"
|
|
aria-hidden={!mobileOpen}
|
|
/>
|
|
|
|
<div className="relative flex h-full w-full max-w-xs flex-1 flex-col bg-white">
|
|
<div className="absolute right-0 top-0 -mr-12 pt-2">
|
|
<button
|
|
className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
|
onClick={() => onSidebarVisibilityChange()}
|
|
>
|
|
<span className="sr-only">Close sidebar</span>
|
|
<svg
|
|
className="h-6 w-6 text-white"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="h-0 flex-1 overflow-y-auto pb-4 pt-5">
|
|
<div className="flex flex-shrink-0 items-center px-4">
|
|
<Link href={'/'} passHref>
|
|
<Image className={'cursor-pointer'} width={40} height={40} quality={40} src={logo} alt="Logo" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className={'mt-5 px-2'}>
|
|
<ProjectSelector
|
|
open={projectSelectorOpen}
|
|
onToggle={() => setProjectSelectorOpen(!projectSelectorOpen)}
|
|
ref={projectSelectorRef}
|
|
/>
|
|
</div>
|
|
|
|
<nav className="mt-5 space-y-1 px-2">
|
|
{links
|
|
.filter(l => l.position === 'top')
|
|
.map((link, index) => {
|
|
return (
|
|
<SidebarLink
|
|
key={`mobile-top-${index}`}
|
|
active={
|
|
link.to === '/'
|
|
? router.pathname === link.to
|
|
: router.pathname.split('/')[1].includes(link.to.split('/')[1])
|
|
}
|
|
to={link.to}
|
|
text={link.text}
|
|
disabled={link.disabled}
|
|
svgPath={link.icon}
|
|
/>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="flex-0 mb-4 space-y-1 bg-white px-2">
|
|
<nav>
|
|
{links
|
|
.filter(l => l.position === 'bottom')
|
|
.map((link, index) => {
|
|
return (
|
|
<SidebarLink
|
|
key={`mobile-bottom-${index}`}
|
|
active={router.pathname === link.to}
|
|
to={link.to}
|
|
text={link.text}
|
|
disabled={link.disabled}
|
|
svgPath={link.icon}
|
|
/>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-14 flex-shrink-0" />
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* Static sidebar for desktop */}
|
|
<div className="hidden md:flex md:flex-shrink-0">
|
|
<div className="flex w-72 flex-col">
|
|
<div className="flex h-0 flex-1 flex-col border-r border-neutral-100 bg-white px-6">
|
|
<div className="flex flex-1 flex-col overflow-y-auto pb-4 pt-5">
|
|
<div className="flex flex-shrink-0 items-center justify-center px-4">
|
|
<Link href={'/'} passHref>
|
|
<Image className={'cursor-pointer'} width={35} height={35} quality={80} src={logo} alt="Logo" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className={'px-2'}>
|
|
<ProjectSelector
|
|
open={projectSelectorOpen}
|
|
onToggle={() => setProjectSelectorOpen(!projectSelectorOpen)}
|
|
ref={projectSelectorRef}
|
|
/>
|
|
</div>
|
|
|
|
<nav className="mt-5 flex-1 space-y-1 px-2">
|
|
{links
|
|
.filter(l => l.position === 'top')
|
|
.map((link, index) => {
|
|
if (link.to === '/events') {
|
|
return (
|
|
<div className={'pt-3'}>
|
|
<p className={'pb-1 text-sm font-semibold text-neutral-500'}>Automations</p>
|
|
<SidebarLink
|
|
key={`desktop-top-${index}`}
|
|
active={router.pathname.split('/')[1].includes(link.to.split('/')[1])}
|
|
to={link.to}
|
|
text={link.text}
|
|
disabled={link.disabled}
|
|
svgPath={link.icon}
|
|
highlight={link.highlight}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (link.to === '/campaigns') {
|
|
return (
|
|
<div className={'py-3'}>
|
|
<p className={'pb-1 text-sm font-semibold text-neutral-500'}>Campaigns</p>
|
|
<SidebarLink
|
|
key={`desktop-top-${index}`}
|
|
active={router.pathname.split('/')[1].includes(link.to.split('/')[1])}
|
|
to={link.to}
|
|
text={link.text}
|
|
disabled={link.disabled}
|
|
svgPath={link.icon}
|
|
highlight={link.highlight}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<SidebarLink
|
|
key={`desktop-top-${index}`}
|
|
active={
|
|
link.to === '/'
|
|
? router.pathname === link.to
|
|
: router.pathname.split('/')[1].includes(link.to.split('/')[1])
|
|
}
|
|
to={link.to}
|
|
text={link.text}
|
|
disabled={link.disabled}
|
|
svgPath={link.icon}
|
|
highlight={link.highlight}
|
|
/>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="flex-0 mb-4 w-full space-y-1 bg-white px-2">
|
|
<Link
|
|
href={'/auth/logout'}
|
|
className={
|
|
'flex cursor-pointer items-center gap-x-3 rounded p-2 text-sm font-medium text-neutral-400 transition ease-in-out hover:bg-neutral-50 hover:text-neutral-700'
|
|
}
|
|
>
|
|
<div className="flex h-5 w-5 items-center justify-center">
|
|
<LogOut />
|
|
</div>
|
|
Sign out
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|