Skip to content

S
sweepstake
Commit 0866c63b by Arjun Jhukal
Options

updated the menu from button to link

parent fc0d8612
Showing with 67 additions and 159 deletions
src/app/globals.css
...@@ -361,3 +361,12 @@ ...@@ -361,3 +361,12 @@
.general-content-box table tbody tr:nth-child(odd) td { .general-content-box table tbody tr:nth-child(odd) td {
background-color: var(--background) background-color: var(--background)
} */ } */
.active__menu {
background-color: #FEEFFF;
color: var(--color-primary);
}
.active__menu * {
color: var(--color-primary);
}
\ No newline at end of file
src/components/organism/Header/Profile.tsx
...@@ -32,27 +32,27 @@ export default function ProfileBlock() { ...@@ -32,27 +32,27 @@ export default function ProfileBlock() {
{ {
label: "Profile", label: "Profile",
href: "/account/profile/account", href: "/account/profile/account",
icon: <Profile size="20" />, icon: <Profile size="20" className="group-hover:text-primary" />,
}, },
{ {
label: "Game Credentials", label: "Game Credentials",
href: "/credentials", href: "/credentials",
icon: <Wallet2 size="20" />, icon: <Wallet2 size="20" className="group-hover:text-primary" />,
}, },
{ {
label: "Deposit History", label: "Deposit History",
href: "/account/deposit-history", href: "/account/deposit-history",
icon: <Coin size="20" />, icon: <Coin size="20" className="group-hover:text-primary" />,
}, },
{ {
label: "Withdraw History", label: "Withdraw History",
href: "/account/withdrawl-history", href: "/account/withdrawl-history",
icon: <MoneySend size="20" />, icon: <MoneySend size="20" className="group-hover:text-primary" />,
}, },
{ {
label: "Logout", label: "Logout",
href: "#", href: "#",
icon: <Logout size="20" />, icon: <Logout size="20" className="group-hover:text-primary" />,
onClick: (e: React.MouseEvent) => { onClick: (e: React.MouseEvent) => {
e.preventDefault(); e.preventDefault();
dispatch(clearTokens()); dispatch(clearTokens());
...@@ -112,7 +112,6 @@ export default function ProfileBlock() { ...@@ -112,7 +112,6 @@ export default function ProfileBlock() {
elevation={3} elevation={3}
sx={{ sx={{
width: 215, width: 215,
// p: 2,
borderRadius: 2, borderRadius: 2,
mt: 1, mt: 1,
}} }}
...@@ -139,15 +138,15 @@ export default function ProfileBlock() { ...@@ -139,15 +138,15 @@ export default function ProfileBlock() {
<List> <List>
{menuItems.map((item, idx) => ( {menuItems.map((item, idx) => (
<ListItem key={idx} disablePadding> <ListItem key={idx} disablePadding>
<ListItemButton <Link
component={item.href ? Link : "button"} // component={item.href ? Link : "button"}
href={item.href || undefined} href={item.href || ""}
onClick={item.onClick} // onClick={item.onClick}
className={`flex items-center py-3 px-4 hover:bg-[#FBF4FB]`} className={`flex items-center py-3 px-4 hover:bg-[#FBF4FB] group`}
> >
<ListItemIcon className="min-w-[30px] mr-1">{item.icon}</ListItemIcon> <ListItemIcon className="min-w-[30px] mr-1 group-hover:text-primary">{item.icon}</ListItemIcon>
<ListItemText primary={item.label} /> <ListItemText primary={item.label} className='group-hover:text-primary' />
</ListItemButton> </Link>
</ListItem> </ListItem>
))} ))}
</List> </List>
......
src/components/organism/Sidebar/UserSidebar/PrimaryMenu.tsx
...@@ -5,13 +5,30 @@ import { PATH } from "@/routes/PATH"; ...@@ -5,13 +5,30 @@ import { PATH } from "@/routes/PATH";
import { getAllMenus } from "@/serverApi/menu"; import { getAllMenus } from "@/serverApi/menu";
import { useGetAllUserMenuQuery } from "@/services/menuApi"; import { useGetAllUserMenuQuery } from "@/services/menuApi";
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation";
export default function PrimaryMenu() { export default function PrimaryMenu({ open }: { open: boolean }) {
const { data } = useGetAllUserMenuQuery(); const { data, isLoading } = useGetAllUserMenuQuery();
const pathname = usePathname();
if (isLoading) {
return (
<div className="flex flex-col gap-2 animate-pulse">
{Array.from({ length: 6 }).map((_, i) => (
<div
key={i}
className="rounded-xl bg-gray-200 w-full h-[40px]"
/>
))}
</div>
);
}
return ( return (
<List> <List>
{data ? data?.data?.map((menu: any) => ( {data ? data?.data?.map((menu: any) => {
const href = menu.slug ? `/general/${menu.slug}` : "#";
const isActive = pathname.startsWith(href);
return (
<ListItem key={menu?.name}> <ListItem key={menu?.name}>
{/* <ListItemButton component="a" href={menu.slug ? `/general/${menu.slug}` : "#"}> {/* <ListItemButton component="a" href={menu.slug ? `/general/${menu.slug}` : "#"}>
<ListItemIcon> <ListItemIcon>
...@@ -19,14 +36,22 @@ export default function PrimaryMenu() { ...@@ -19,14 +36,22 @@ export default function PrimaryMenu() {
</ListItemIcon> </ListItemIcon>
<ListItemText primary={menu.name} /> <ListItemText primary={menu.name} />
</ListItemButton> */} </ListItemButton> */}
<Link href={menu.slug ? `/general/${menu.slug}` : "#"} className="flex gap-2 items-center py-2"> <Link href={menu.slug ? `/general/${menu.slug}` : "#"} className={`flex gap-2 items-center px-4 py-2 rounded-md transition-all ${[
open ? "expanded" : "collapsed",
isActive ? "active__menu " : ""
].join(" ")
}`}>
<ListItemIcon> <ListItemIcon>
<ReceiptEdit size={18} /> <ReceiptEdit size={18} />
</ListItemIcon> </ListItemIcon>
<ListItemText primary={menu?.name} /> <ListItemText
primary={menu?.name}
className={open ? "expanded" : "collapsed"}
/>
</Link> </Link>
</ListItem> </ListItem>
)) )
})
: ( : (
<p></p> <p></p>
) )
......
src/components/organism/Sidebar/UserSidebar/index.tsx
...@@ -23,13 +23,12 @@ export default function UserMenu({ open }: { open: boolean }) { ...@@ -23,13 +23,12 @@ export default function UserMenu({ open }: { open: boolean }) {
<div className="flex flex-col gap-16 lg:gap-28"> <div className="flex flex-col gap-16 lg:gap-28">
<List> <List>
<ListItem> <ListItem>
<ListItemButton <Link
className={[ className={`flex gap-2 items-center px-4 py-2 ${[
open ? "expanded" : "collapsed", open ? "expanded" : "collapsed",
pathname === PATH.DASHBOARD.ROOT ? "active" : "" pathname === PATH.DASHBOARD.ROOT ? "active__menu" : ""
].join(" ")} ].join(" ")}`}
href={PATH.DASHBOARD.ROOT}
onClick={() => { router.push(PATH.DASHBOARD.ROOT) }}
> >
<ListItemIcon className={open ? "expanded" : "collapsed"}> <ListItemIcon className={open ? "expanded" : "collapsed"}>
...@@ -39,18 +38,17 @@ export default function UserMenu({ open }: { open: boolean }) { ...@@ -39,18 +38,17 @@ export default function UserMenu({ open }: { open: boolean }) {
primary="Lobby" primary="Lobby"
className={open ? "expanded" : "collapsed"} className={open ? "expanded" : "collapsed"}
/> />
</ListItemButton> </Link>
</ListItem> </ListItem>
<ListItem> <ListItem>
<ListItemButton <Link
className={[ className={`flex gap-2 items-center px-4 py-2 ${[
open ? "expanded" : "collapsed", open ? "expanded" : "collapsed",
[ [
PATH.USER.GAMES.ROOT, PATH.USER.GAMES.ROOT,
].some(path => pathname.startsWith(path)) ? "active" : "" ].some(path => pathname.startsWith(path)) ? "active__menu" : ""
].join(" ")} ].join(" ")}`}
onClick={() => { router.push(PATH.USER.GAMES.ROOT) }} href={PATH.USER.GAMES.ROOT}
> >
<ListItemIcon className={open ? "expanded" : "collapsed"}> <ListItemIcon className={open ? "expanded" : "collapsed"}>
<StatusUp size={18} /> <StatusUp size={18} />
...@@ -59,135 +57,11 @@ export default function UserMenu({ open }: { open: boolean }) { ...@@ -59,135 +57,11 @@ export default function UserMenu({ open }: { open: boolean }) {
primary="Exclusive Games" primary="Exclusive Games"
className={open ? "expanded" : "collapsed"} className={open ? "expanded" : "collapsed"}
/> />
</ListItemButton> </Link>
</ListItem> </ListItem>
{/* <ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.ADMIN.GAMES.ROOT,
PATH.ADMIN.GAMES.ADD_GAME.ROOT,
"/edit-game"
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.ADMIN.GAMES.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<StatusUp size={18} />
</ListItemIcon>
<ListItemText
primary="Bonus Games"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem> */}
</List> </List>
{/* <List>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.USER.GENERAL_PAGES.REFUND_POLICY.ROOT
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.USER.GENERAL_PAGES.REFUND_POLICY.ROOT) }}
> <PrimaryMenu open={open} />
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<ReceiptEdit size={18} />
</ListItemIcon>
<ListItemText
primary="Refund Policy"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.USER.GENERAL_PAGES.ACCESSIBILITY.ROOT
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.USER.GENERAL_PAGES.ACCESSIBILITY.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<ReceiptEdit size={18} />
</ListItemIcon>
<ListItemText
primary="AML Policy"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.USER.GENERAL_PAGES.SWEEPSTAKE_POLICY.ROOT
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.USER.GENERAL_PAGES.SWEEPSTAKE_POLICY.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<ReceiptEdit size={18} />
</ListItemIcon>
<ListItemText
primary="Sweepstake Policy"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.USER.GENERAL_PAGES.TERMS_AND_CONDITIONS.ROOT
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.USER.GENERAL_PAGES.TERMS_AND_CONDITIONS.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<ReceiptEdit size={18} />
</ListItemIcon>
<ListItemText
primary="Terms & Condition"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
<ListItem>
<ListItemButton
className={[
open ? "expanded" : "collapsed",
[
PATH.USER.GENERAL_PAGES.PRIVACY_POLICY.ROOT
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.USER.GENERAL_PAGES.PRIVACY_POLICY.ROOT) }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<UserEdit size={18} />
</ListItemIcon>
<ListItemText
primary="Privacy Policy"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</ListItem>
</List> */}
<PrimaryMenu />
</div> </div>
<div className="support mt-4"> <div className="support mt-4">
<Link href={"/support"} className="ss-btn support__btn flex items-center gap-2 w-full justify-start"> <Link href={"/support"} className="ss-btn support__btn flex items-center gap-2 w-full justify-start">
......
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