chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

fix(web): make app bar and sidebar fully responsive

Browse Source
This commit is contained in:
Paul Armstrong
2021-02-03 15:15:27 -08:00
committed by Blake Blackshear
parent 276ce8710c
commit 063030bcf3
5 changed files with 75 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/Sidebar.jsx
View File

@@ -1,10 +1,11 @@
import { h } from 'preact';
import { h, Fragment } from 'preact';
import Link from './components/Link';
import LinkedLogo from './components/LinkedLogo';
import { Link as RouterLink } from 'preact-router/match';
import { useCallback, useState } from 'preact/hooks';
import { useSidebar } from './context';
function NavLink({ className = '', href, text }) {
function NavLink({ className = '', href, text, ...other }) {
const external = href.startsWith('http');
const El = external ? Link : RouterLink;
const props = external ? { rel: 'noopener nofollow', target: '_blank' } : {};
@@ -13,6 +14,7 @@ function NavLink({ className = '', href, text }) {
activeClassName="bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200"
className={`block px-4 py-2 mt-2 text-sm font-semibold text-gray-900 bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline self-end ${className}`}
href={href}
{...other}
{...props}
>
{text}
@@ -21,21 +23,34 @@ function NavLink({ className = '', href, text }) {
}
export default function Sidebar() {
const { showSidebar, setShowSidebar } = useSidebar();
const handleDismiss = useCallback(() => {
setShowSidebar(false);
}, [setShowSidebar]);
return (
<div className="sticky top-0 max-h-screen flex flex-col w-full md:w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0">
<div className="flex-shrink-0 p-4 flex flex-row items-center justify-between">
<div class="text-gray-500">
<LinkedLogo />
<Fragment>
{showSidebar ? <div className="fixed inset-0 z-20" onClick={handleDismiss} /> : ''}
<div
className={`fixed left-0 top-0 bottom-0 lg:sticky max-h-screen flex flex-col w-64 text-gray-700 bg-white dark:text-gray-200 dark:bg-gray-900 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 shadow lg:shadow-none z-20 lg:z-0 transform translate-x-0 ${
!showSidebar ? '-translate-x-full' : ''
} lg:translate-x-0 transition-transform duration-300`}
>
<div className="flex-shrink-0 p-4 flex flex-row items-center justify-between">
<div class="text-gray-500">
<LinkedLogo />
</div>
</div>
<nav className="flex-col flex-grow md:block overflow-hidden px-4 pb-4 md:pb-0 md:overflow-y-auto">
<NavLink onClick={handleDismiss} href="/" text="Cameras" />
<NavLink onClick={handleDismiss} href="/events" text="Events" />
<NavLink onClick={handleDismiss} href="/debug" text="Debug" />
<hr className="border-solid border-gray-500 mt-2" />
<NavLink className="self-end" href="https://blakeblackshear.github.io/frigate" text="Documentation" />
<NavLink className="self-end" href="https://github.com/blakeblackshear/frigate" text="GitHub" />
</nav>
</div>
<nav className="flex-col flex-grow md:block overflow-hidden px-4 pb-4 md:pb-0 md:overflow-y-auto">
<NavLink href="/" text="Cameras" />
<NavLink href="/events" text="Events" />
<NavLink href="/debug" text="Debug" />
<hr className="border-solid border-gray-500 mt-2" />
<NavLink className="self-end" href="https://blakeblackshear.github.io/frigate" text="Documentation" />
<NavLink className="self-end" href="https://github.com/blakeblackshear/frigate" text="GitHub" />
</nav>
</div>
</Fragment>
);
}