From 9f4993f7195e419ee2a11d69172dab9f54f5d219 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Wed, 8 Oct 2025 17:25:21 +0000
Subject: [PATCH] Improve sidebar interaction and responsiveness on smaller
 screens

Adjust header layout, button styling, and spacing in topbar.tsx for better mobile experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/pCkJ6mk
---
 client/src/components/topbar.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/components/topbar.tsx b/client/src/components/topbar.tsx
index 5a9ea25..225b0f0 100644
--- a/client/src/components/topbar.tsx
+++ b/client/src/components/topbar.tsx
@@ -8,12 +8,13 @@ interface TopBarProps {
 export default function TopBar({ onMenuClick }: TopBarProps) {
   return (
     <header className="bg-card/50 backdrop-blur-xl border-b border-border/50 sticky top-0 z-10">
-      <div className="flex items-center justify-between px-6 lg:px-8 py-5">
-        <div className="flex items-center gap-6 flex-1">
+      <div className="flex items-center justify-between px-4 sm:px-6 lg:px-8 py-4 sm:py-5">
+        <div className="flex items-center gap-3 sm:gap-6 flex-1">
           <button 
-            className="lg:hidden text-foreground hover:text-primary transition-colors"
+            className="lg:hidden text-foreground hover:text-primary transition-all hover:scale-110 active:scale-95 p-2 hover:bg-primary/10 rounded-xl"
             onClick={onMenuClick}
             data-testid="button-menu"
+            aria-label="Toggle menu"
           >
             <Menu className="w-6 h-6" />
           </button>