working on some code

frontend/src/components/Layout.tsx

@@ -10,7 +10,8 @@ import {
   Settings, 
   Bell, 
   Server,
-  Users
+  Users,
+  Archive
 } from 'lucide-react'
 import { useState, useEffect } from 'react'
 
@@ -44,14 +45,15 @@ export default function Layout() {
     { name: 'Dashboard', href: '/', icon: LayoutDashboard },
     { name: 'Storage', href: '/storage', icon: HardDrive },
     { name: 'Tape Libraries', href: '/tape', icon: Database },
-    { name: 'iSCSI Targets', href: '/iscsi', icon: Network },
+    { name: 'iSCSI Management', href: '/iscsi', icon: Network },
+    { name: 'Backup Management', href: '/backup', icon: Archive },
     { name: 'Tasks', href: '/tasks', icon: Settings },
     { name: 'Alerts', href: '/alerts', icon: Bell },
     { name: 'System', href: '/system', icon: Server },
   ]
 
   if (user?.roles.includes('admin')) {
-    navigation.push({ name: 'IAM', href: '/iam', icon: Users })
+    navigation.push({ name: 'User Management', href: '/iam', icon: Users })
   }
 
   const isActive = (href: string) => {
@@ -62,7 +64,7 @@ export default function Layout() {
   }
 
   return (
-    <div className="min-h-screen bg-background-dark">
+    <div className="h-screen bg-background-dark flex overflow-hidden">
       {/* Mobile backdrop overlay */}
       {sidebarOpen && (
         <div
@@ -135,12 +137,15 @@ export default function Layout() {
 
           {/* Footer */}
           <div className="p-4 border-t border-border-dark bg-[#0d1419]">
-            <div className="mb-3 px-2">
+            <Link
+              to="/profile"
+              className="mb-3 px-2 py-2 rounded-lg hover:bg-card-dark transition-colors block"
+            >
               <p className="text-sm font-semibold text-white mb-0.5">{user?.username}</p>
               <p className="text-xs text-text-secondary font-mono">
                 {user?.roles.join(', ').toUpperCase()}
               </p>
-            </div>
+            </Link>
             <button
               onClick={handleLogout}
               className="w-full flex items-center gap-2 px-4 py-2.5 rounded-lg text-text-secondary hover:bg-card-dark hover:text-white transition-colors border border-border-dark"
@@ -153,9 +158,9 @@ export default function Layout() {
       </div>
 
       {/* Main content */}
-      <div className={`transition-all duration-300 ${sidebarOpen ? 'lg:ml-64' : 'ml-0'} bg-background-dark`}>
+      <div className={`transition-all duration-300 flex-1 flex flex-col overflow-hidden ${sidebarOpen ? 'lg:ml-64' : 'ml-0'} bg-background-dark`}>
         {/* Top bar with burger menu button */}
-        <div className="sticky top-0 z-30 lg:hidden bg-background-dark border-b border-border-dark px-4 py-3">
+        <div className="flex-none lg:hidden bg-background-dark border-b border-border-dark px-4 py-3">
           <button
             onClick={() => setSidebarOpen(true)}
             className="text-text-secondary hover:text-white transition-colors"
@@ -166,7 +171,7 @@ export default function Layout() {
         </div>
         
         {/* Page content */}
-        <main className="min-h-screen">
+        <main className="flex-1 overflow-hidden">
           <Outlet />
         </main>
       </div>