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 @@
.general-content-box table tbody tr:nth-child(odd) td {
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() {
{
label: "Profile",
href: "/account/profile/account",
icon: <Profile size="20" />,
icon: <Profile size="20" className="group-hover:text-primary" />,
},
{
label: "Game Credentials",
href: "/credentials",
icon: <Wallet2 size="20" />,
icon: <Wallet2 size="20" className="group-hover:text-primary" />,
},
{
label: "Deposit History",
href: "/account/deposit-history",
icon: <Coin size="20" />,
icon: <Coin size="20" className="group-hover:text-primary" />,
},
{
label: "Withdraw History",
href: "/account/withdrawl-history",
icon: <MoneySend size="20" />,
icon: <MoneySend size="20" className="group-hover:text-primary" />,
},
{
label: "Logout",
href: "#",
icon: <Logout size="20" />,
icon: <Logout size="20" className="group-hover:text-primary" />,
onClick: (e: React.MouseEvent) => {
e.preventDefault();
dispatch(clearTokens());
......@@ -112,7 +112,6 @@ export default function ProfileBlock() {
elevation={3}
sx={{
width: 215,
// p: 2,
borderRadius: 2,
mt: 1,
}}
......@@ -139,15 +138,15 @@ export default function ProfileBlock() {
<List>
{menuItems.map((item, idx) => (
<ListItem key={idx} disablePadding>
<ListItemButton
component={item.href ? Link : "button"}
href={item.href || undefined}
onClick={item.onClick}
className={`flex items-center py-3 px-4 hover:bg-[#FBF4FB]`}
<Link
// component={item.href ? Link : "button"}
href={item.href || ""}
// onClick={item.onClick}
className={`flex items-center py-3 px-4 hover:bg-[#FBF4FB] group`}
>
<ListItemIcon className="min-w-[30px] mr-1">{item.icon}</ListItemIcon>
<ListItemText primary={item.label} />
</ListItemButton>
<ListItemIcon className="min-w-[30px] mr-1 group-hover:text-primary">{item.icon}</ListItemIcon>
<ListItemText primary={item.label} className='group-hover:text-primary' />
</Link>
</ListItem>
))}
</List>
......
src/components/organism/Sidebar/UserSidebar/PrimaryMenu.tsx
......@@ -5,13 +5,30 @@ import { PATH } from "@/routes/PATH";
import { getAllMenus } from "@/serverApi/menu";
import { useGetAllUserMenuQuery } from "@/services/menuApi";
import Link from "next/link";
import { usePathname } from "next/navigation";
export default function PrimaryMenu() {
const { data } = useGetAllUserMenuQuery();
export default function PrimaryMenu({ open }: { open: boolean }) {
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 (
<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}>
{/* <ListItemButton component="a" href={menu.slug ? `/general/${menu.slug}` : "#"}>
<ListItemIcon>
......@@ -19,14 +36,22 @@ export default function PrimaryMenu() {
</ListItemIcon>
<ListItemText primary={menu.name} />
</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>
<ReceiptEdit size={18} />
</ListItemIcon>
<ListItemText primary={menu?.name} />
<ListItemText
primary={menu?.name}
className={open ? "expanded" : "collapsed"}
/>
</Link>
</ListItem>
))
)
})
: (
<p></p>
)
......
src/components/organism/Sidebar/UserSidebar/index.tsx
......@@ -23,13 +23,12 @@ export default function UserMenu({ open }: { open: boolean }) {
<div className="flex flex-col gap-16 lg:gap-28">
<List>
<ListItem>
<ListItemButton
className={[
<Link
className={`flex gap-2 items-center px-4 py-2 ${[
open ? "expanded" : "collapsed",
pathname === PATH.DASHBOARD.ROOT ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.DASHBOARD.ROOT) }}
pathname === PATH.DASHBOARD.ROOT ? "active__menu" : ""
].join(" ")}`}
href={PATH.DASHBOARD.ROOT}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
......@@ -39,18 +38,17 @@ export default function UserMenu({ open }: { open: boolean }) {
primary="Lobby"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</Link>
</ListItem>
<ListItem>
<ListItemButton
className={[
<Link
className={`flex gap-2 items-center px-4 py-2 ${[
open ? "expanded" : "collapsed",
[
PATH.USER.GAMES.ROOT,
].some(path => pathname.startsWith(path)) ? "active" : ""
].join(" ")}
onClick={() => { router.push(PATH.USER.GAMES.ROOT) }}
].some(path => pathname.startsWith(path)) ? "active__menu" : ""
].join(" ")}`}
href={PATH.USER.GAMES.ROOT}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
<StatusUp size={18} />
......@@ -59,135 +57,11 @@ export default function UserMenu({ open }: { open: boolean }) {
primary="Exclusive Games"
className={open ? "expanded" : "collapsed"}
/>
</ListItemButton>
</Link>
</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>
<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) }}
>
<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 />
<PrimaryMenu open={open} />
</div>
<div className="support mt-4">
<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