shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): make sidebar links map (#90)

Browse Source
This commit is contained in:
Alex Zoitos
2020-09-14 23:09:33 -04:00
committed by GitHub
parent eae38bb9ec
commit 42cf45fa19
1 changed files with 81 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/Layout/Sidebar/index.tsx
View File

@@ -1,13 +1,47 @@
import React from 'react'; import React, { ReactNode } from 'react';
import Transition from '../../Transition'; import Transition from '../../Transition';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router';
interface SidebarProps { interface SidebarProps {
open?: boolean; open?: boolean;
setClosed: () => void; setClosed: () => void;
} }
interface SidebarLinkProps {
href: string;
svgIcon: ReactNode;
name: string;
activeRegExp: RegExp;
as?: string;
}
const SidebarLinks: SidebarLinkProps[] = [
{
href: '/',
name: 'Dashboard',
svgIcon: (
<svg
className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
),
activeRegExp: /^\/(discover\/?(movies|tv)?)?$/,
},
];
const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => { const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
const router = useRouter();
return ( return (
<> <>
<div className="md:hidden"> <div className="md:hidden">
@@ -63,25 +97,30 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
</span> </span>
</div> </div>
<nav className="mt-5 px-2 space-y-1"> <nav className="mt-5 px-2 space-y-1">
<Link href="/"> {SidebarLinks.map((sidebarLink) => {
<a className="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150"> return (
<svg <Link
className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150" key={`mobile-${sidebarLink.name}`}
fill="none" href={sidebarLink.href}
stroke="currentColor" as={sidebarLink.as}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
> >
<path <a
strokeLinecap="round" className={`group 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
strokeLinejoin="round" ${
strokeWidth={2} router.pathname.match(
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" sidebarLink.activeRegExp
/> )
</svg> ? 'bg-gray-900'
Dashboard : ''
}
`}
>
{sidebarLink.svgIcon}
{sidebarLink.name}
</a> </a>
</Link> </Link>
);
})}
</nav> </nav>
</div> </div>
</div> </div>
@@ -102,25 +141,30 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
<span className="text-2xl text-cool-gray-50">Overseerr</span> <span className="text-2xl text-cool-gray-50">Overseerr</span>
</div> </div>
<nav className="mt-5 flex-1 px-2 bg-gray-800 space-y-1"> <nav className="mt-5 flex-1 px-2 bg-gray-800 space-y-1">
<Link href="/"> {SidebarLinks.map((sidebarLink) => {
<a className="group flex items-center px-2 py-2 text-sm leading-5 font-medium text-white rounded-md bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150"> return (
<svg <Link
className="mr-3 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150" key={`desktop-${sidebarLink.name}`}
fill="none" href={sidebarLink.href}
stroke="currentColor" as={sidebarLink.as}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
> >
<path <a
strokeLinecap="round" className={`group 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
strokeLinejoin="round" ${
strokeWidth={2} router.pathname.match(
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" sidebarLink.activeRegExp
/> )
</svg> ? 'bg-gray-900'
Dashboard : ''
}
`}
>
{sidebarLink.svgIcon}
{sidebarLink.name}
</a> </a>
</Link> </Link>
);
})}
</nav> </nav>
</div> </div>
</div> </div>