updates

Frontend/src/components/layout/SidebarStaff.tsx

@@ -13,10 +13,12 @@ import {
   CreditCard,
   MessageCircle,
   Award,
-  Users
+  Users,
+  Wrench
 } from 'lucide-react';
 import useAuthStore from '../../store/useAuthStore';
 import { useChatNotifications } from '../../contexts/ChatNotificationContext';
+import { useResponsive } from '../../hooks';
 
 interface SidebarStaffProps {
   isCollapsed?: boolean;
@@ -28,12 +30,12 @@ const SidebarStaff: React.FC<SidebarStaffProps> = ({
   onToggle 
 }) => {
   const [internalCollapsed, setInternalCollapsed] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
   const [isMobileOpen, setIsMobileOpen] = useState(false);
   const location = useLocation();
   const navigate = useNavigate();
   const { logout } = useAuthStore();
   const { unreadCount } = useChatNotifications();
+  const { isMobile, isTablet, isDesktop } = useResponsive();
   
   const handleLogout = async () => {
     try {
@@ -47,19 +49,12 @@ const SidebarStaff: React.FC<SidebarStaffProps> = ({
     }
   };
   
-  
+  // Close mobile menu when screen becomes desktop
   useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < 1024); 
-      if (window.innerWidth >= 1024) {
-        setIsMobileOpen(false);
-      }
-    };
-    
-    checkMobile();
-    window.addEventListener('resize', checkMobile);
-    return () => window.removeEventListener('resize', checkMobile);
-  }, []);
+    if (isDesktop) {
+      setIsMobileOpen(false);
+    }
+  }, [isDesktop]);
   
   const isCollapsed = 
     controlledCollapsed !== undefined 
@@ -116,6 +111,11 @@ const SidebarStaff: React.FC<SidebarStaffProps> = ({
       icon: Users, 
       label: 'Guest Profiles' 
     },
+    { 
+      path: '/staff/advanced-rooms', 
+      icon: Wrench, 
+      label: 'Room Management' 
+    },
     { 
       path: '/staff/chats', 
       icon: MessageCircle,