Skip to content

S
sweepstake
Commit 27f95c58 by Arjun Jhukal
Options

updated the mobile menu responsive

parent 4d1f9c82
Showing with 148 additions and 29 deletions
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
......@@ -377,3 +377,12 @@
.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: {
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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment