sam/pronounscc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: improve navigation slightly

Browse source
This commit is contained in:
Sam 2022-05-10 22:24:20 +02:00
parent 9c5a9a72d0
commit 7daac080f5
2 changed files with 79 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/lib/NavItem.tsx Normal file
View file

@ -0,0 +1,22 @@
import { ReactNode, PropsWithChildren } from "react";
import { Link } from "react-router-dom";
export interface Props {
children?: ReactNode | undefined;
to: string;
plain?: boolean | undefined; // Do not wrap in <li></li>
}
export default function NavItem(props: Props) {
const ret = <Link
className="hover:text-sky-500 dark:hover:text-sky-400"
to={props.to}
>
{props.children}
</Link>
if (props.plain) {
return ret
}
return <li>{ret}</li>;
}

56
frontend/src/lib/Navigation.tsx
View file

@ -1,8 +1,10 @@
import Logo from "./logo";
import { useState } from "react"; import { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { MoonStars, Sun, List } from "react-bootstrap-icons"; import { MoonStars, Sun, List } from "react-bootstrap-icons";
import NavItem from "./NavItem";
import Logo from "./logo";
function Navigation() { function Navigation() {
const [darkTheme, setDarkTheme] = useState<boolean>( const [darkTheme, setDarkTheme] = useState<boolean>(
localStorage.theme === "dark" || localStorage.theme === "dark" ||
@ -18,16 +20,17 @@ function Navigation() {
document.documentElement.classList.remove("dark"); document.documentElement.classList.remove("dark");
} }
const storeTheme = (system: boolean) => { const storeTheme = (useDarkTheme: boolean | null) => {
if (system) { if (useDarkTheme === null) {
localStorage.removeItem("theme"); localStorage.removeItem("theme");
} else { } else {
localStorage.setItem("theme", darkTheme ? "dark" : "light"); localStorage.setItem("theme", useDarkTheme ? "dark" : "light");
} }
}; };
return ( return (
<div className="bg-white/75 dark:bg-slate-800/75 w-full backdrop-blur border-b-slate-200 dark:border-b-slate-900"> <>
<div className="bg-white/75 dark:bg-slate-800/75 w-full backdrop-blur border-slate-200 dark:border-slate-700 border-b">
<div className="max-w-8xl mx-auto"> <div className="max-w-8xl mx-auto">
<div className="py-4 mx-4"> <div className="py-4 mx-4">
<div className="flex items-center"> <div className="flex items-center">
@ -36,22 +39,20 @@ function Navigation() {
</Link> </Link>
<div className="ml-auto flex items-center"> <div className="ml-auto flex items-center">
<nav className="hidden lg:flex"> <nav className="hidden lg:flex">
<ul className="flex space-x-8 font-bold"> <ul className="flex space-x-4 font-bold">
<li> <NavItem to="/">Home</NavItem>
<Link <NavItem to="/">Link 2</NavItem>
className="hover:text-sky-500 dark:hover:text-sky-400" <NavItem to="/">Link 3</NavItem>
to="/login" <NavItem to="/">Link 4</NavItem>
> <NavItem to="/">Link 5</NavItem>
Log in <NavItem to="/login">Log in</NavItem>
</Link>
</li>
</ul> </ul>
</nav> </nav>
<div className="flex border-l border-slate-200 ml-4 pl-4 lg:ml-6 lg:pl-6 lg:mr-2 dark:border-slate-500 space-x-2 lg:space-x-4"> <div className="flex border-l border-slate-200 ml-4 pl-4 lg:ml-6 lg:pl-6 lg:mr-2 dark:border-slate-700 space-x-2 lg:space-x-4">
<div <div
onClick={() => { onClick={() => {
storeTheme(false);
setDarkTheme(!darkTheme); setDarkTheme(!darkTheme);
storeTheme(!darkTheme);
}} }}
title={ title={
darkTheme ? "Switch to light mode" : "Switch to dark mode" darkTheme ? "Switch to light mode" : "Switch to dark mode"
@ -71,20 +72,19 @@ function Navigation() {
</div> </div>
</div> </div>
</div> </div>
<nav className={`lg:hidden my-2 p-4 border-slate-200 dark:border-slate-500 border-t border-b ${showMenu ? "flex" : "hidden"}`}> </div>
<ul className="flex space-x-8 font-bold"> </div>
<li> <nav className={`lg:hidden p-4 border-slate-200 dark:border-slate-700 border-b ${showMenu ? "flex" : "hidden"}`}>
<Link <ul className="flex flex-col space-y-4 font-bold">
className="hover:text-sky-500 dark:hover:text-sky-400" <NavItem to="/">Home</NavItem>
to="/login" <NavItem to="/">Link 2</NavItem>
> <NavItem to="/">Link 3</NavItem>
Log in <NavItem to="/">Link 4</NavItem>
</Link> <NavItem to="/">Link 5</NavItem>
</li> <NavItem to="/login">Log in</NavItem>
</ul> </ul>
</nav> </nav>
</div> </>
</div>
); );
} }