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

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

@ -1,13 +1,15 @@
import Logo from "./logo";
import { useState } from "react";
import { Link } from "react-router-dom";
import { MoonStars, Sun, List } from "react-bootstrap-icons";
import NavItem from "./NavItem";
import Logo from "./logo";
function Navigation() {
const [darkTheme, setDarkTheme] = useState<boolean>(
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
);
const [showMenu, setShowMenu] = useState(false);
@ -18,73 +20,71 @@ function Navigation() {
document.documentElement.classList.remove("dark");
}
const storeTheme = (system: boolean) => {
if (system) {
const storeTheme = (useDarkTheme: boolean | null) => {
if (useDarkTheme === null) {
localStorage.removeItem("theme");
} else {
localStorage.setItem("theme", darkTheme ? "dark" : "light");
localStorage.setItem("theme", useDarkTheme ? "dark" : "light");
}
};
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="py-4 mx-4">
<div className="flex items-center">
<Link to="/">
<Logo />
</Link>
<div className="ml-auto flex items-center">
<nav className="hidden lg:flex">
<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 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
onClick={() => {
storeTheme(false);
setDarkTheme(!darkTheme);
}}
title={
darkTheme ? "Switch to light mode" : "Switch to dark mode"
}
className="cursor-pointer"
>
{darkTheme ? (
<Sun className="hover:text-sky-400" size={24} />
) : (
<MoonStars size={24} className="hover:text-sky-500" />
)}
</div>
<div onClick={() => setShowMenu(!showMenu)} title="Show menu" className="cursor-pointer flex lg:hidden">
<>
<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="py-4 mx-4">
<div className="flex items-center">
<Link to="/">
<Logo />
</Link>
<div className="ml-auto flex items-center">
<nav className="hidden lg:flex">
<ul className="flex space-x-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>
<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
onClick={() => {
setDarkTheme(!darkTheme);
storeTheme(!darkTheme);
}}
title={
darkTheme ? "Switch to light mode" : "Switch to dark mode"
}
className="cursor-pointer"
>
{darkTheme ? (
<Sun className="hover:text-sky-400" size={24} />
) : (
<MoonStars size={24} className="hover:text-sky-500" />
)}
</div>
<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} />
</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>
<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>
</>
);
}