tomosa.sarkar/IB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: make screen responsive for mobile and browser.

Browse Source
This commit is contained in:
Tomosa Sarkar
2025-10-07 12:46:04 +05:30
parent 649fc5acea
commit 72b0fa4378
12 changed files with 1060 additions and 587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/app/(main)/settings/layout.tsx
View File

@@ -1,14 +1,19 @@
"use client";
import { Divider, Stack, Text } from '@mantine/core';
import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import React, { useEffect, useState } from 'react';
import { useRouter } from "next/navigation";
import { useMediaQuery } from '@mantine/hooks';
import Image from "next/image";
import logo from "@/app/image/logo1.jpg";
export default function Layout({ children }: { children: React.ReactNode }) {
const [authorized, SetAuthorized] = useState<boolean | null>(null);
const router = useRouter();
const pathname = usePathname();
const isMobile = useMediaQuery("(max-width: 768px)");
const [drawerOpened, setDrawerOpened] = useState(false);
const links = [
{ label: "View Profile", href: "/settings" },
@@ -30,45 +35,143 @@ export default function Layout({ children }: { children: React.ReactNode }) {
if (authorized) {
return (
<div style={{ display: "flex", height: '100%' }}>
<div
style={{
width: "16%",
backgroundColor: '#c5e4f9',
borderRight: "1px solid #ccc",
}}
>
<Stack style={{ background: '#228be6', height: '10%', alignItems: 'center' }}>
<Text fw={700} c='white' style={{ textAlign: 'center', marginTop: '10px' }}>
Settings
</Text>
</Stack>
<Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
{/* Desktop Sidebar */}
{!isMobile && (
<Box
style={{
width: "16%",
backgroundColor: "#c5e4f9",
borderRight: "1px solid #ccc",
}}
>
<Stack style={{ background: "#228be6", height: "10%", alignItems: "center" }}>
<Text fw={700} c="white" style={{ textAlign: "center", marginTop: "10px" }}>
Settings
</Text>
</Stack>
<Stack gap="sm" justify="flex-start" style={{ padding: '1rem' }}>
{links.map(link => {
const isActive = pathname === link.href;
return (
<Text
key={link.href}
component={Link}
href={link.href}
c={isActive ? 'darkblue' : 'blue'}
style={{
textDecoration: isActive ? 'underline' : 'none',
fontWeight: isActive ? 600 : 400,
}}
>
{link.label}
</Text>
);
})}
</Stack>
</div>
<Stack gap="sm" justify="flex-start" style={{ padding: "1rem" }}>
{links.map((link) => {
const isActive = pathname === link.href;
return (
<Text
key={link.href}
component={Link}
href={link.href}
c={isActive ? "darkblue" : "blue"}
style={{
textDecoration: isActive ? "underline" : "none",
fontWeight: isActive ? 600 : 400,
}}
>
{link.label}
</Text>
);
})}
</Stack>
</Box>
)}
<div style={{ flex: 1, padding: '1rem' }}>
{/* Mobile: Burger & Drawer */}
{isMobile && (
<>
{/* Top header with burger and title */}
<Box
style={{
backgroundColor: "#228be6",
// padding: "0.5rem 1rem",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Burger
opened={drawerOpened}
onClick={() => setDrawerOpened(!drawerOpened)}
size="sm"
color="white"
/>
<Text fw={500} c="white">
Settings
</Text>
</Box>
<Drawer
opened={drawerOpened}
onClose={() => setDrawerOpened(false)}
padding="md"
size="75%"
overlayProps={{ color: "black", opacity: 0.55, blur: 3 }}
styles={{
root: {
backgroundColor: "#e6f5ff", // soft background for drawer
},
}}
>
{/* Logo and Drawer Header */}
<Box style={{ display: "flex", alignItems: "center", marginBottom: "1rem" }}>
<>
<Image src={logo} alt="KCCB Logo" width={40} height={40} style={{ borderRadius: "50%" }} />
<Text
fw={700}
ml="10px"
style={{ fontSize: "18px", color: "#228be6" }}
>
Settings
</Text>
</>
</Box>
{/* Menu Items */}
<Stack gap="sm">
{links.map((link) => {
const isActive = pathname === link.href;
return (
<Button
key={link.href}
variant="subtle"
component={Link}
href={link.href}
fullWidth
style={{
justifyContent: "flex-start",
fontWeight: isActive ? 600 : 400,
textDecoration: isActive ? "underline" : "none",
color: isActive ? "#fff" : "#228be6",
backgroundColor: isActive ? "#228be6" : "#dceeff",
borderRadius: "8px",
padding: "10px 12px",
transition: "0.3s",
}}
onMouseEnter={(e) => {
const target = e.currentTarget as unknown as HTMLElement;
target.style.backgroundColor = "#228be6";
target.style.color = "#fff";
}}
onMouseLeave={(e) => {
const target = e.currentTarget as unknown as HTMLElement;
target.style.backgroundColor = isActive ? "#228be6" : "#dceeff";
target.style.color = isActive ? "#fff" : "#228be6";
}}
onClick={() => setDrawerOpened(false)}
>
{link.label}
</Button>
);
})}
</Stack>
</Drawer>
</>
)}
{/* Content Area */}
<Box style={{ flex: 1, padding: isMobile ? "0.5rem" : "1rem", overflowY: "auto" }}>
{children}
</div>
</div>
</Box>
</Box>
);
}
}