Skip to content

S
sweepstake
Commit 25066b6c by Arjun Jhukal
Options

updated the logo isseu

parent 616f54b4
Showing with 87 additions and 95 deletions
src/components/organism/Sidebar/AdminSidebar/index.tsx
...@@ -123,7 +123,7 @@ export default function AdminMenu({ open }: { open: boolean }) { ...@@ -123,7 +123,7 @@ export default function AdminMenu({ open }: { open: boolean }) {
return ( return (
<List ref={menuListRef} <List ref={menuListRef}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
style={{ position: 'relative' }} > style={{ position: 'relative' }} className={` ${open ? "px-3" : ""}`} >
<div <div
style={{ style={{
position: "absolute", position: "absolute",
......
src/components/organism/Sidebar/UserSidebar/index.tsx
...@@ -78,93 +78,98 @@ export default function UserMenu({ open }: { open: boolean }) { ...@@ -78,93 +78,98 @@ export default function UserMenu({ open }: { open: boolean }) {
}; };
return ( return (
<Box> <>
{/* Buy Coins & Withdraw */} <Box sx={{
{open && ( maxHeight: "calc(100vh - 210px)",
<Private> overflowY: "auto",
<div className="flex justify-between items-center gap-1 mb-6"> }} className={` ${open ? "px-3" : ""}`}>
<Link href="/buy-coins" className="ss-btn bg-primary-grad flex items-center gap-2 text-[12px]"> {/* Buy Coins & Withdraw */}
<Coin size={24} /> {open && (
Buy Coins <Private>
</Link> <div className="flex justify-between items-center gap-1 mb-6">
<Link href="/withdrawl" className="ss-btn bg-secondary-grad flex items-center gap-2 text-[12px]"> <Link href="/buy-coins" className="ss-btn bg-primary-grad flex items-center gap-2 text-[12px]">
<CardPos size={24} /> <Coin size={24} />
Withdraw Buy Coins
</Link> </Link>
</div> <Link href="/withdrawl" className="ss-btn bg-secondary-grad flex items-center gap-2 text-[12px]">
</Private> <CardPos size={24} />
)} Withdraw
</Link>
</div>
</Private>
)}
<div className="flex flex-col gap-16 lg:gap-28"> <div className="flex flex-col gap-16 lg:gap-28">
<List <List
ref={menuListRef} ref={menuListRef}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
style={{ position: "relative" }} style={{ position: "relative" }}
> >
{/* ✨ Glass Morphism Layer */} {/* ✨ Glass Morphism Layer */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
left: "0", left: "0",
right: "0", right: "0",
top: `${glassStyle.top}px`, top: `${glassStyle.top}px`,
height: `${glassStyle.height}px`, height: `${glassStyle.height}px`,
background: "rgba(255, 255, 255, 0.15)", background: "rgba(255, 255, 255, 0.15)",
backdropFilter: "blur(12px)", backdropFilter: "blur(12px)",
WebkitBackdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
border: "1px solid rgba(255, 255, 255, 0.25)", border: "1px solid rgba(255, 255, 255, 0.25)",
borderRadius: "38px", borderRadius: "38px",
boxShadow: ` boxShadow: `
0 8px 32px 0 rgba(0, 0, 0, 0.37), 0 8px 32px 0 rgba(0, 0, 0, 0.37),
inset 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(255, 255, 255, 0.1) 0 0 20px rgba(255, 255, 255, 0.1)
`, `,
transition: "all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)", transition: "all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)",
pointerEvents: "none", pointerEvents: "none",
zIndex: 1, zIndex: 1,
opacity: glassStyle.opacity, opacity: glassStyle.opacity,
transform: transform:
glassStyle.opacity === 1 glassStyle.opacity === 1
? "translateY(0) scale(1)" ? "translateY(0) scale(1)"
: "translateY(0) scale(0.95)", : "translateY(0) scale(0.95)",
}} }}
/> />
{/* 🧩 Loop Static Menus */} {/* 🧩 Loop Static Menus */}
{staticMenus.map((menu) => { {staticMenus.map((menu) => {
const isActive = menu.match(pathname); const isActive = menu.match(pathname);
const menuItem = ( const menuItem = (
<ListItem <ListItem
key={menu.name} key={menu.name}
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
style={{ position: "relative", zIndex: 2, padding: 0 }} style={{ position: "relative", zIndex: 2, padding: 0 }}
>
<Link
href={menu.path}
className={`flex gap-2 items-center px-4 py-2 transition-all rounded-[38px] ${[open ? "expanded" : "collapsed", isActive ? "active__menu" : ""].join(" ")
}`}
> >
<ListItemIcon>{menu.icon}</ListItemIcon> <Link
<ListItemText href={menu.path}
primary={menu.name} className={`flex gap-2 items-center px-4 py-2 transition-all rounded-[38px] ${[open ? "expanded" : "collapsed", isActive ? "active__menu" : ""].join(" ")
className={open ? "expanded" : "collapsed"} }`}
/> >
</Link> <ListItemIcon>{menu.icon}</ListItemIcon>
</ListItem> <ListItemText
); primary={menu.name}
className={open ? "expanded" : "collapsed"}
/>
</Link>
</ListItem>
);
// Wrap with <Private> only if requireAuth is true // Wrap with <Private> only if requireAuth is true
return menu.requireAuth ? <Private key={menu.name}>{menuItem}</Private> : menuItem; return menu.requireAuth ? <Private key={menu.name}>{menuItem}</Private> : menuItem;
})} })}
</List> </List>
{/* 🌐 Dynamic Menus */} {/* 🌐 Dynamic Menus */}
<PrimaryMenu open={open} /> <PrimaryMenu open={open} />
</div> </div>
</Box>
{/* 💬 Support Section */} {/* 💬 Support Section */}
<div className="support mt-4"> <div className={`support mt-4 ${open ? "px-3" : ""}`}>
<Link <Link
href={"/support"} href={"/support"}
className="ss-btn support__btn flex items-center gap-2 w-full justify-start" className="ss-btn support__btn flex items-center gap-2 w-full justify-start"
...@@ -183,6 +188,6 @@ export default function UserMenu({ open }: { open: boolean }) { ...@@ -183,6 +188,6 @@ export default function UserMenu({ open }: { open: boolean }) {
</div> </div>
) : null} ) : null}
</div> </div>
</Box> </>
); );
} }
src/components/organism/Sidebar/index.tsx
...@@ -126,8 +126,8 @@ export default function Sidebar({ open, handleDrawerOpen, handleMobileMenuToggle ...@@ -126,8 +126,8 @@ export default function Sidebar({ open, handleDrawerOpen, handleMobileMenuToggle
const { data } = useGetSeoDataQuery(); const { data } = useGetSeoDataQuery();
if (downLG) { 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"}`} > return <div className={`mobile__menu__wrapper fixed left-0 top-0 bottom-0 max-h-screen 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] w-full h-screen overflow-auto transition-all duration-300 ${mobileMenuOpen ? "opacity-100 visible translate-x-0" : "opacity-0 invisible translate-x-[-100%]"} ${user?.role && user.role.toUpperCase() === 'ADMIN' ? "bg-white" : "bg-[#11011E]"}`} ref={ref}> <div className={`mobile__primary__menu max-w-[600px] w-full h-screen transition-all duration-300 ${mobileMenuOpen ? "opacity-100 visible translate-x-0" : "opacity-0 invisible translate-x-[-100%]"} ${user?.role && user.role.toUpperCase() === 'ADMIN' ? "bg-white" : "bg-[#11011E]"}`} ref={ref}>
<div className="flex justify-between items-center p-4 "> <div className="flex justify-between items-center p-4 ">
<Link href="/"> <Link href="/">
<Image src={data?.data?.logo || ""} alt="Logo" width={102} height={56} /> <Image src={data?.data?.logo || ""} alt="Logo" width={102} height={56} />
...@@ -147,7 +147,7 @@ export default function Sidebar({ open, handleDrawerOpen, handleMobileMenuToggle ...@@ -147,7 +147,7 @@ export default function Sidebar({ open, handleDrawerOpen, handleMobileMenuToggle
<Add className='!text-para-light rotate-45' /> <Add className='!text-para-light rotate-45' />
</IconButton> </IconButton>
</div> </div>
<Box className={`mt-8 menu__wrapper ${open ? "px-3" : ""}`} > <Box className={`mt-8 menu__wrapper `} >
{ {
user?.role && user.role.toUpperCase() === 'ADMIN' ? ( user?.role && user.role.toUpperCase() === 'ADMIN' ? (
<AdminMenu open={open} /> <AdminMenu open={open} />
...@@ -161,27 +161,14 @@ export default function Sidebar({ open, handleDrawerOpen, handleMobileMenuToggle ...@@ -161,27 +161,14 @@ export default function Sidebar({ open, handleDrawerOpen, handleMobileMenuToggle
} }
return ( return (
<Drawer variant="permanent" open={open} downLG={downLG}> <Drawer variant="permanent" open={open} downLG={downLG}>
<DrawerHeader sx={{ justifyContent: "center" }}> <DrawerHeader sx={{ justifyContent: "center", marginTop: 2 }}>
{/* <HambergerMenu /> */} {/* <HambergerMenu /> */}
<Link href="/"> <Link href="/">
<Image src={data?.data?.logo || ""} alt="Logo" width={102} height={56} /> <Image src={data?.data?.logo || ""} alt="Logo" width={102} height={56} />
</Link> </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> </DrawerHeader>
<Box className={`mt-8 menu__wrapper ${open ? "px-3" : ""}`} > <Box className={`mt-8 menu__wrapper`} >
{ {
user?.role && user.role.toUpperCase() === 'ADMIN' ? ( user?.role && user.role.toUpperCase() === 'ADMIN' ? (
<AdminMenu open={open} /> <AdminMenu open={open} />
......
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