From 780acca33a1b887b10d9482834a54318f0756373 Mon Sep 17 00:00:00 2001
From: Shruti78 <shrutimurthy2103@gmail.com>
Date: Mon, 10 Feb 2025 20:09:15 +0530
Subject: [PATCH] fixed drawer shifting issue

Signed-off-by: Shruti78 <shrutimurthy2103@gmail.com>

fixed logo fix  issue

Signed-off-by: Shruti78 <shrutimurthy2103@gmail.com>

Save changes to Queues.jsx
---
 frontend/src/components/Layout.jsx | 132 +++++++++++++++--------------
 frontend/src/components/Queues.jsx |   4 +-
 2 files changed, 70 insertions(+), 66 deletions(-)

diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx
index 43d3770..4fba891 100644
--- a/frontend/src/components/Layout.jsx
+++ b/frontend/src/components/Layout.jsx
@@ -1,5 +1,5 @@
-import React, {useState} from "react";
-import {Link, Outlet, useLocation} from "react-router-dom";
+import React, { useState } from "react";
+import { Link, Outlet, useLocation } from "react-router-dom";
 import {
     AppBar,
     Box,
@@ -11,24 +11,23 @@ import {
     ListItemText,
     Toolbar,
     Typography,
+    Backdrop,
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
-import CloudIcon from '@mui/icons-material/Cloud';
-import HomeIcon from '@mui/icons-material/Home';
-import AssignmentIcon from '@mui/icons-material/Assignment';
-import WorkspacesIcon from '@mui/icons-material/Workspaces';
+import CloudIcon from "@mui/icons-material/Cloud";
+import HomeIcon from "@mui/icons-material/Home";
+import AssignmentIcon from "@mui/icons-material/Assignment";
+import WorkspacesIcon from "@mui/icons-material/Workspaces";
 
-// use relative path to load Logo
-import volcanoLogo from '../assets/volcano-icon-color.svg';
+// Logo import
+import volcanoLogo from "../assets/volcano-icon-color.svg";
 
 const Layout = () => {
-    // Hooks must be used inside component functions
     const location = useLocation();
-    const [open, setOpen] = useState(true);
+    const [open, setOpen] = useState(false); // Set default to false for overlay effect
 
-    // constants can be kept outside the component
-    const volcanoOrange = "#E34C26"; // orange red theme
-    const headerGrey = "#424242"; // dark gray top stripe
+    const volcanoOrange = "#E34C26";
+    const headerGrey = "#424242";
     const drawerWidth = 240;
 
     const handleDrawerToggle = () => {
@@ -36,14 +35,15 @@ const Layout = () => {
     };
 
     const menuItems = [
-        {text: "Dashboard", icon: <HomeIcon/>, path: "/dashboard"},
-        {text: "Jobs", icon: <AssignmentIcon/>, path: "/jobs"},
-        {text: "Queues", icon: <CloudIcon/>, path: "/queues"},
-        {text: "Pods", icon: <WorkspacesIcon/>, path: "/pods"},
+        { text: "Dashboard", icon: <HomeIcon />, path: "/dashboard" },
+        { text: "Jobs", icon: <AssignmentIcon />, path: "/jobs" },
+        { text: "Queues", icon: <CloudIcon />, path: "/queues" },
+        { text: "Pods", icon: <WorkspacesIcon />, path: "/pods" },
     ];
 
     return (
-        <Box sx={{display: "flex"}}>
+        <Box sx={{ display: "flex" }}>
+            {/* Top Navigation Bar */}
             <AppBar
                 position="fixed"
                 sx={{
@@ -57,42 +57,42 @@ const Layout = () => {
                         aria-label="toggle drawer"
                         onClick={handleDrawerToggle}
                         edge="start"
-                        sx={{mr: 2, color: "white"}}
+                        sx={{ mr: 2, color: "white" }}
                     >
-                        <MenuIcon/>
+                        <MenuIcon />
                     </IconButton>
                     <Typography
                         variant="h6"
                         noWrap
                         component="div"
-                        sx={{
-                            color: "#ffffff",
-                            fontWeight: 500,
-                        }}
+                        sx={{ color: "#ffffff", fontWeight: 500 }}
                     >
                         Volcano Dashboard
                     </Typography>
                 </Toolbar>
             </AppBar>
 
+            {/* Drawer (Overlay Style) */}
             <Drawer
-                variant="permanent"
+                variant="temporary"
+                open={open}
+                onClose={handleDrawerToggle}
+                ModalProps={{
+                    keepMounted: true, // Improves performance on mobile
+                }}
                 sx={{
-                    width: open ? drawerWidth : 60,
-                    flexShrink: 0,
-                    [`& .MuiDrawer-paper`]: {
-                        width: open ? drawerWidth : 60,
+                    "& .MuiDrawer-paper": {
+                        width: drawerWidth,
                         boxSizing: "border-box",
                         backgroundColor: "#f5f5f5",
-                        transition: "width 0.2s",
-                        overflowX: "hidden",
-                        display: "flex",
-                        flexDirection: "column",
+                        position: "fixed",
+                        height: "100vh",
+                        transition: "width 0.2s ease-in-out",
                     },
                 }}
             >
-                <Toolbar/>
-                <Box sx={{overflow: "auto", flexGrow: 1}}>
+                <Toolbar />
+                <Box sx={{ overflow: "auto", flexGrow: 1 }}>
                     <List>
                         {menuItems.map((item) => (
                             <ListItem
@@ -115,12 +115,13 @@ const Layout = () => {
                                 }}
                             >
                                 <ListItemIcon>{item.icon}</ListItemIcon>
-                                {open && <ListItemText primary={item.text}/>}
+                                <ListItemText primary={item.text} />
                             </ListItem>
                         ))}
                     </List>
                 </Box>
-                {/* Logo and text part */}
+
+                {/* Logo Section */}
                 <Box
                     sx={{
                         p: 1,
@@ -130,40 +131,43 @@ const Layout = () => {
                         alignItems: "center",
                         mt: "auto",
                         mb: 1,
-                        // borderTop: "1px solid rgba(0, 0, 0, 0.12)",
                     }}
                 >
-                    <img
-                        src={volcanoLogo}
-                        alt="Volcano Logo"
-                        style={{
-                            maxWidth: open ? "115%" : "60px",
-                            height: "auto",
-                            transition: "max-width 0.2s",
-                            marginBottom: "1px",
-                        }}
-                    />
-                    {/* {open && (
-            <Typography
-              sx={{
-                fontWeight: 700,
-                color: "#000",
-                fontSize: "1.4rem",
-                letterSpacing: "0.1em",
-                mt: -6,
-              }}
-            >
-              VOLCANO
-            </Typography>
-          )} */}
+<img
+    src={volcanoLogo}
+    alt="Volcano Logo"
+    style={{
+        maxWidth: "115%",
+        height: "auto",
+        marginBottom: "1px",
+        '@media (min-width: 600px)': {
+            display: "block",
+        },
+    }}
+/>
                 </Box>
             </Drawer>
+
+            {/* Backdrop (Dim screen when drawer is open) */}
+            {open && (
+                <Backdrop
+                    open={open}
+                    onClick={handleDrawerToggle}
+                    sx={{ zIndex: (theme) => theme.zIndex.drawer - 1, backgroundColor: "rgba(0,0,0,0.4)" }}
+                />
+            )}
+
+            {/* Main Content */}
             <Box
                 component="main"
-                sx={{flexGrow: 1, p: 3, backgroundColor: "white"}}
+                sx={{
+                    flexGrow: 1,
+                    p: 3,
+                    backgroundColor: "white",
+                }}
             >
-                <Toolbar/>
-                <Outlet/>
+                <Toolbar />
+                <Outlet />
             </Box>
         </Box>
     );
diff --git a/frontend/src/components/Queues.jsx b/frontend/src/components/Queues.jsx
index e38c4cc..9f4a547 100644
--- a/frontend/src/components/Queues.jsx
+++ b/frontend/src/components/Queues.jsx
@@ -371,7 +371,7 @@ const Queues = () => {
                         </TableRow>
                     </TableHead>
                     <TableBody>
-                        {sortedQueues
+                    {sortedQueues
                             .map((queue) => (
                                 <TableRow
                                     hover
@@ -407,7 +407,7 @@ const Queues = () => {
                                     </TableCell>
                                 </TableRow>
                             ))}
-                    < /TableBody>
+                        </TableBody>
                 </Table>
             </TableContainer>
             <Box