components/doctor-layout.tsx

@@ -92,7 +92,7 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
     return (
         <div className="min-h-screen bg-gray-50 flex">
             {/* Sidebar */}
-            <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-10`}>
+            <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} h-screen flex flex-col`}>
                 <div className="p-4 border-b border-gray-200">
                     <div className="flex items-center justify-between">
                         {!sidebarCollapsed && (
@@ -109,7 +109,7 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
                     </div>
                 </div>
 
-                <nav className="flex-1 p-2 overflow-y-auto">
+                <nav className="flex-1 p-2">
                     {menuItems.map((item) => {
                         const Icon = item.icon;
                         const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
@@ -125,7 +125,7 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
                     })}
                 </nav>
 
-                <div className="border-t p-4 mt-auto">
+                <div className="border-t p-4">
                     <div className="flex items-center space-x-3 mb-4">
                         <Avatar>
                             <AvatarImage src="/placeholder.svg?height=40&width=40" />
@@ -149,7 +149,7 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
             </div>
 
             {/* Main Content */}
-            <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
+            <div className="flex-1 flex flex-col">
                 {/* Header */}
                 <header className="bg-white border-b border-gray-200 px-6 py-4">
                     <div className="flex items-center justify-between">

components/patient-layout.tsx

@@ -113,7 +113,9 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
   return (
     <div className="min-h-screen bg-gray-50 flex">
       {/* Sidebar */}
-      <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-10`}>
+      <div
+        className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} h-screen flex flex-col`}
+      >
         <div className="p-4 border-b border-gray-200">
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
@@ -130,7 +132,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
           </div>
         </div>
 
-        <nav className="flex-1 p-2 overflow-y-auto">
+        <nav className="flex-1 p-2">
           {menuItems.map((item) => {
             const Icon = item.icon
             const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
@@ -150,7 +152,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
           })}
         </nav>
 
-        <div className="border-t p-4 mt-auto">
+        <div className="border-t p-4">
           <div className="flex items-center space-x-3 mb-4">
             <Avatar>
               <AvatarImage src="/placeholder.svg?height=40&width=40" />
@@ -174,7 +176,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
       </div>
           
       {/* Main Content */}
-      <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
+      <div className="flex-1 flex flex-col">
         {/* Header */}
         <header className="bg-white border-b border-gray-200 px-6 py-4">
           <div className="flex items-center justify-between">

components/secretary-layout.tsx

@@ -98,7 +98,9 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
   return (
     <div className="min-h-screen bg-gray-50 flex">
       {/* Sidebar */}
-      <div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-10`}>
+      <div
+        className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} h-screen flex flex-col`}
+      >
         <div className="p-4 border-b border-gray-200">
           <div className="flex items-center justify-between">
             {!sidebarCollapsed && (
@@ -115,7 +117,7 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
           </div>
         </div>
 
-        <nav className="flex-1 p-2 overflow-y-auto">
+        <nav className="flex-1 p-2">
           {menuItems.map((item) => {
             const Icon = item.icon
             const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
@@ -135,7 +137,7 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
           })}
         </nav>
 
-        <div className="border-t p-4 mt-auto">
+        <div className="border-t p-4">
           <div className="flex items-center space-x-3 mb-4">
             <Avatar>
               <AvatarImage src="/placeholder.svg?height=40&width=40" />
@@ -159,7 +161,7 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
       </div>
           
       {/* Main Content */}
-      <div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
+      <div className="flex-1 flex flex-col">
         {/* Header */}
         <header className="bg-white border-b border-gray-200 px-6 py-4">
           <div className="flex items-center justify-between">