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(ui): new menu design

Browse Source
This commit is contained in:
sct
2021-06-21 01:25:05 +09:00
committed by GitHub
parent db781bfc35
commit b71c07391a
6 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,9 +2,9 @@ import {
ClockIcon,
CogIcon,
SparklesIcon,
UsersIcon,
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';
@@ -39,34 +39,26 @@ const SidebarLinks: SidebarLinkProps[] = [
{
href: '/',
messagesKey: 'dashboard',
svgIcon: (
<SparklesIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
),
svgIcon: <SparklesIcon className="w-6 h-6 mr-3" />,
activeRegExp: /^\/(discover\/?(movies|tv)?)?$/,
},
{
href: '/requests',
messagesKey: 'requests',
svgIcon: (
<ClockIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
),
svgIcon: <ClockIcon className="w-6 h-6 mr-3" />,
activeRegExp: /^\/requests/,
},
{
href: '/users',
messagesKey: 'users',
svgIcon: (
<UsersIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
),
svgIcon: <UsersIcon className="w-6 h-6 mr-3" />,
activeRegExp: /^\/users/,
requiredPermission: Permission.MANAGE_USERS,
},
{
href: '/settings',
messagesKey: 'settings',
svgIcon: (
<CogIcon className="w-6 h-6 mr-3 text-gray-300 transition duration-150 ease-in-out group-hover:text-gray-100 group-focus:text-gray-300" />
),
svgIcon: <CogIcon className="w-6 h-6 mr-3" />,
activeRegExp: /^\/settings/,
requiredPermission: Permission.MANAGE_SETTINGS,
},
@@ -93,7 +85,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
leaveTo="opacity-0"
>
<div className="fixed inset-0">
<div className="absolute inset-0 bg-gray-600 opacity-75"></div>
<div className="absolute inset-0 bg-gray-900 opacity-90"></div>
</div>
</Transition>
<Transition
@@ -117,16 +109,16 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
</div>
<div
ref={navRef}
className="flex flex-col flex-1 h-0 pt-5 pb-8 overflow-y-auto sm:pb-4"
className="flex flex-col flex-1 h-0 pt-8 pb-8 overflow-y-auto sm:pb-4"
>
<div className="flex items-center flex-shrink-0 px-4">
<span className="text-xl text-gray-50">
<div className="flex items-center flex-shrink-0 px-2">
<span className="px-4 text-xl text-gray-50">
<a href="/">
<img src="/logo_full.svg" alt="Logo" />
</a>
</span>
</div>
<nav className="flex-1 px-2 mt-5 space-y-1">
<nav className="flex-1 px-4 mt-16 space-y-4">
{SidebarLinks.filter((link) =>
link.requiredPermission
? hasPermission(link.requiredPermission)
@@ -152,7 +144,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
router.pathname.match(
sidebarLink.activeRegExp
)
? 'bg-gray-900'
? 'bg-gradient-to-br from-indigo-600 to-purple-600'
: ''
}
`}
@@ -167,7 +159,9 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
})}
</nav>
{hasPermission(Permission.ADMIN) && (
<VersionStatus onClick={() => setClosed()} />
<div className="px-2">
<VersionStatus onClick={() => setClosed()} />
</div>
)}
</div>
</div>
@@ -182,16 +176,16 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
<div className="fixed top-0 bottom-0 left-0 hidden md:flex md:flex-shrink-0">
<div className="flex flex-col w-64 sidebar">
<div className="flex flex-col flex-1 h-0 bg-gray-800">
<div className="flex flex-col flex-1 pt-5 pb-4 overflow-y-auto">
<div className="flex items-center flex-shrink-0 px-4">
<span className="text-2xl text-gray-50">
<div className="flex flex-col flex-1 h-0">
<div className="flex flex-col flex-1 pt-8 pb-4 overflow-y-auto">
<div className="flex items-center flex-shrink-0">
<span className="px-4 text-2xl text-gray-50">
<a href="/">
<img src="/logo_full.svg" alt="Logo" />
</a>
</span>
</div>
<nav className="flex-1 px-2 mt-5 space-y-1 bg-gray-800">
<nav className="flex-1 px-4 mt-16 space-y-4">
{SidebarLinks.filter((link) =>
link.requiredPermission
? hasPermission(link.requiredPermission)
@@ -204,12 +198,12 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
as={sidebarLink.as}
>
<a
className={`flex group items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white hover:text-gray-100 hover:bg-gray-700 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150
className={`flex group items-center px-2 py-2 text-lg leading-6 rounded-md text-white hover:text-white focus:outline-none transition ease-in-out duration-150
${
router.pathname.match(
sidebarLink.activeRegExp
)
? 'bg-gray-900'
? 'bg-gradient-to-br from-indigo-600 to-purple-600'
: ''
}
`}
@@ -221,7 +215,11 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
);
})}
</nav>
{hasPermission(Permission.ADMIN) && <VersionStatus />}
{hasPermission(Permission.ADMIN) && (
<div className="px-2">
<VersionStatus />
</div>
)}
</div>
</div>
</div>