FreakU
/
pronounsfu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: improve navigation slightly

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>;
}

114
frontend/src/lib/Navigation.tsx
View File

@ -1,13 +1,15 @@
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" ||
(!("theme" in localStorage) && (!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches) window.matchMedia("(prefers-color-scheme: dark)").matches)
); );
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
@ -18,73 +20,71 @@ 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="max-w-8xl mx-auto"> <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="py-4 mx-4"> <div className="max-w-8xl mx-auto">
<div className="flex items-center"> <div className="py-4 mx-4">
<Link to="/"> <div className="flex items-center">
<Logo /> <Link to="/">
</Link> <Logo />
<div className="ml-auto flex items-center"> </Link>
<nav className="hidden lg:flex"> <div className="ml-auto flex items-center">
<ul className="flex space-x-8 font-bold"> <nav className="hidden lg:flex">
<li> <ul className="flex space-x-4 font-bold">
<Link <NavItem to="/">Home</NavItem>
className="hover:text-sky-500 dark:hover:text-sky-400" <NavItem to="/">Link 2</NavItem>
to="/login" <NavItem to="/">Link 3</NavItem>
> <NavItem to="/">Link 4</NavItem>
Log in <NavItem to="/">Link 5</NavItem>
</Link> <NavItem to="/login">Log in</NavItem>
</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-700 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-500 space-x-2 lg:space-x-4"> <div
<div onClick={() => {
onClick={() => { setDarkTheme(!darkTheme);
storeTheme(false); storeTheme(!darkTheme);
setDarkTheme(!darkTheme); }}
}} title={
title={ darkTheme ? "Switch to light mode" : "Switch to dark mode"
darkTheme ? "Switch to light mode" : "Switch to dark mode" }
} className="cursor-pointer"
className="cursor-pointer" >
> {darkTheme ? (
{darkTheme ? ( <Sun className="hover:text-sky-400" size={24} />
<Sun className="hover:text-sky-400" size={24} /> ) : (
) : ( <MoonStars size={24} className="hover:text-sky-500" />
<MoonStars size={24} className="hover:text-sky-500" /> )}
)} </div>
</div> <div onClick={() => setShowMenu(!showMenu)} title="Show menu" className="cursor-pointer flex lg:hidden">
<div onClick={() => setShowMenu(!showMenu)} title="Show menu" className="cursor-pointer flex lg:hidden">
<List className="dark:hover:text-sky-400 hover:text-sky-500" size={24} /> <List className="dark:hover:text-sky-400 hover:text-sky-500" size={24} />
</div>
</div> </div>
</div> </div>
</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"}`}>
<ul className="flex space-x-8 font-bold">
<li>
<Link
className="hover:text-sky-500 dark:hover:text-sky-400"
to="/login"
>
Log in
</Link>
</li>
</ul>
</nav>
</div> </div>
</div> <nav className={`lg:hidden p-4 border-slate-200 dark:border-slate-700 border-b ${showMenu ? "flex" : "hidden"}`}>
<ul className="flex flex-col space-y-4 font-bold">
<NavItem to="/">Home</NavItem>
<NavItem to="/">Link 2</NavItem>
<NavItem to="/">Link 3</NavItem>
<NavItem to="/">Link 4</NavItem>
<NavItem to="/">Link 5</NavItem>
<NavItem to="/login">Log in</NavItem>
</ul>
</nav>
</>
); );
} }