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(layout component + sub components): refactor layout - extract sidebar, search etc (#11)

Browse Source 
Extract Sidebar, search, userDropdown, Notifications from Layout component
This commit is contained in:
Alex Zoitos
2020-08-24 08:02:59 -04:00
committed by GitHub
parent 97e0eb83fc
commit 995e700138
5 changed files with 266 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
src/components/Layout/Sidebar/index.tsx Normal file
View File

@@ -0,0 +1,132 @@
import React, { useState } from 'react';
import Transition from '../../Transition';
interface SidebarProps {
open?: boolean;
setClosed: () => void;
}
const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
return (
<>
<div className="md:hidden">
<Transition show={open}>
<div className="fixed inset-0 flex z-40">
<Transition
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0">
<div className="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
</Transition>
<Transition
enter="transition ease-in-out duration-300 transform"
enterFrom="-translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
>
<>
<div className="relative flex-1 flex flex-col max-w-xs w-full bg-gray-800">
<div className="absolute top-0 right-0 -mr-14 p-1">
<button
className="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600"
aria-label="Close sidebar"
onClick={() => setClosed()}
>
<svg
className="h-6 w-6 text-white"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div className="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
<div className="flex-shrink-0 flex items-center px-4">
<span className="text-xl text-cool-gray-50">
Overseerr
</span>
</div>
<nav className="mt-5 px-2 space-y-1">
<a
href="#"
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"
>
<svg
className="mr-4 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"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
Dashboard
</a>
</nav>
</div>
</div>
<div className="flex-shrink-0 w-14">
{/* <!-- Force sidebar to shrink to fit close icon --> */}
</div>
</>
</Transition>
</div>
</Transition>
</div>
<div className="hidden md:flex md:flex-shrink-0">
<div className="flex flex-col w-64">
<div className="flex flex-col h-0 flex-1 bg-gray-800">
<div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div className="flex items-center flex-shrink-0 px-4">
<span className="text-2xl text-cool-gray-50">Overseerr</span>
</div>
<nav className="mt-5 flex-1 px-2 bg-gray-800 space-y-1">
<a
href="#"
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"
>
<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"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
Dashboard
</a>
</nav>
</div>
</div>
</div>
</div>
</>
);
};
export default Sidebar;