Skip to content

S
sweepstake
Commit 500717a6 by Arjun Jhukal
Options

updated menu hover effect, button hover effect and base query

parent df8b6401
Showing with 388 additions and 111 deletions
src/app/(dashboard)/(user)/(outsideAuth)/page.tsx
...@@ -164,7 +164,7 @@ export default async function Home() { ...@@ -164,7 +164,7 @@ export default async function Home() {
{subBanner.cta_link && ( {subBanner.cta_link && (
<Link <Link
href={subBanner.cta_link} href={subBanner.cta_link}
className="px-[18px] py-[11px] rounded-[28px] inline-block" className="ss-btn px-[18px] py-[11px] rounded-[28px] inline-block"
style={{ style={{
background: background:
index % 2 === 0 index % 2 === 0
......
src/app/globals.css
...@@ -117,12 +117,30 @@ ...@@ -117,12 +117,30 @@
@apply py-2 px-4 lg:px-6 lg:py-3; @apply py-2 px-4 lg:px-6 lg:py-3;
border-radius: 27px; border-radius: 27px;
text-align: center; text-align: center;
width: 100%;
display: block; display: block;
position: relative;
overflow: hidden;
}
.ss-btn::before {
content: '';
background: rgba(255, 255, 255, 0.4);
width: 60%;
height: 100%;
top: 0%;
left: -125%;
transform: skew(45deg);
position: absolute;
transition: left 0.75s ease-in-out;
z-index: 9;
}
.ss-btn:hover::before {
left: 155%;
} }
:disabled { :disabled {
opacity: 0.5; /* opacity: 0.5; */
cursor: not-allowed; cursor: not-allowed;
} }
} }
...@@ -370,8 +388,15 @@ ...@@ -370,8 +388,15 @@
} */ } */
.active__menu { .active__menu {
background-color: #FEEFFF; background: rgba(255, 255, 255, 0.15);
color: var(--color-primary); backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 8px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37),
inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(255, 255, 255, 0.1),
} }
.active__menu * { .active__menu * {
......
src/components/organism/Sidebar/AdminSidebar/index.tsx
...@@ -82,25 +82,83 @@ export default function AdminMenu({ open }: { open: boolean }) { ...@@ -82,25 +82,83 @@ export default function AdminMenu({ open }: { open: boolean }) {
}, },
]; ];
const [glassStyle, setGlassStyle] = React.useState({ top: 0, height: 0, opacity: 0 });
const menuListRef = React.useRef<HTMLUListElement>(null);
const handleMouseEnter = (e: React.MouseEvent<HTMLLIElement>) => {
const item = e.currentTarget;
const list = menuListRef.current;
if (item && list) {
const itemRect = item.getBoundingClientRect();
const listRect = list.getBoundingClientRect();
const topPosition = itemRect.top - listRect.top;
setGlassStyle({
top: topPosition,
height: itemRect.height,
opacity: 1,
});
}
};
const handleMouseLeave = () => {
setGlassStyle((prev) => ({ ...prev, opacity: 0 }));
};
return ( return (
<List> <List ref={menuListRef}
{menuItems.map(({ label, icon, href, active }, idx) => ( onMouseLeave={handleMouseLeave}
<ListItem key={idx}> style={{ position: 'relative' }} >
<Link <div
href={href} style={{
className={`flex gap-2 items-center px-4 py-2 ${open ? "expanded" : "collapsed" position: "absolute",
} ${active ? "active__menu" : ""}`} left: "0",
right: "0",
top: `${glassStyle.top}px`,
height: `${glassStyle.height}px`,
background: "rgba(255, 255, 255, 0.15)",
backdropFilter: "blur(12px)",
WebkitBackdropFilter: "blur(12px)",
border: "1px solid rgba(255, 255, 255, 0.25)",
borderRadius: "8px",
boxShadow: `
0 8px 32px 0 rgba(0, 0, 0, 0.37),
inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(255, 255, 255, 0.1)
`,
transition: "all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)",
pointerEvents: "none",
zIndex: 1,
opacity: glassStyle.opacity,
transform:
glassStyle.opacity === 1
? "translateY(0) scale(1)"
: "translateY(0) scale(0.95)",
}}
/>
{
menuItems.map(({ label, icon, href, active }, idx) => (
<ListItem
key={idx}
onMouseEnter={handleMouseEnter}
style={{ position: "relative", zIndex: 2, padding: 0 }}
> >
<ListItemIcon className={open ? "expanded" : "collapsed"}> <Link
{icon} href={href}
</ListItemIcon> className={`flex gap-2 items-center px-4 py-2 ${open ? "expanded" : "collapsed"
<ListItemText } ${active ? "active__menu" : ""}`}
primary={label} >
className={open ? "expanded" : "collapsed"} <ListItemIcon className={open ? "expanded" : "collapsed"}>
/> {icon}
</Link> </ListItemIcon>
</ListItem> <ListItemText
))} primary={label}
</List> className={open ? "expanded" : "collapsed"}
/>
</Link>
</ListItem>
))
}
</ List>
); );
} }
src/components/organism/Sidebar/UserSidebar/PrimaryMenu.tsx
...@@ -10,6 +10,29 @@ import { usePathname } from "next/navigation"; ...@@ -10,6 +10,29 @@ import { usePathname } from "next/navigation";
export default function PrimaryMenu({ open }: { open: boolean }) { export default function PrimaryMenu({ open }: { open: boolean }) {
const { data, isLoading } = useGetAllUserMenuQuery(); const { data, isLoading } = useGetAllUserMenuQuery();
const pathname = usePathname(); const pathname = usePathname();
const [glassStyle, setGlassStyle] = React.useState({ top: 0, height: 0, opacity: 0 });
const menuListRef = React.useRef<HTMLUListElement>(null);
const handleMouseEnter = (e: React.MouseEvent<HTMLLIElement>) => {
const item = e.currentTarget;
const list = menuListRef.current;
if (item && list) {
const itemRect = item.getBoundingClientRect();
const listRect = list.getBoundingClientRect();
const topPosition = itemRect.top - listRect.top;
setGlassStyle({
top: topPosition,
height: itemRect.height,
opacity: 1,
});
}
};
const handleMouseLeave = () => {
setGlassStyle((prev) => ({ ...prev, opacity: 0 }));
};
if (isLoading) { if (isLoading) {
return ( return (
...@@ -24,18 +47,45 @@ export default function PrimaryMenu({ open }: { open: boolean }) { ...@@ -24,18 +47,45 @@ export default function PrimaryMenu({ open }: { open: boolean }) {
); );
} }
return ( return (
<List> <List
ref={menuListRef}
onMouseLeave={handleMouseLeave}
style={{ position: 'relative', }}>
<div
style={{
position: 'absolute',
left: '0',
right: '0',
top: `${glassStyle.top}px`,
height: `${glassStyle.height}px`,
background: 'rgba(255, 255, 255, 0.15)',
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
border: '1px solid rgba(255, 255, 255, 0.25)',
borderRadius: '8px',
boxShadow: `
0 8px 32px 0 rgba(0, 0, 0, 0.37),
inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
0 0 20px rgba(255, 255, 255, 0.1)
`,
transition: 'all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
pointerEvents: 'none',
zIndex: 1,
opacity: glassStyle.opacity,
transform: glassStyle.opacity === 1 ? 'translateY(0) scale(1)' : 'translateY(0) scale(0.95)',
}}
/>
{data ? data?.data?.map((menu: any) => { {data ? data?.data?.map((menu: any) => {
const href = menu.slug ? `/general/${menu.slug}` : "#"; const href = menu.slug ? `/general/${menu.slug}` : "#";
const isActive = pathname.startsWith(href); const isActive = pathname.startsWith(href);
return ( return (
<ListItem key={menu?.name}> <ListItem key={menu?.name}
{/* <ListItemButton component="a" href={menu.slug ? `/general/${menu.slug}` : "#"}> onMouseEnter={handleMouseEnter}
<ListItemIcon> style={{
<ReceiptEdit size={18} /> position: 'relative',
</ListItemIcon> zIndex: 2,
<ListItemText primary={menu.name} /> padding: 0,
</ListItemButton> */} }}>
<Link href={menu.slug ? `/general/${menu.slug}` : "#"} className={`flex gap-2 items-center px-4 py-2 rounded-md transition-all ${[ <Link href={menu.slug ? `/general/${menu.slug}` : "#"} className={`flex gap-2 items-center px-4 py-2 rounded-md transition-all ${[
open ? "expanded" : "collapsed", open ? "expanded" : "collapsed",
isActive ? "active__menu " : "" isActive ? "active__menu " : ""
......
src/components/pages/dashboard/userDashboard/games/exclusiveGames/index.tsx
...@@ -31,7 +31,7 @@ export default async function ExclusiveGamePage() { ...@@ -31,7 +31,7 @@ export default async function ExclusiveGamePage() {
src={game.thumbnail || "/assets/images/fallback.png"} src={game.thumbnail || "/assets/images/fallback.png"}
alt={game.name} alt={game.name}
fill fill
className="w-full h-[222px] object-cover group-hover:scale-105 transition-transform duration-300" className="w-full h-[222px] object-cover group-hover:scale-110 transition-transform duration-300"
/> />
</Tooltip> </Tooltip>
</ProtectedLink> </ProtectedLink>
......
src/services/baseQuery.ts
...@@ -7,8 +7,8 @@ export const baseQuery = fetchBaseQuery({ ...@@ -7,8 +7,8 @@ export const baseQuery = fetchBaseQuery({
prepareHeaders(headers, { getState }) { prepareHeaders(headers, { getState }) {
const token = (getState() as RootState).auth.access_token; const token = (getState() as RootState).auth.access_token;
// headers.set("Accept", "application/json"); headers.set("Accept", "application/json");
// headers.set("Content-Type", "application/json"); headers.set("Content-Type", "application/json");
if (token) { if (token) {
headers.set("Authorization", `Bearer ${token}`); headers.set("Authorization", `Bearer ${token}`);
} }
......
src/theme/adminPalette.ts
...@@ -178,16 +178,38 @@ export default function Palette(mode: ThemeMode) { ...@@ -178,16 +178,38 @@ export default function Palette(mode: ThemeMode) {
MuiButton: { MuiButton: {
styleOverrides: { styleOverrides: {
root: { root: {
borderRadius: '27px', borderRadius: "27px",
padding: '12px 24px', padding: "12px 24px",
textAlign: 'center', textAlign: "center",
textTransform: 'capitalize', textTransform: "capitalize",
maxWidth: 'fit-content', width: "100%",
'&:disabled': { position: "relative",
opacity: 0.2, overflow: "hidden",
cursor: 'not-allowed', transition: "all 0.3s ease-in-out",
color: "#fff" color: "#fff",
"&:disabled": {
// opacity: 0.5,
cursor: "not-allowed",
},
// ✨ Shine effect (pseudo-element)
"&::before": {
content: '""',
position: "absolute",
top: 0,
left: "-120%",
width: "60%",
height: "100%",
background: "rgba(255, 255, 255, 0.4)",
transform: "skew(45deg)",
transition: "left 0.75s ease-in-out",
zIndex: 1,
},
"&:hover::before": {
left: "155%",
}, },
// [baseTheme.breakpoints.down("md")]: {
// padding: "8px 16px",
// },
}, },
}, },
variants: [ variants: [
...@@ -196,9 +218,9 @@ export default function Palette(mode: ThemeMode) { ...@@ -196,9 +218,9 @@ export default function Palette(mode: ThemeMode) {
style: { style: {
background: primaryGradColors[0], background: primaryGradColors[0],
color: "#fff", color: "#fff",
"&:hover": { // "&:hover": {
opacity: 0.9, // opacity: 0.9,
}, // },
}, },
}, },
{ {
...@@ -206,9 +228,9 @@ export default function Palette(mode: ThemeMode) { ...@@ -206,9 +228,9 @@ export default function Palette(mode: ThemeMode) {
style: { style: {
background: secondaryGradColors[0], background: secondaryGradColors[0],
color: "#fff", color: "#fff",
"&:hover": { // "&:hover": {
opacity: 0.9, // opacity: 0.9,
}, // },
}, },
}, },
], ],
......
src/theme/palette.ts
...@@ -379,10 +379,29 @@ export default function Palette(mode: ThemeMode) { ...@@ -379,10 +379,29 @@ export default function Palette(mode: ThemeMode) {
textAlign: "center", textAlign: "center",
textTransform: "capitalize", textTransform: "capitalize",
width: "100%", width: "100%",
position: "relative",
overflow: "hidden",
transition: "all 0.3s ease-in-out",
"&:disabled": { "&:disabled": {
opacity: 0.5, opacity: 0.5,
cursor: "not-allowed", cursor: "not-allowed",
}, },
// ✨ Shine effect (pseudo-element)
"&::before": {
content: '""',
position: "absolute",
top: 0,
left: "-120%",
width: "60%",
height: "100%",
background: "rgba(255, 255, 255, 0.4)",
transform: "skew(45deg)",
transition: "left 0.75s ease-in-out",
zIndex: 1,
},
"&:hover::before": {
left: "155%",
},
[baseTheme.breakpoints.down("md")]: { [baseTheme.breakpoints.down("md")]: {
padding: "8px 16px", padding: "8px 16px",
}, },
...@@ -394,7 +413,9 @@ export default function Palette(mode: ThemeMode) { ...@@ -394,7 +413,9 @@ export default function Palette(mode: ThemeMode) {
style: { style: {
background: primaryGradColors[0], background: primaryGradColors[0],
color: "#fff", color: "#fff",
"&:hover": { opacity: 0.9 }, // "&:hover": {
// opacity: 0.9,
// },
}, },
}, },
{ {
...@@ -402,11 +423,14 @@ export default function Palette(mode: ThemeMode) { ...@@ -402,11 +423,14 @@ export default function Palette(mode: ThemeMode) {
style: { style: {
background: secondaryGradColors[0], background: secondaryGradColors[0],
color: "#fff", color: "#fff",
"&:hover": { opacity: 0.9 }, // "&:hover": {
// opacity: 0.9,
// },
}, },
}, },
], ],
}, },
MuiList: { MuiList: {
styleOverrides: { root: { padding: 0 } }, styleOverrides: { root: { padding: 0 } },
}, },
......
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