Fix: design and few function
This commit is contained in:
@@ -48,26 +48,26 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
};
|
||||
|
||||
// When reload and click on back then logout
|
||||
// useEffect(() => {
|
||||
// // Push fake history state to trap navigation
|
||||
// window.history.pushState(null, "", window.location.href);
|
||||
// const handlePopState = () => {
|
||||
// doLogout(); // logout when back/forward pressed
|
||||
// };
|
||||
// const handleBeforeUnload = (e: BeforeUnloadEvent) => {
|
||||
// // logout on tab close / refresh
|
||||
// localStorage.removeItem("access_token");
|
||||
// sessionStorage.removeItem("access_token");
|
||||
// localStorage.clear();
|
||||
// sessionStorage.clear();
|
||||
// };
|
||||
// window.addEventListener("popstate", handlePopState);
|
||||
// window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
// return () => {
|
||||
// window.removeEventListener("popstate", handlePopState);
|
||||
// window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
// };
|
||||
// }, []);
|
||||
useEffect(() => {
|
||||
// Push fake history state to trap navigation
|
||||
window.history.pushState(null, "", window.location.href);
|
||||
const handlePopState = () => {
|
||||
doLogout(); // logout when back/forward pressed
|
||||
};
|
||||
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
|
||||
// logout on tab close / refresh
|
||||
localStorage.removeItem("access_token");
|
||||
sessionStorage.removeItem("access_token");
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
};
|
||||
window.addEventListener("popstate", handlePopState);
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
return () => {
|
||||
window.removeEventListener("popstate", handlePopState);
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const token = localStorage.getItem("access_token");
|
||||
@@ -183,7 +183,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
{ href: "/home", label: "Home", icon: IconHome },
|
||||
{ href: "/accounts", label: "Accounts", icon: IconWallet },
|
||||
{ href: "/funds_transfer", label: "Fund Transfer", icon: IconSend },
|
||||
{ href: "/beneficiary/add_beneficiary", label: "Beneficiaries", icon: IconUsers },
|
||||
{ href: "/beneficiary", label: "Beneficiaries", icon: IconUsers },
|
||||
{ href: "/settings", label: "Settings", icon: IconSettings },
|
||||
];
|
||||
|
||||
@@ -200,154 +200,165 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
className={styles.header}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "0.8rem 2rem",
|
||||
padding: isMobile ? "0.6rem 1rem" : "0.8rem 2rem",
|
||||
background: darkMode
|
||||
? "linear-gradient(15deg, rgba(229, 101, 22, 1) 55%, rgba(28, 28, 30, 1) 100%)" // Dark Mode Gradient
|
||||
: "linear-gradient(deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)", // Light Mode Gradient
|
||||
? "linear-gradient(15deg, rgba(229, 101, 22, 1) 55%, rgba(28, 28, 30, 1) 100%)"
|
||||
: "linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
color: "white",
|
||||
boxShadow: "0 2px 6px rgba(0,0,0,0.15)",
|
||||
position: "sticky",
|
||||
top: 0,
|
||||
zIndex: 100,
|
||||
zIndex: 200, // ↑ Increased for stability
|
||||
}}
|
||||
>
|
||||
<Group gap="md">
|
||||
<Group gap="md" wrap="nowrap">
|
||||
<Image
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="contain"
|
||||
alt="ebanking"
|
||||
style={{ width: "60px", height: "auto" }}
|
||||
style={{
|
||||
width: isMobile ? "40px" : "60px",
|
||||
height: "auto",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Title order={3} style={{ fontFamily: "Roboto", color: "white", marginBottom: 2 }}>
|
||||
<Title
|
||||
order={isMobile ? 4 : 3}
|
||||
style={{
|
||||
fontFamily: "Roboto",
|
||||
color: "white",
|
||||
marginBottom: 2,
|
||||
fontSize: isMobile ? "14px" : "22px",
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<Text size="xs" c="white" style={{ opacity: 0.85 }}>
|
||||
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
|
||||
</Text>
|
||||
|
||||
{!isMobile && (
|
||||
<Text size="xs" c="white" style={{ opacity: 0.85 }}>
|
||||
Head Office: Dharmshala, District Kangra (H.P), Pin: 176215
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</Group>
|
||||
|
||||
{/* Dark/Light Mode Toggle using Moon and Sun Icons */}
|
||||
<Group>
|
||||
{/* <Button
|
||||
onClick={toggleDarkMode}
|
||||
variant="subtle"
|
||||
color={darkMode ? "yellow" : "blue"}
|
||||
style={{ marginRight: 12 }}
|
||||
>
|
||||
{darkMode ? <IconSun size={20} /> : <IconMoon size={20} />}
|
||||
</Button> */}
|
||||
<Popover opened={userOpened} onChange={setUserOpened} position="bottom-end" withArrow shadow="md">
|
||||
<Popover.Target>
|
||||
{/* USER BUTTON */}
|
||||
<Popover
|
||||
opened={userOpened}
|
||||
onChange={setUserOpened}
|
||||
position="bottom-end"
|
||||
withArrow
|
||||
shadow="md"
|
||||
>
|
||||
<Popover.Target>
|
||||
<Button
|
||||
leftSection={<IconUserCircle size={isMobile ? 18 : 22} />}
|
||||
variant="subtle"
|
||||
onClick={() => setUserOpened((prev) => !prev)}
|
||||
color='white'
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
padding: isMobile ? "4px 8px" : "6px 12px",
|
||||
fontSize: isMobile ? "12px" : "14px",
|
||||
}}
|
||||
>
|
||||
Welcome, {firstName}
|
||||
</Button>
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown style={{ minWidth: 230, padding: 15 }}>
|
||||
<Stack gap="xs">
|
||||
<Box>
|
||||
<Text size="sm" fw={700}>{custname}</Text>
|
||||
<Text size="xs" c="dimmed">Full Name</Text>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Text size="sm">
|
||||
{userLastLoginDetails
|
||||
? new Date(userLastLoginDetails).toLocaleString()
|
||||
: "N/A"}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">Last Login</Text>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Button
|
||||
leftSection={<IconUserCircle size={22} />}
|
||||
variant="subtle"
|
||||
onClick={() => setUserOpened((prev) => !prev)}
|
||||
color='white'
|
||||
style={{ fontWeight: 500 }}
|
||||
leftSection={<IconLogout size={18} />}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
Welcome, {firstName}
|
||||
Logout
|
||||
</Button>
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown style={{ minWidth: 230, padding: 15 }}>
|
||||
<Stack gap="xs">
|
||||
<Box>
|
||||
<Text size="sm" fw={700}>{custname}</Text>
|
||||
<Text size="xs" c="dimmed">Full Name</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
<Text size="sm">
|
||||
{userLastLoginDetails
|
||||
? new Date(userLastLoginDetails).toLocaleString()
|
||||
: "N/A"}
|
||||
</Text>
|
||||
<Text size="xs" c="dimmed">Last Login</Text>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Button
|
||||
leftSection={<IconLogout size={18} />}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
Logout
|
||||
</Button>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Group>
|
||||
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Box>
|
||||
|
||||
{/* WELCOME + NAV */}
|
||||
{/* NAVBAR — desktop unchanged, mobile scrollable */}
|
||||
<Group
|
||||
style={{
|
||||
// padding: "0.8rem",
|
||||
background: "#d3f3bcff",
|
||||
// borderRadius: 8,
|
||||
boxShadow: "0 6px 6px rgba(0,0,0,0.06)",
|
||||
position:'sticky',
|
||||
top: 85,
|
||||
zIndex: 100,
|
||||
position: "sticky",
|
||||
top: isMobile ? 60 : 85,
|
||||
zIndex: 150,
|
||||
|
||||
/* MOBILE FIX 👉 make it scrollable */
|
||||
overflowX: isMobile ? "auto" : "visible",
|
||||
whiteSpace: isMobile ? "nowrap" : "normal",
|
||||
padding: isMobile ? "6px 4px" : "0.8rem",
|
||||
}}
|
||||
>
|
||||
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname.startsWith(item.href);
|
||||
const Icon = item.icon;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
style={{ textDecoration: "none" }}
|
||||
>
|
||||
<Link key={item.href} href={item.href} style={{ textDecoration: "none" }}>
|
||||
<Group
|
||||
gap={8}
|
||||
style={{
|
||||
padding: "12px 24px",
|
||||
// borderRadius: 10,
|
||||
padding: isMobile ? "10px 14px" : "12px 24px",
|
||||
// borderRadius: isMobile ? 6 : 8,
|
||||
width: "100%",
|
||||
transition: "0.2s ease",
|
||||
background: isActive ? "rgba(50, 159, 81, 1)" : "transparent",
|
||||
color: isActive ? "#10a44bff" : "#3b3b3b",
|
||||
color: isActive ? "white" : "#3b3b3b",
|
||||
fontWeight: isActive ? 600 : 500,
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
size={18}
|
||||
color={isActive ? "#0f100fea" : "#3b3b3b"}
|
||||
size={isMobile ? 16 : 18}
|
||||
color={isActive ? "white" : "#3b3b3b"}
|
||||
/>
|
||||
|
||||
<Text size="sm" c='black' fw={500}>
|
||||
<Text size={isMobile ? "xs" : "sm"} fw={500}>
|
||||
{item.label}
|
||||
</Text>
|
||||
</Group>
|
||||
</Link>
|
||||
|
||||
);
|
||||
})}
|
||||
</Group>
|
||||
|
||||
{/* CHILDREN */}
|
||||
{/* CONTENT */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#f5f7fa",
|
||||
padding: "1.5rem",
|
||||
padding: isMobile ? "0.8rem" : "1.5rem",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
style={{
|
||||
// maxWidth: "1200px",
|
||||
margin: "0 auto",
|
||||
background: "white",
|
||||
padding: "1.8rem",
|
||||
padding: isMobile ? "1rem" : "1.8rem",
|
||||
borderRadius: "12px",
|
||||
boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
|
||||
minHeight: "75vh",
|
||||
@@ -384,18 +395,19 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
||||
{/* FOOTER */}
|
||||
{/* FOOTER (desktop same, mobile stacked) */}
|
||||
<Box
|
||||
component="footer"
|
||||
style={(theme) => ({
|
||||
borderTop: `1px solid `,
|
||||
backgroundColor: 'rgba(60, 54, 74, 1)',
|
||||
paddingTop: '2rem',
|
||||
paddingBottom: '2rem',
|
||||
})}
|
||||
style={{
|
||||
backgroundColor: "rgba(60, 54, 74, 1)",
|
||||
paddingTop: "2rem",
|
||||
paddingBottom: "2rem",
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
<Container size="xl">
|
||||
<Grid>
|
||||
<Grid gutter="xl">
|
||||
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<Group mb="md">
|
||||
<Box
|
||||
@@ -404,96 +416,68 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
height: 40,
|
||||
background: 'linear-gradient(135deg, #16a34a 0%, #10b981 100%)',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: 8,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
fit="cover" // This ensures the image covers the circle
|
||||
fit="cover"
|
||||
alt="ebanking"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover", // Ensures the logo covers the whole circular area
|
||||
borderRadius: '50%',
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<div>
|
||||
<Text size="sm" fw={500}>
|
||||
The Kangra Central
|
||||
</Text>
|
||||
<Text size="sm" fw={500}>The Kangra Central</Text>
|
||||
<Text size="xs">Co-operative Bank Ltd</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Text size="sm" c="dimmed">
|
||||
Serving the community since inception. We are committed to providing quality
|
||||
banking services with personalized care and customer satisfaction.
|
||||
Serving the community since inception.
|
||||
</Text>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<Text size="sm" fw={500} mb="md">
|
||||
Quick Links
|
||||
</Text>
|
||||
<Text size="sm" fw={500} mb="md">Quick Links</Text>
|
||||
<Stack gap="xs">
|
||||
<Anchor href="#" size="sm" c="dimmed">
|
||||
About Us
|
||||
</Anchor>
|
||||
<Anchor href="#" size="sm" c="dimmed">
|
||||
Products & Services
|
||||
</Anchor>
|
||||
<Anchor href="#" size="sm" c="dimmed">
|
||||
Help & Support
|
||||
</Anchor>
|
||||
<Anchor href="#" size="sm" c="dimmed">
|
||||
Terms & Conditions
|
||||
</Anchor>
|
||||
<Anchor href="#" size="sm" c="dimmed">About Us</Anchor>
|
||||
<Anchor href="#" size="sm" c="dimmed">Products & Services</Anchor>
|
||||
<Anchor href="#" size="sm" c="dimmed">Help & Support</Anchor>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<Text size="sm" fw={500} mb="md">
|
||||
Contact Us
|
||||
</Text>
|
||||
<Text size="sm" fw={500} mb="md">Contact Us</Text>
|
||||
<Stack gap="xs">
|
||||
<Text size="sm" c="dimmed">
|
||||
Phone: +91-1800-1808008
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
Hours: Mon-Fri 10:00 AM - 4:00 PM
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">
|
||||
Sat 10:00 AM - 2:00 PM
|
||||
</Text>
|
||||
<Text size="sm" c="dimmed">Phone: +91-1800-1808008</Text>
|
||||
<Text size="sm" c="dimmed">Mon–Fri 10 AM – 4 PM</Text>
|
||||
<Text size="sm" c="dimmed">Sat 10 AM – 2 PM</Text>
|
||||
</Stack>
|
||||
</Grid.Col>
|
||||
|
||||
</Grid>
|
||||
|
||||
<Text
|
||||
size="sm"
|
||||
c="dimmed"
|
||||
ta="center"
|
||||
// mt="xl"
|
||||
// pt="xl"
|
||||
style={(theme) => ({
|
||||
borderTop: `1px solid `
|
||||
})}
|
||||
style={{ borderTop: "1px solid rgba(255,255,255,0.2)", marginTop: 20, paddingTop: 20 }}
|
||||
>
|
||||
© 2025 The Kangra Central Co-operative Bank Ltd. All rights reserved. | Privacy Policy |
|
||||
Security
|
||||
© 2025 The Kangra Central Co-operative Bank Ltd. All rights reserved.
|
||||
</Text>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
</Providers>
|
||||
</body>
|
||||
</html >
|
||||
</html>
|
||||
);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user