changes : Changes the design of IB
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import { Box, Burger, Button, Divider, Drawer, Stack, Text } from '@mantine/core';
|
||||
import { Box, Burger, Button, Divider, Drawer, ScrollArea, SegmentedControl, Stack, Text } from '@mantine/core';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
@@ -33,55 +33,62 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
|
||||
if (authorized) {
|
||||
return (
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: isMobile ? "column" : "row" }}>
|
||||
{/* Desktop Sidebar */}
|
||||
<Box style={{ display: "flex", height: "100%", flexDirection: "column" }}>
|
||||
{/* ---------------- 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" }}>
|
||||
My Accounts
|
||||
</Text>
|
||||
</Stack>
|
||||
<>
|
||||
{/* Segmented Tabs */}
|
||||
<Box mb="1rem">
|
||||
<ScrollArea type="never" offsetScrollbars>
|
||||
<SegmentedControl
|
||||
fullWidth
|
||||
value={pathname}
|
||||
onChange={(value) => router.push(value)}
|
||||
data={links.map((link) => ({
|
||||
label: link.label,
|
||||
value: link.href,
|
||||
}))}
|
||||
styles={{
|
||||
root: {
|
||||
backgroundColor: "#e9ecef",
|
||||
borderRadius: 999,
|
||||
padding: 4,
|
||||
},
|
||||
control: {
|
||||
borderRadius: 999,
|
||||
transition: "0.3s",
|
||||
},
|
||||
|
||||
<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>
|
||||
indicator: {
|
||||
borderRadius: 999,
|
||||
background: "linear-gradient(90deg, #02a355 0%, #5483c9ff 100%)",
|
||||
boxShadow: "0 3px 8px rgba(0,0,0,0.15)",
|
||||
},
|
||||
|
||||
label: {
|
||||
fontSize: 13,
|
||||
padding: "6px 10px",
|
||||
textAlign: "center",
|
||||
fontWeight: 600,
|
||||
color: "#000",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</ScrollArea>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Mobile: Burger & Drawer */}
|
||||
{/* ---------------- MOBILE TOP BAR ---------------- */}
|
||||
{isMobile && (
|
||||
<>
|
||||
{/* Top header with burger and title */}
|
||||
<Box
|
||||
style={{
|
||||
backgroundColor: "#228be6",
|
||||
// padding: "0.5rem 1rem",
|
||||
background: "linear-gradient(135deg, #1e88e5 0%, #1565c0 100%)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: "0.7rem 1rem",
|
||||
}}
|
||||
>
|
||||
<Burger
|
||||
@@ -90,11 +97,12 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
size="sm"
|
||||
color="white"
|
||||
/>
|
||||
<Text fw={500} c="white">
|
||||
My Accounts
|
||||
<Text fw={600} c="white">
|
||||
Send Money
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* MOBILE DRAWER */}
|
||||
<Drawer
|
||||
opened={drawerOpened}
|
||||
onClose={() => setDrawerOpened(false)}
|
||||
@@ -103,27 +111,31 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
overlayProps={{ color: "black", opacity: 0.55, blur: 3 }}
|
||||
styles={{
|
||||
root: {
|
||||
backgroundColor: "#e6f5ff", // soft background for drawer
|
||||
// borderLeft: "4px solid #228be6",
|
||||
// borderRadius: "8px",
|
||||
backgroundColor: "#eaf4ff",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* 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" }}
|
||||
>
|
||||
My Accounts
|
||||
</Text>
|
||||
</>
|
||||
{/* Drawer Header */}
|
||||
<Box
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={logo}
|
||||
alt="KCCB Logo"
|
||||
width={45}
|
||||
height={45}
|
||||
style={{ borderRadius: "50%" }}
|
||||
/>
|
||||
<Text fw={700} ml="10px" style={{ fontSize: "19px", color: "#1565c0" }}>
|
||||
Send Money
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
{/* Menu Items */}
|
||||
{/* Drawer Items */}
|
||||
<Stack gap="sm">
|
||||
{links.map((link) => {
|
||||
const isActive = pathname === link.href;
|
||||
@@ -138,22 +150,11 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
style={{
|
||||
justifyContent: "flex-start",
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
textDecoration: isActive ? "underline" : "none",
|
||||
color: isActive ? "#fff" : "#228be6",
|
||||
backgroundColor: isActive ? "#228be6" : "#dceeff",
|
||||
color: isActive ? "#fff" : "#1565c0",
|
||||
backgroundColor: isActive ? "#1565c0" : "#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";
|
||||
transition: "0.2s",
|
||||
}}
|
||||
onClick={() => setDrawerOpened(false)}
|
||||
>
|
||||
@@ -166,9 +167,14 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{/* Content Area */}
|
||||
<Box style={{ flex: 1, padding: isMobile ? "0.5rem" : "1rem", overflowY: "auto" }}>
|
||||
{/* ---------------- CONTENT AREA ---------------- */}
|
||||
<Box
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: isMobile ? "0.5rem" : "1rem",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user