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() {
{subBanner.cta_link && (
<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={{
background:
index % 2 === 0
......
src/app/globals.css
......@@ -117,12 +117,30 @@
@apply py-2 px-4 lg:px-6 lg:py-3;
border-radius: 27px;
text-align: center;
width: 100%;
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 {
opacity: 0.5;
/* opacity: 0.5; */
cursor: not-allowed;
}
}
......@@ -370,8 +388,15 @@
} */
.active__menu {
background-color: #FEEFFF;
color: var(--color-primary);
background: rgba(255, 255, 255, 0.15);
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 * {
......
src/components/organism/Sidebar/AdminSidebar/index.tsx
......@@ -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 (
<List>
{menuItems.map(({ label, icon, href, active }, idx) => (
<ListItem key={idx}>
<Link
href={href}
className={`flex gap-2 items-center px-4 py-2 ${open ? "expanded" : "collapsed"
} ${active ? "active__menu" : ""}`}
<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)",
}}
/>
{
menuItems.map(({ label, icon, href, active }, idx) => (
<ListItem
key={idx}
onMouseEnter={handleMouseEnter}
style={{ position: "relative", zIndex: 2, padding: 0 }}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
{icon}
</ListItemIcon>
<ListItemText
primary={label}
className={open ? "expanded" : "collapsed"}
/>
</Link>
</ListItem>
))}
</List>
<Link
href={href}
className={`flex gap-2 items-center px-4 py-2 ${open ? "expanded" : "collapsed"
} ${active ? "active__menu" : ""}`}
>
<ListItemIcon className={open ? "expanded" : "collapsed"}>
{icon}
</ListItemIcon>
<ListItemText
primary={label}
className={open ? "expanded" : "collapsed"}
/>
</Link>
</ListItem>
))
}
</ List>
);
}
src/components/organism/Sidebar/UserSidebar/PrimaryMenu.tsx
......@@ -10,6 +10,29 @@ import { usePathname } from "next/navigation";
export default function PrimaryMenu({ open }: { open: boolean }) {
const { data, isLoading } = useGetAllUserMenuQuery();
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) {
return (
......@@ -24,18 +47,45 @@ export default function PrimaryMenu({ open }: { open: boolean }) {
);
}
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) => {
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>
<ReceiptEdit size={18} />
</ListItemIcon>
<ListItemText primary={menu.name} />
</ListItemButton> */}
<ListItem key={menu?.name}
onMouseEnter={handleMouseEnter}
style={{
position: 'relative',
zIndex: 2,
padding: 0,
}}>
<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 " : ""
......
src/components/pages/dashboard/userDashboard/games/exclusiveGames/index.tsx
......@@ -31,7 +31,7 @@ export default async function ExclusiveGamePage() {
src={game.thumbnail || "/assets/images/fallback.png"}
alt={game.name}
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>
</ProtectedLink>
......
src/services/baseQuery.ts
......@@ -7,8 +7,8 @@ export const baseQuery = fetchBaseQuery({
prepareHeaders(headers, { getState }) {
const token = (getState() as RootState).auth.access_token;
// headers.set("Accept", "application/json");
// headers.set("Content-Type", "application/json");
headers.set("Accept", "application/json");
headers.set("Content-Type", "application/json");
if (token) {
headers.set("Authorization", `Bearer ${token}`);
}
......
src/theme/adminPalette.ts
......@@ -178,16 +178,38 @@ export default function Palette(mode: ThemeMode) {
MuiButton: {
styleOverrides: {
root: {
borderRadius: '27px',
padding: '12px 24px',
textAlign: 'center',
textTransform: 'capitalize',
maxWidth: 'fit-content',
'&:disabled': {
opacity: 0.2,
cursor: 'not-allowed',
color: "#fff"
borderRadius: "27px",
padding: "12px 24px",
textAlign: "center",
textTransform: "capitalize",
width: "100%",
position: "relative",
overflow: "hidden",
transition: "all 0.3s ease-in-out",
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: [
......@@ -196,9 +218,9 @@ export default function Palette(mode: ThemeMode) {
style: {
background: primaryGradColors[0],
color: "#fff",
"&:hover": {
opacity: 0.9,
},
// "&:hover": {
// opacity: 0.9,
// },
},
},
{
......@@ -206,9 +228,9 @@ export default function Palette(mode: ThemeMode) {
style: {
background: secondaryGradColors[0],
color: "#fff",
"&:hover": {
opacity: 0.9,
},
// "&:hover": {
// opacity: 0.9,
// },
},
},
],
......
src/theme/palette.ts
......@@ -379,10 +379,29 @@ export default function Palette(mode: ThemeMode) {
textAlign: "center",
textTransform: "capitalize",
width: "100%",
position: "relative",
overflow: "hidden",
transition: "all 0.3s ease-in-out",
"&: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",
},
......@@ -394,7 +413,9 @@ export default function Palette(mode: ThemeMode) {
style: {
background: primaryGradColors[0],
color: "#fff",
"&:hover": { opacity: 0.9 },
// "&:hover": {
// opacity: 0.9,
// },
},
},
{
......@@ -402,11 +423,14 @@ export default function Palette(mode: ThemeMode) {
style: {
background: secondaryGradColors[0],
color: "#fff",
"&:hover": { opacity: 0.9 },
// "&:hover": {
// opacity: 0.9,
// },
},
},
],
},
MuiList: {
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