owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve mobile burger menu

Browse Source
This commit is contained in:
Timothy Armes
2023-07-20 17:16:55 +02:00
parent 66a4a03c6a
commit 81c5f0e0e1
4 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/components/Navbar.tsx
+13 -14
View File
@@ -17,18 +17,17 @@ export default function Navbar() {
className="relative mt-0 h-16 w-full overflow-x-clip border-b-[1px] bg-white px-5 dark:border-gray-700 dark:bg-gray-800"
data-test="navbar"
>
<div className="container mx-auto flex h-full items-center">
<div className="flex w-full justify-center font-extrabold md:w-1/2 md:justify-start">
<Link
className="text-gray-900 no-underline hover:no-underline dark:text-white"
href="/"
>
<span className="font-title text-2xl text-gray-800 dark:text-white">
{t("title")}
</span>
</Link>
</div>
<div className="pb-2 md:hidden" data-test="mobile-menu">
<div className="container mx-auto flex h-full items-center justify-between">
<Link
className="font-extrabold text-gray-900 no-underline hover:no-underline dark:text-white"
href="/"
>
<span className="font-title text-2xl text-gray-800 dark:text-white">
{t("title")}
</span>
</Link>
<div className="md:hidden" data-test="mobile-menu">
<Hamburger />
</div>
@@ -36,9 +35,9 @@ export default function Navbar() {
className="hidden h-full justify-center md:flex md:w-1/2 md:justify-end"
data-test="desktop-menu"
>
<ul className="list-reset flex h-full flex-1 items-center justify-around text-gray-900 no-underline dark:text-white md:flex-none">
<ul className="list-reset flex h-full flex-1 items-center gap-14 text-gray-900 no-underline dark:text-white md:flex-none">
{links.map(({ title, route }) => (
<li key={route} className="mr-10 h-full">
<li key={route} className="h-full">
<Link
className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-primary-600"
href={route}