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 = () => {
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
? "bg-accent text-accent-foreground font-semibold"
: "text-foreground hover:bg-accent/50"
@ -11,24 +11,27 @@ export const Navbar = () => {
return (
<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="flex items-center justify-between">
<div className="max-w-7xl mx-auto px-4 py-3">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<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 className="flex items-center gap-2">
<div className="flex items-center gap-1 sm:gap-2 justify-center">
<NavLink to="/" end className={getNavClass}>
<Home size={18} />
<span>Home</span>
<span className="text-sm sm:text-base">Home</span>
</NavLink>
<NavLink to="/testimonies" className={getNavClass}>
<MessageSquare size={18} />
<span>Testimonies</span>
<span className="text-sm sm:text-base">Testimonies</span>
</NavLink>
<NavLink to="/contact" className={getNavClass}>
<Mail size={18} />
<span>Contact</span>
<span className="text-sm sm:text-base">Contact</span>
</NavLink>
</div>
</div>