Improve sidebar usability and responsiveness on mobile devices

Enhance sidebar component with an `onLinkClick` prop to close the sidebar on navigation and improve mobile responsiveness across various application pages.

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

.replit

@@ -30,6 +30,10 @@ externalPort = 4200
 localPort = 40537
 externalPort = 3000
 
+[[ports]]
+localPort = 42011
+externalPort = 5000
+
 [[ports]]
 localPort = 43245
 externalPort = 3001

client/src/components/sidebar.tsx

@@ -7,7 +7,11 @@ import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { useState, useEffect } from "react";
 
-export default function Sidebar() {
+interface SidebarProps {
+  onLinkClick?: () => void;
+}
+
+export default function Sidebar({ onLinkClick }: SidebarProps = {}) {
   const [location] = useLocation();
   const [, setLocation] = useLocation();
   const { toast } = useToast();
@@ -27,6 +31,12 @@ export default function Sidebar() {
 
   const isAdmin = session?.role === "admin";
 
+  const handleLinkClick = () => {
+    if (onLinkClick) {
+      onLinkClick();
+    }
+  };
+
   const logoutMutation = useMutation({
     mutationFn: async () => {
       const res = await apiRequest("POST", "/api/auth/logout", {});
@@ -84,6 +94,7 @@ export default function Sidebar() {
               <li key={item.href} className="relative group">
                 <Link 
                   href={item.href}
+                  onClick={handleLinkClick}
                   className={`
                     flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all relative
                     ${isActive 
@@ -133,6 +144,7 @@ export default function Sidebar() {
                 <li key={item.href} className="relative group">
                   <Link 
                     href={item.href}
+                    onClick={handleLinkClick}
                     className={`
                       flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
                       ${isActive 
@@ -172,6 +184,7 @@ export default function Sidebar() {
             )}
             <Link 
               href="/pages"
+              onClick={handleLinkClick}
               className={`
                 flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
                 ${location === "/pages"
@@ -195,6 +208,7 @@ export default function Sidebar() {
             </Link>
             <Link 
               href="/users"
+              onClick={handleLinkClick}
               className={`
                 flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
                 ${location === "/users"
@@ -218,6 +232,7 @@ export default function Sidebar() {
             </Link>
             <Link 
               href="/sql"
+              onClick={handleLinkClick}
               className={`
                 flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
                 ${location === "/sql"
@@ -241,6 +256,7 @@ export default function Sidebar() {
             </Link>
             <Link 
               href="/settings"
+              onClick={handleLinkClick}
               className={`
                 flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
                 ${location === "/settings"

client/src/pages/ai.tsx

@@ -19,7 +19,7 @@ export default function AI() {
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
       `}>
-        <Sidebar />
+        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
       </div>
 
       <main className="flex-1 overflow-y-auto">

client/src/pages/calendar.tsx

@@ -19,7 +19,7 @@ export default function Calendar() {
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
       `}>
-        <Sidebar />
+        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
       </div>
 
       <main className="flex-1 overflow-y-auto">

client/src/pages/dashboard.tsx

@@ -21,7 +21,7 @@ export default function Dashboard() {
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
       `}>
-        <Sidebar />
+        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
       </div>
 
       <main className="flex-1 overflow-y-auto">

client/src/pages/history.tsx

@@ -31,7 +31,7 @@ export default function History() {
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
       `}>
-        <Sidebar />
+        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
       </div>
 
       <main className="flex-1 overflow-y-auto">

client/src/pages/media.tsx

@@ -19,7 +19,7 @@ export default function Media() {
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
       `}>
-        <Sidebar />
+        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
       </div>
 
       <main className="flex-1 overflow-y-auto">

client/src/pages/new-post.tsx

@@ -202,7 +202,7 @@ export default function NewPost() {
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
       `}>
-        <Sidebar />
+        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
       </div>
 
       <main className="flex-1 overflow-y-auto">

client/src/pages/pages.tsx

@@ -55,7 +55,7 @@ export default function PagesManagement() {
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
       `}>
-        <Sidebar />
+        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
       </div>
 
       <main className="flex-1 overflow-y-auto">

client/src/pages/settings.tsx

@@ -132,7 +132,7 @@ export default function Settings() {
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
       `}>
-        <Sidebar />
+        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
       </div>
 
       <main className="flex-1 overflow-y-auto">

client/src/pages/sql.tsx

@@ -87,7 +87,7 @@ export default function SqlAdmin() {
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
       `}>
-        <Sidebar />
+        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
       </div>
 
       <main className="flex-1 overflow-y-auto">

client/src/pages/users-admin.tsx

@@ -290,7 +290,7 @@ export default function UsersAdmin() {
         fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
       `}>
-        <Sidebar />
+        <Sidebar onLinkClick={() => setSidebarOpen(false)} />
       </div>
 
       <main className="flex-1 overflow-y-auto">