updated the mobile menu responsive

src/app/(dashboard)/(user)/(outsideAuth)/page.tsx

@@ -79,7 +79,7 @@ export default async function Home() {
                 className="col-span-1 "
               >
                 <div
-                  className="flex items-center gap-3 py-2 px-6"
+                  className="flex items-center gap-3 py-2 px-6 glass"
                   style={{
                     borderRadius: "24px",
                     background: "rgba(255, 255, 255, 0.10)",
@@ -128,11 +128,11 @@ export default async function Home() {
         {subBannersError ? (
           <p></p>
         ) : subBanners?.data?.length ? (
-          <div className="dashboard-card-wrapper flex flex-col md:grid md:grid-cols-2 gap-5 justify-center">
+          <div className="dashboard-card-wrapper flex flex-col lg:grid md:grid-cols-2 gap-5 justify-center">
             {subBanners.data.map((subBanner, index) => (
               <div
                 key={subBanner.name || index}
-                className="dashboard-card1 col-span-1 flex justify-between px-10 gap-2 rounded-[24px]"
+                className="dashboard-card1 col-span-1 flex justify-between px-10 gap-2 rounded-[24px] glass"
                 style={{
                   background:
                     index % 2 === 0

src/app/globals.css

@@ -376,4 +376,13 @@
 
 .active__menu * {
 	color: var(--color-primary);
+}
+
+.glass {
+	background: rgba(255, 255, 255, 0.15);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+	border-radius: 12px;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 }
\ No newline at end of file

src/components/layouts/DashboardLayout.tsx

@@ -10,11 +10,15 @@ import Breadcrumb from '../molecules/Breadcrumb';
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
     const [open, setOpen] = React.useState(true);
+    const [openMobile, setOpenMobile] = React.useState(false);
 
     const handleDrawerOpen = () => {
         setOpen((prev) => !prev);
     };
 
+    const handleMobileMenuToggle = () => {
+        setOpenMobile((prev) => !prev);
+    }
     const handleDrawerClose = () => {
         setOpen(false);
     };
@@ -31,8 +35,10 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
     return (
         <Box sx={{ display: 'flex' }}>
-            <Header open={open} handleDrawerOpen={handleDrawerOpen} />
-            <Sidebar open={open} handleDrawerOpen={handleDrawerOpen} />
+            <Header open={open} handleDrawerOpen={handleDrawerOpen} handleMobileMenuToggle={handleMobileMenuToggle} />
+            <Sidebar open={open} handleDrawerOpen={handleDrawerOpen} handleMobileMenuToggle={handleMobileMenuToggle} mobileMenuOpen={openMobile
+
+            } />
             <div className="root_container w-full overflow-hidden">
                 <DrawerHeader />
                 <div className="content_box p-4 lg:pl-11 lg:pr-12 lg:py-8">

src/components/organism/Header/index.tsx

@@ -8,49 +8,91 @@ import React from 'react'
 import { HambergerMenu } from '@wandersonalwes/iconsax-react';
 import AdminHeader from './AdminHeader';
 import UserHeader from './UserHeader';
-import { OutlinedInput } from '@mui/material';
+import { OutlinedInput, useMediaQuery } from '@mui/material';
 import { useAppSelector } from '@/hooks/hook';
 
 
 interface AppBarProps extends MuiAppBarProps {
     open?: boolean;
+    downLG?: boolean;
 }
+// const AppBar = styled(MuiAppBar, {
+
+//     shouldForwardProp: (prop) => prop !== 'open',
+// })<AppBarProps>(({ theme }) => ({
+//     zIndex: theme.zIndex.drawer + 1,
+//     transition: theme.transitions.create(['width', 'margin'], {
+//         easing: theme.transitions.easing.sharp,
+//         duration: theme.transitions.duration.leavingScreen,
+//     }),
+//     backgroundColor: theme.palette.background.paper,
+//     boxShadow: "none",
+//     variants: [
+//         {
+//             props: ({ open }) => open,
+//             style: {
+//                 marginLeft: DRAWER_WIDTH,
+//                 width: `calc(100% - ${DRAWER_WIDTH}px)`,
+//                 transition: theme.transitions.create(['width', 'margin'], {
+//                     easing: theme.transitions.easing.sharp,
+//                     duration: theme.transitions.duration.enteringScreen,
+//                 }),
+
+//             },
+//         },
+//     ],
+// }));
+
 const AppBar = styled(MuiAppBar, {
-    shouldForwardProp: (prop) => prop !== 'open',
-})<AppBarProps>(({ theme }) => ({
+    shouldForwardProp: (prop) => prop !== 'open' && prop !== 'downLG',
+})<AppBarProps>(({ theme, open, downLG }) => ({
     zIndex: theme.zIndex.drawer + 1,
     transition: theme.transitions.create(['width', 'margin'], {
         easing: theme.transitions.easing.sharp,
         duration: theme.transitions.duration.leavingScreen,
     }),
     backgroundColor: theme.palette.background.paper,
-    boxShadow: "none",
-    variants: [
-        {
-            props: ({ open }) => open,
-            style: {
-                marginLeft: DRAWER_WIDTH,
-                width: `calc(100% - ${DRAWER_WIDTH}px)`,
-                transition: theme.transitions.create(['width', 'margin'], {
-                    easing: theme.transitions.easing.sharp,
-                    duration: theme.transitions.duration.enteringScreen,
-                }),
-
-            },
-        },
-    ],
+    boxShadow: 'none',
+    ...(open &&
+        !downLG && {
+        marginLeft: DRAWER_WIDTH,
+        width: `calc(100% - ${DRAWER_WIDTH}px)`,
+        transition: theme.transitions.create(['width', 'margin'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    }),
+    ...(downLG && {
+        width: '100%',
+        marginLeft: 0,
+    }),
 }));
-export default function Header({ open, handleDrawerOpen }: {
+export default function Header({ open, handleDrawerOpen, handleMobileMenuToggle }: {
     open: boolean,
     handleDrawerOpen: () => void;
+    handleMobileMenuToggle: () => void;
 }) {
 
     const user = useAppSelector((state) => state.auth.user);
+    const downLG = useMediaQuery((theme) => theme.breakpoints.down('lg'));
     return (
-        <AppBar position="fixed" open={open}>
+        <AppBar position="fixed" open={open} downLG={downLG}>
             <Toolbar sx={{ gap: "16px" }}>
 
-                <IconButton
+                {downLG ? <IconButton
+                    color="inherit"
+                    aria-label="open drawer"
+                    onClick={handleMobileMenuToggle}
+                    edge="start"
+                    sx={[
+                        {
+                            maxWidth: "fit-content"
+                        },
+                    ]}
+                    className='!bg-light-gray'
+                >
+                    <HambergerMenu className='!text-para-light' />
+                </IconButton> : <IconButton
                     color="inherit"
                     aria-label="open drawer"
                     onClick={handleDrawerOpen}
@@ -63,7 +105,7 @@ export default function Header({ open, handleDrawerOpen }: {
                     className='!bg-light-gray'
                 >
                     <HambergerMenu className='!text-para-light' />
-                </IconButton>
+                </IconButton>}
                 {
                     user?.role && user.role.toUpperCase() === 'ADMIN' ? (
                         <AdminHeader />

src/components/organism/Sidebar/index.tsx

@@ -12,7 +12,7 @@ import { useAppSelector } from '@/hooks/hook';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useThemeContext } from '@/context/ThemeContext';
 import { IconButton } from '@mui/material';
-import { CloseCircle } from '@wandersonalwes/iconsax-react';
+import { Add, CloseCircle } from '@wandersonalwes/iconsax-react';
 import Link from 'next/link';
 const drawerWidth = DRAWER_WIDTH;
 
@@ -47,9 +47,12 @@ const DrawerHeader = styled('div')(({ theme }) => ({
 }));
 
 
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
-    ({ theme }) => ({
-        width: drawerWidth,
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' && prop !== 'downLG' })<{
+    open?: boolean;
+    downLG?: boolean;
+}>(
+    ({ theme, downLG }) => ({
+        width: downLG ? '100%' : drawerWidth,
         flexShrink: 0,
         whiteSpace: 'nowrap',
         boxSizing: 'border-box',
@@ -77,15 +80,64 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open'
     }),
 );
 
-export default function Sidebar({ open, handleDrawerOpen }: {
+export default function Sidebar({ open, handleDrawerOpen, handleMobileMenuToggle, mobileMenuOpen }: {
     open: boolean,
     handleDrawerOpen: () => void;
+    handleMobileMenuToggle: () => void;
+    mobileMenuOpen: boolean;
 }) {
-
+    const ref = React.useRef<HTMLDivElement>(null);
     const user = useAppSelector((state) => state.auth.user);
+    const downLG = useMediaQuery((theme) => theme.breakpoints.down('lg'));
+
+    React.useEffect(() => {
+        function handleClickOutside(event: MouseEvent) {
+            if (ref.current && !ref.current.contains(event.target as Node) && mobileMenuOpen) {
+                handleMobileMenuToggle();
+            }
+        }
 
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [ref, mobileMenuOpen, handleMobileMenuToggle]);
+    if (downLG) {
+        return <div className={`mobile__menu__wrapper fixed left-0 top-0 bottom-0 max-h-screen overflow-auto backdrop-blur-2xl bg-[#290139CF] w-full  z-[9999]  transition-all duration-300 ${mobileMenuOpen ? "opacity-100 visible" : "opacity-0 invisible"}`} >
+            <div className={`mobile__primary__menu max-w-[600px] bg-[#11011E] w-full h-screen overflow-auto transition-all duration-300 ${mobileMenuOpen ? "opacity-100 visible translate-x-0" : "opacity-0 invisible translate-x-[-100%]"}`} ref={ref}>
+                <div className="flex justify-between items-center p-4 ">
+                    <Link href="/">
+                        <Image src="/assets/images/logo.png" alt="Logo" width={102} height={56} />
+                    </Link>
+                    <IconButton
+                        color="inherit"
+                        aria-label="open drawer"
+                        edge="start"
+                        onClick={handleMobileMenuToggle}
+                        sx={[
+                            {
+                                maxWidth: "fit-content"
+                            },
+                        ]}
+                        className='!bg-light-gray !md:hidden'
+                    >
+                        <Add className='!text-para-light rotate-45' />
+                    </IconButton>
+                </div>
+                <Box className={`mt-8 menu__wrapper ${open ? "px-3" : ""}`} >
+                    {
+                        user?.role && user.role.toUpperCase() === 'ADMIN' ? (
+                            <AdminMenu open={open} />
+                        ) : (
+                            <UserMenu open={open} />
+                        )
+                    }
+                </Box>
+            </div>
+        </div>
+    }
     return (
-        <Drawer variant="permanent" open={open}>
+        <Drawer variant="permanent" open={open} downLG={downLG}>
             <DrawerHeader sx={{ justifyContent: "center" }}>
                 {/* <HambergerMenu /> */}
                 <Link href="/">

src/components/pages/dashboard/UspSlider.tsx

@@ -53,7 +53,7 @@ export default function UspSlider({ uspData }: { uspData: { title: string; descr
                     {items.map((item, index) => (
                         <motion.div
                             key={index}
-                            className="flex-shrink-0 w-[220px] md:w-[260px] lg:w-[280px] py-4 px-5 flex items-center gap-3 rounded-2xl"
+                            className="flex-shrink-0 w-[220px] md:w-[260px] lg:w-[280px] py-4 px-5 flex items-center gap-3 rounded-2xl glass"
                             style={{
                                 background: "rgba(255, 255, 255, 0.15)",
                                 backdropFilter: "blur(8px)",

src/theme/palette.ts

@@ -310,6 +310,15 @@ export default function Palette(mode: ThemeMode) {
         typography: {
             fontFamily: "Inter, sans-serif",
         },
+        breakpoints: {
+            values: {
+                xs: 0,
+                sm: 768,
+                md: 1024,
+                lg: 1266,
+                xl: 1440
+            }
+        },
     });
 
     // Step 2️⃣ — extend with component overrides using baseTheme.breakpoints