wip: make screen responsive for mobile and browser.
This commit is contained in:
@@ -8,7 +8,7 @@ import { Providers } from '../providers';
|
||||
import logo from '@/app/image/logo1.jpg';
|
||||
import NextImage from 'next/image';
|
||||
import { notifications } from '@mantine/notifications';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import { useDisclosure, useMediaQuery } from '@mantine/hooks';
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
const router = useRouter();
|
||||
@@ -16,7 +16,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
const [authorized, SetAuthorized] = useState<boolean | null>(null);
|
||||
const [userLastLoginDetails, setUserLastLoginDetails] = useState(null);
|
||||
const [custname, setCustname] = useState<string | null>(null);
|
||||
|
||||
const isMobile = useMediaQuery("(max-width: 768px)");
|
||||
|
||||
const [opened, { open, close }] = useDisclosure(false);
|
||||
|
||||
@@ -167,104 +167,84 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
<html lang="en">
|
||||
<body>
|
||||
<Providers>
|
||||
<div style={{ backgroundColor: "#e6ffff", height: "100vh", display: "flex", flexDirection: "column", padding: 0, margin: 0 }}>
|
||||
<Box style={{ backgroundColor: "#e6ffff", minHeight: "100vh", display: "flex", flexDirection: "column", padding: 0, margin: 0 }}>
|
||||
|
||||
{/* HEADER */}
|
||||
<Box
|
||||
style={{
|
||||
height: "60px",
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
height: "60px",
|
||||
// flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "flex-start",
|
||||
// padding: isMobile ? "0.5rem" : "0.5rem 1rem",
|
||||
background: "linear-gradient(15deg,rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%)",
|
||||
position: "relative",
|
||||
// position: "fixed",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
fit="cover"
|
||||
src={logo}
|
||||
component={NextImage}
|
||||
alt="ebanking"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
<Title
|
||||
order={2}
|
||||
style={{
|
||||
fontFamily: 'Roboto',
|
||||
position: 'absolute',
|
||||
top: '30%',
|
||||
left: '6%',
|
||||
color: 'White',
|
||||
transition: "opacity 0.5s ease-in-out",
|
||||
}}
|
||||
>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<Text
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '80%',
|
||||
color: 'white',
|
||||
textShadow: '1px 1px 2px black',
|
||||
}}
|
||||
>
|
||||
<IconPhoneFilled size={20} /> Toll Free No : 1800-180-8008
|
||||
</Text>
|
||||
{/* Logo */}
|
||||
<Box style={{ width: isMobile ? "48px" : "65px", height: isMobile ? "50px" : "60px" }}>
|
||||
<Image src={logo} component={NextImage} alt="ebanking" style={{ width: "100%", height: "100%" }} />
|
||||
</Box>
|
||||
|
||||
{/* Title & Phone */}
|
||||
<Stack gap={isMobile ? 2 : 0} style={{ flex: 1, textAlign: isMobile ? "center" : "left", marginLeft: isMobile ? 0 : "1rem" }}>
|
||||
<Title order={isMobile ? 5 : 2} style={{ color: "white", fontFamily: "Roboto", lineHeight: 1.2 }}>
|
||||
THE KANGRA CENTRAL CO-OPERATIVE BANK LTD.
|
||||
</Title>
|
||||
<Text style={{ color: "white", fontSize: isMobile ? "0.8rem" : "0.9rem", textShadow: "1px 1px 2px black" }}>
|
||||
<IconPhoneFilled size={isMobile ? 16 : 20} /> Toll Free No : 1800-180-8008
|
||||
</Text>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<div
|
||||
{/* WELCOME + NAV */}
|
||||
<Box
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
padding: '0.5rem 1rem',
|
||||
padding: isMobile ? "0.5rem" : "0.5rem 1rem",
|
||||
display: "flex",
|
||||
justifyContent: 'space-between',
|
||||
alignItems: "center",
|
||||
flexDirection: isMobile ? "column" : "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: isMobile ? "flex-start" : "center",
|
||||
gap: isMobile ? "0.5rem" : 0,
|
||||
}}
|
||||
>
|
||||
<Stack gap={0} align="flex-start">
|
||||
<Title order={4} style={{ fontFamily: "inter", fontSize: '22px' }}>
|
||||
<Stack gap={isMobile ? 2 : 0} align={isMobile ? "flex-start" : "flex-start"}>
|
||||
<Title order={isMobile ? 5 : 4} style={{ fontFamily: "inter", fontSize: isMobile ? "18px" : "22px" }}>
|
||||
Welcome, {custname ?? null}
|
||||
</Title>
|
||||
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: '13px' }}>
|
||||
<Text size="xs" c="gray" style={{ fontFamily: "inter", fontSize: isMobile ? "11px" : "13px" }}>
|
||||
Last logged in at {userLastLoginDetails ? new Date(userLastLoginDetails).toLocaleString() : "N/A"}
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Group mt="md" gap="sm">
|
||||
<Group mt={isMobile ? "sm" : "md"} gap="sm" style={{ flexWrap: isMobile ? "wrap" : "nowrap" }}>
|
||||
{navItems.map((item) => {
|
||||
const isActive = pathname.startsWith(item.href);
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<Button
|
||||
leftSection={<Icon size={20} />}
|
||||
leftSection={<Icon size={isMobile ? 16 : 20} />}
|
||||
variant={isActive ? "dark" : "subtle"}
|
||||
color={isActive ? "blue" : undefined}
|
||||
size={isMobile ? "xs" : "sm"}
|
||||
>
|
||||
{item.label}
|
||||
</Button>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
{/* <Button leftSection={<IconLogout size={20} />} variant="subtle" onClick={handleLogout}>
|
||||
Logout
|
||||
</Button> */}
|
||||
<Popover
|
||||
opened={opened}
|
||||
onChange={close}
|
||||
position="bottom-end" // 👈 Logout button ke niche right align
|
||||
withArrow
|
||||
shadow="md"
|
||||
>
|
||||
|
||||
<Popover opened={opened} onChange={close} position="bottom-end" withArrow shadow="md">
|
||||
<Popover.Target>
|
||||
<Button
|
||||
leftSection={<IconLogout size={20} />}
|
||||
variant="subtle"
|
||||
onClick={open}
|
||||
>
|
||||
<Button leftSection={<IconLogout size={isMobile ? 16 : 20} />} variant="subtle" size={isMobile ? "xs" : "sm"} onClick={open}>
|
||||
Logout
|
||||
</Button>
|
||||
</Popover.Target>
|
||||
|
||||
<Popover.Dropdown>
|
||||
<Text size="sm" mb="sm">
|
||||
Are you sure you want to logout?
|
||||
@@ -273,30 +253,31 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
<Button variant="default" onClick={close}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleLogout}>
|
||||
Logout
|
||||
</Button>
|
||||
<Button onClick={handleLogout}>Logout</Button>
|
||||
</Group>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Group>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Divider size="xs" color='#99c2ff' />
|
||||
<Divider size="xs" color="#99c2ff" />
|
||||
|
||||
<div
|
||||
{/* CHILDREN */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
overflowY: "auto",
|
||||
borderTop: '1px solid #ddd',
|
||||
borderBottom: '1px solid #ddd',
|
||||
borderTop: "1px solid #ddd",
|
||||
borderBottom: "1px solid #ddd",
|
||||
// padding: isMobile ? "0.5rem" : "1rem",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
<Divider size="xs" color='blue' />
|
||||
<Divider size="xs" color="blue" />
|
||||
|
||||
{/* FOOTER */}
|
||||
<Box
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
@@ -304,14 +285,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#f8f9fa",
|
||||
marginTop: "0.5rem",
|
||||
// padding: isMobile ? "0.25rem" : "0.5rem",
|
||||
}}
|
||||
>
|
||||
<Text c="dimmed" size="xs">
|
||||
<Text c="dimmed" size={isMobile ? "xs" : "sm"}>
|
||||
© 2025 The Kangra Central Co-Operative Bank
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
</Box>
|
||||
</Providers>
|
||||
</body>
|
||||
</html >
|
||||
|
||||
Reference in New Issue
Block a user