JohnCosta27/savevictoriaway
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Adjust mobile navbar styling

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-24 16:47:54 +00:00
parent 9b3bd82b58
commit eef97143e5
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Navbar.tsx
View File

@ -3,7 +3,7 @@ import { Home, MessageSquare, Mail } from "lucide-react";
export const Navbar = () => { export const Navbar = () => {
const getNavClass = ({ isActive }: { isActive: boolean }) => const getNavClass = ({ isActive }: { isActive: boolean }) =>
`flex items-center gap-2 px-4 py-2 rounded-md transition-colors ${ `flex items-center gap-1.5 px-2 sm:px-4 py-2 rounded-md transition-colors ${
isActive isActive
? "bg-accent text-accent-foreground font-semibold" ? "bg-accent text-accent-foreground font-semibold"
: "text-foreground hover:bg-accent/50" : "text-foreground hover:bg-accent/50"
@ -11,24 +11,27 @@ export const Navbar = () => {
return ( return (
<nav className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border shadow-sm"> <nav className="sticky top-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border shadow-sm">
<div className="max-w-7xl mx-auto px-6 py-4"> <div className="max-w-7xl mx-auto px-4 py-3">
<div className="flex items-center justify-between"> <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h1 className="text-xl font-bold text-primary">Save Victoria Way Carpark</h1> <h1 className="text-lg sm:text-xl font-bold text-primary">
<span className="hidden sm:inline">Save Victoria Way Carpark</span>
<span className="sm:hidden">Save VW Carpark</span>
</h1>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-1 sm:gap-2 justify-center">
<NavLink to="/" end className={getNavClass}> <NavLink to="/" end className={getNavClass}>
<Home size={18} /> <Home size={18} />
<span>Home</span> <span className="text-sm sm:text-base">Home</span>
</NavLink> </NavLink>
<NavLink to="/testimonies" className={getNavClass}> <NavLink to="/testimonies" className={getNavClass}>
<MessageSquare size={18} /> <MessageSquare size={18} />
<span>Testimonies</span> <span className="text-sm sm:text-base">Testimonies</span>
</NavLink> </NavLink>
<NavLink to="/contact" className={getNavClass}> <NavLink to="/contact" className={getNavClass}>
<Mail size={18} /> <Mail size={18} />
<span>Contact</span> <span className="text-sm sm:text-base">Contact</span>
</NavLink> </NavLink>
</div> </div>
</div> </div>