lucien/tanuki-s-forum
1
0
Fork 0
generated from lucien/api-template
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: added a burger menu for phones versions

Browse source
This commit is contained in:
Lukian LEIZOUR 2025-04-18 18:02:23 +02:00
parent 1dc8e9c7a1
commit 63914b5b3b
2 changed files with 43 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

24
front/src/components/TopBar.tsx
View file

@ -1,9 +1,12 @@
import { useState } from "react"
import { Link } from "react-router-dom"
import { User } from "../types"
import "../styles/TopBar.css"
export default function TopBar({ user }: { user: User | undefined }) {
const [burgerMenuOpen, setBurgerMenuOpen] = useState(false)
return (
<div className="topbar">
<div className="topbar-left">
@ -35,6 +38,27 @@ export default function TopBar({ user }: { user: User | undefined }) {
<Link to="/register">Register</Link>
</div>
)}
<div className="burger-menu">
{burgerMenuOpen && (
<div className="burger-menu-content">
<Link to="/">Home</Link>
<Link to="/channels">Channels</Link>
<Link to="/users">Users</Link>
{user ? (
<Link to={`/u/${user.username}`}>{user.username}</Link>
) : (
<div>
<Link to="/login">Login</Link>
<Link to="/register">Register</Link>
</div>
)}
</div>
)}
<button onClick={() => setBurgerMenuOpen(!burgerMenuOpen)}>
{burgerMenuOpen ? "Close" : "Menu"}
</button>
</div>
</div>
)
}

22
front/src/styles/TopBar.css
View file

@ -28,19 +28,35 @@
border-radius: 50%;
}
@media (max-width: 560px) {
.burger-menu {
display: none;
}
.burger-menu-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
@media (max-width: 630px) {
.topbar {
flex-direction: column;
align-items: center;
}
.topbar-left {
flex-direction: column;
align-items: center;
display: none;
}
.topbar-right {
display: none;
}
.burger-menu {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
}