updated the responsive view for the user dashboard and game lisitng

src/app/(dashboard)/(user)/(outsideAuth)/exclusive-games/loading.tsx

@@ -5,7 +5,7 @@ export default function Loading() {
             {Array.from({ length: 6 }).map((_, i) => (
                 <div
                     key={i}
-                    className="rounded-xl bg-gray-200 w-full h-[220px]"
+                    className="rounded-xl bg-gray-200 w-full h-[220px] aspect-square"
                 />
             ))}
         </div>

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

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

src/app/globals.css

@@ -113,7 +113,8 @@
 
 	button,
 	.ss-btn {
-		padding: 12px 24px;
+		/* padding: 12px 24px; */
+		@apply py-2 px-4 lg:px-6 lg:py-3;
 		border-radius: 27px;
 		text-align: center;
 		width: 100%;

src/components/atom/Avatar.tsx

@@ -10,7 +10,7 @@ interface Props extends MuiAvatarProps {
 
 const AvatarStyle = styled(MuiAvatar, {
     shouldForwardProp: (prop) => !['color', 'type', 'size'].includes(prop as string),
-})<Props>(({ theme, color, type, size }: { theme: Theme } & Props) => ({
+})<Props>(({ theme,  type }: { theme: Theme } & Props) => ({
     width: 40,
     height: 40,
     borderRadius: 8,

src/components/organism/Header/Profile.tsx

@@ -85,10 +85,10 @@ export default function ProfileBlock() {
 
                 }}
             >
-                <div className='hidden lg:flex items-center gap-1'>
+                <div className=' lg:flex items-center gap-1'>
                     <Avatar alt="profile user" src={avataur1} />
                     {user?.role && user.role.toLowerCase() !== "user" ? <>
-                        <div>
+                        <div className=' hidden lg:block'>
                             <strong className='text-[14px] leading-[120%] font-bold text-text-title block mb-1 text-nowrap'>{user?.name}</strong>
                             <p className='text-[12px] text-left leading-[120%] font-[500] text-para-light text-nowrap'>
                                 {user?.role || "User"}

src/components/organism/Header/UserHeader/UserCoinCard.tsx

@@ -20,7 +20,7 @@ export default function UserCoinCard() {
                     <GoldCoinIcon />
                     <div className="coins">
                         <strong className="text-[12px] leading-4 font-[600] text-[#FBA027] block">{data?.data[1]?.value || 0}</strong>
-                        <span className="text-[9px] mt-[-2px] block">Gold Coins</span>
+                        <span className="text-[9px] mt-[-2px] hidden md:block">Gold Coins</span>
                     </div>
                 </Box>
             </Box>
@@ -36,7 +36,7 @@ export default function UserCoinCard() {
                     <SilverCoinIcon />
                     <div className="coins">
                         <strong className="text-[12px] leading-4 font-[600] text-[#93E0D8] block">{data?.data[0]?.value || 0}</strong>
-                        <span className="text-[9px] mt-[-2px] block">Sweeps Coins</span>
+                        <span className="text-[9px] mt-[-2px]  hidden md:block">Sweeps Coins</span>
                     </div>
                 </Box>
             </Box >

src/components/organism/Header/UserHeader/index.tsx

@@ -14,7 +14,7 @@ import { PATH } from '@/routes/PATH'
 export default function UserHeader() {
   const isAuth = CheckAuth();
   return (
-    <Box className='flex items-center gap-4 justify-end w-full'>
+    <Box className='flex items-center gap-2 md:gap-4 justify-end w-full'>
       {/* <AdminSearchBar /> */}
 
 

src/components/organism/Sidebar/index.tsx

@@ -9,7 +9,11 @@ import Image from 'next/image';
 import AdminMenu from './AdminSidebar';
 import UserMenu from './UserSidebar';
 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 Link from 'next/link';
 const drawerWidth = DRAWER_WIDTH;
 
 const openedMixin = (theme: Theme): CSSObject => ({
@@ -79,12 +83,27 @@ export default function Sidebar({ open, handleDrawerOpen }: {
 }) {
 
     const user = useAppSelector((state) => state.auth.user);
-    // const user = { role: "USER" }
+
     return (
         <Drawer variant="permanent" open={open}>
             <DrawerHeader sx={{ justifyContent: "center" }}>
                 {/* <HambergerMenu /> */}
-                <Image src="/assets/images/logo.png" alt="Logo" width={102} height={56} />
+                <Link href="/">
+                    <Image src="/assets/images/logo.png" alt="Logo" width={102} height={56} />
+                </Link>
+                {/* <IconButton
+                    color="inherit"
+                    aria-label="open drawer"
+                    edge="start"
+                    sx={[
+                        {
+                            maxWidth: "fit-content"
+                        },
+                    ]}
+                    className='!bg-light-gray !md:hidden'
+                >
+                    <CloseCircle className='!text-para-light' />
+                </IconButton> */}
             </DrawerHeader>
 
             <Box className={`mt-8 menu__wrapper ${open ? "px-3" : ""}`} >

src/components/pages/dashboard/index.tsx

@@ -11,7 +11,7 @@ export default function Dashboard({ slides }: { slides: BannerProps[] }) {
     const [current, setCurrent] = useState(0);
 
     const handleDragEnd = (_: any, info: any) => {
-        const swipeThreshold = 100; // min distance to trigger slide change
+        const swipeThreshold = 100;
         if (info.offset.x < -swipeThreshold && current < slides.length - 1) {
             setCurrent((prev) => prev + 1);
         } else if (info.offset.x > swipeThreshold && current > 0) {
@@ -24,7 +24,7 @@ export default function Dashboard({ slides }: { slides: BannerProps[] }) {
             <AnimatePresence mode="wait">
                 <motion.div
                     key={slides[current]?.name || current}
-                    className="relative aspect-[1105/240] rounded-3xl overflow-hidden flex justify-center items-center text-center cursor-grab active:cursor-grabbing"
+                    className="relative md:aspect-[1105/240] aspect-video rounded-3xl overflow-hidden flex justify-center items-center text-center cursor-grab active:cursor-grabbing"
                     initial={{ opacity: 0, x: 100 }}
                     animate={{ opacity: 1, x: 0 }}
                     exit={{ opacity: 0, x: -100 }}
@@ -43,7 +43,7 @@ export default function Dashboard({ slides }: { slides: BannerProps[] }) {
                     <div className="content relative z-10 px-6">
                         <div className="content relative z-10 px-6 text-center">
                             {slides[current]?.name && (
-                                <h1 className="text-[48px] leading-[50%] text-[#3A013F] mb-8">
+                                <h1 className="text-[32px] md:text-[48px] leading-[50%] text-[#3A013F] mb-8">
                                     {slides[current].name}
                                 </h1>
                             )}