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)}); React.useEffect(() => {document.body.setAttribute("data-theme", theme)});
return( 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("light")}>Light</a></li>
<li><a onClick={() => setTheme("cyberpunk")}>Cyberpunk</a></li> <li><a onClick={() => setTheme("cyberpunk")}>Cyberpunk</a></li>
<li><a onClick={() => setTheme("valentine")}>Valentine</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"> <html lang="en" data-theme="dark">
<body className="bg-base-100 base-content flex flex-col h-screen"> <body className="bg-base-100 base-content flex flex-col h-screen">
<div className="navbar bg-neutral text-neutral-content"> <div className="navbar bg-neutral text-neutral-content">
<div className="flex-1"> <div className="navbar-start">
<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 className="dropdown">
</div> <div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
<div className="flex-none"> <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>
<ul className="menu menu-horizontal px-1"> </div>
<li> <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">
<a href="https://git.datalore.sh/datalore/buzzword-bingo.git" target="_blank">Source Code</a> <li><a href="https://git.datalore.sh/datalore/buzzword-bingo.git" target="_blank">Source Code</a></li>
</li> <li><a>Theme</a><ThemeSwitcher/></li>
<li> </ul>
<details> </div>
<summary>Theme</summary> <span><b className="normal-case text-xl">Buzzword Bingo</b><span className="text-xs ml-1">v{process.env.npm_package_version}</span></span>
<ThemeSwitcher/> </div>
</details> <div className="navbar-end hidden lg:flex">
</li> <ul className="menu menu-horizontal px-1">
</ul> <li><a href="https://git.datalore.sh/datalore/buzzword-bingo.git" target="_blank">Source Code</a></li>
</div> <li><details>
<summary>Theme</summary>
<ThemeSwitcher/>
</details></li>
</ul>
</div>
</div> </div>
<main className="flex flex-col flex-1"> <main className="flex flex-col flex-1">
{children} {children}