datalore/buzzword-bingo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

feat: Improved navbar for mobile devices

Browse Source
This commit is contained in:
datalore 2024-02-18 09:53:52 +01:00
parent 75fad798be
commit 3b63a4ce00
2 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/themeswitcher.tsx
View File

@ -9,7 +9,7 @@ export default function ThemeSwitcher(){
React.useEffect(() => {document.body.setAttribute("data-theme", theme)});
return(
<ul className="p-2 right-0 text-base-content z-10">
<ul className="p-2 right-0 z-10">
<li><a onClick={() => setTheme("light")}>Light</a></li>
<li><a onClick={() => setTheme("cyberpunk")}>Cyberpunk</a></li>
<li><a onClick={() => setTheme("valentine")}>Valentine</a></li>

37
src/app/layout.tsx
View File

@ -16,22 +16,27 @@ export default function RootLayout({
<html lang="en" data-theme="dark">
<body className="bg-base-100 base-content flex flex-col h-screen">
<div className="navbar bg-neutral text-neutral-content">
<div className="flex-1">
<span><b className="normal-case text-xl">Buzzword Bingo</b><span className="text-xs ml-1">v{process.env.npm_package_version}</span></span>
</div>
<div className="flex-none">
<ul className="menu menu-horizontal px-1">
<li>
<a href="https://git.datalore.sh/datalore/buzzword-bingo.git" target="_blank">Source Code</a>
</li>
<li>
<details>
<summary>Theme</summary>
<ThemeSwitcher/>
</details>
</li>
</ul>
</div>
<div className="navbar-start">
<div className="dropdown">
<div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</div>
<ul tabIndex={0} className="menu menu-sm dropdown-content bg-neutral text-neutral-content mt-3 z-[1] p-2 shadow rounded-box w-52">
<li><a href="https://git.datalore.sh/datalore/buzzword-bingo.git" target="_blank">Source Code</a></li>
<li><a>Theme</a><ThemeSwitcher/></li>
</ul>
</div>
<span><b className="normal-case text-xl">Buzzword Bingo</b><span className="text-xs ml-1">v{process.env.npm_package_version}</span></span>
</div>
<div className="navbar-end hidden lg:flex">
<ul className="menu menu-horizontal px-1">
<li><a href="https://git.datalore.sh/datalore/buzzword-bingo.git" target="_blank">Source Code</a></li>
<li><details>
<summary>Theme</summary>
<ThemeSwitcher/>
</details></li>
</ul>
</div>
</div>
<main className="flex flex-col flex-1">
{children}