feat: improve navigation slightly
This commit is contained in:
parent
9c5a9a72d0
commit
7daac080f5
2 changed files with 79 additions and 57 deletions
22
frontend/src/lib/NavItem.tsx
Normal file
22
frontend/src/lib/NavItem.tsx
Normal 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>;
|
||||||
|
}
|
|
@ -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>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue