Skip to content

feat(frontend): redesign dashboard layout with new navbar and sidebar #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
portableDD merged 2 commits into from
Jul 14, 2025
Merged

feat(frontend): redesign dashboard layout with new navbar and sidebar #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
689a47e
feat(frontend): redesign dashboard layout with new navbar and sidebar
Kaylahray Jul 11, 2025
6a83672
feat(frontend): slight fixes
Kaylahray Jul 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions app/dashboard/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,17 @@ export default function Layout({ children }: LayoutProps) {
const { isCollapsed } = useSidebarStore();

return (
<div className="bg-[#F0F0F0] min-h-screen">
<Navbar />
<div className="bg-bg-sidebar min-h-screen ">
<Sidebar />

{/* Main content */}
<div
className={`p-4 transition-all duration-300 ${
isCollapsed ? "lg:ml-16" : "lg:ml-64"
} pt-20`}>
<div className="p-4 rounded-lg min-h-[calc(100vh-120px)]">
{children}
</div>
className={`transition-all duration-300 md:pr-4 ${
isCollapsed ? "lg:ml-20" : "lg:ml-68"
}`}
>
<Navbar />
<div className="pt-20 min-h-[calc(100vh-80px)]">{children}</div>
</div>
</div>
);
Expand Down
219 changes: 148 additions & 71 deletions app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,25 @@
import { ArrowDown, ArrowUp, ChevronRight } from "lucide-react";
"use client";

import { useState } from "react";
import { Download, Upload, Copy, ChevronDown, Eye, EyeOff } from "lucide-react";
import { Button } from "@/components/ui/button";
import { BalanceCard } from "@/components/dashboard/home/balance-card";
import { PortfolioCard } from "@/components/dashboard/convert/portfolio-card";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { TransactionsTable } from "@/components/dashboard/transaction/transactions-table";

const portfolioData = [
{
symbol: "BTC",
value: 150.27,
change: 0.01,
isPositive: true,
},
{
symbol: "SOL",
value: 178.52,
change: -4.38,
isPositive: false,
},
{
symbol: "SOL",
value: 178.52,
change: -4.38,
isPositive: false,
},
{
symbol: "SOL",
value: 178.52,
change: -4.38,
isPositive: false,
},
];
import {
BalanceCard,
ActionButton,
MobileActionButton,
CurrencyDropdownItem,
CryptoRateCard,
currencyOptions,
mobileActions,
currencyValues,
cryptoRates,
} from "@/components/dashboard/home";

const transactionData = [
{
Expand Down Expand Up @@ -64,56 +54,143 @@ const transactionData = [
},
];

export default function Dashboard() {
export default function DashboardContent() {
const [balanceVisible, setBalanceVisible] = useState(true);
const [selectedCurrency, setSelectedCurrency] = useState("ETH");

return (
<div className="min-h-screen p-4 lg:p-6">
<div className="mx-auto max-w-7xl space-y-6">
{/* Header Actions */}
<div className="flex justify-end gap-3">
<Button className="bg-amber-900 hover:bg-amber-800 text-white rounded-full px-6 py-2 h-auto">
Deposit
<ArrowDown className="ml-2 h-4 w-4" />
</Button>
<Button
variant="secondary"
className="bg-gray-400 hover:bg-gray-500 text-white rounded-full px-6 py-2 h-auto">
Withdraw
<ArrowUp className="ml-2 h-4 w-4" />
</Button>
<div className="px-0 md:px-4 lg:px-0 w-full md:py-[2.25rem]">
<div className="w-full relative h-auto md:px-7 md:mt-20">
<div className="rounded-xl z-0 hidden md:block bg-[linear-gradient(240deg,rgba(160,195,253,0.80)_-1.74%,rgba(255,231,156,0.80)_99.3%)] absolute -top-20 inset-x-0 h-74 w-full p-6 mb-6">
<h2 className="text-text-primary font-semibold text-2xl leading-[140%] tracking-[0.48px]">
Overview
</h2>
</div>
<div
className="flex p-[1.411rem] h-full flex-col rounded-b-lg items-start relative z-20 gap-5 lg:gap-[3.5rem] self-stretch md:rounded-2xl
bg-[linear-gradient(240deg,rgba(160,195,253,0.40)_-1.74%,rgba(255,231,156,0.40)_99.3%)]
md:bg-bg-main-desktop md:bg-none
md:shadow-[8px_8px_9px_0px_rgba(0,0,0,0.15)]
shadow-[0px_0px_0px_0px_rgba(0,0,0,0.15)]"
>
<div className=" w-full flex flex-col gap-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-1">
<span className="text-text-secondary text-sm font-semibold leading-[140%]">
Total balance
</span>
<Button
variant="ghost"
size="sm"
onClick={() => setBalanceVisible(!balanceVisible)}
>
{balanceVisible ? (
<Eye className="h-4 w-4" />
) : (
<EyeOff className="h-4 w-4" />
)}
</Button>
</div>
<div className="md:flex p-[0.625rem] flex-col items-start hidden gap-[0.565rem] rounded-lg bg-brand-secondary">
<div className="flex items-center space-x-2 text-sm text-gray-500">
<span>0x5A8...beF1832</span>
<Button variant="ghost" size="sm">
<Copy className="h-6 w-6" />
</Button>
</div>
</div>
</div>

{/* Balance Card */}
<BalanceCard />
<div className=" flex items-baseline min-h-10">
<span className="text-text-naira text-[1.423rem] font-semibold leading-[100%] tracking-[-0.228px] opacity-90">
{balanceVisible ? "₦" : "₦"}
</span>
<span className="text-black text-[1.751rem] font-bold leading-[100%] tracking-[-0.28px] opacity-90">
{balanceVisible ? "325,980" : "••••••••"}
</span>
<span className="text-black text-[2.001rem] font-semibold leading-[100%] tracking-[-0.32px] opacity-90">
{balanceVisible ? "." : ""}
</span>
<span className="text-black text-[1.501rem] font-semibold leading-[100%] tracking-[-0.24px] opacity-90">
{balanceVisible ? "65" : ""}
</span>
</div>
</div>

{/* Portfolio Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{portfolioData.map((item, index) => (
<PortfolioCard
key={index}
symbol={item.symbol}
value={item.value}
change={item.change}
isPositive={item.isPositive}
/>
))}
<div className="md:flex space-x-4 hidden w-full">
<ActionButton icon={Download} label="Deposit" variant="primary" />
<ActionButton icon={Upload} label="Withdraw" variant="secondary" />
</div>

<div className="grid grid-cols-2 gap-4 w-full">
<BalanceCard title="NGN" value="₦250,250" />
<BalanceCard title="" value="">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="ghost"
className="flex p-[0.625rem] justify-start w-fit items-center gap-[0.5rem] rounded-lg bg-bg-dropdown hover:bg-bg-dropdown-hover"
>
<img
src={
currencyOptions.find((c) => c.code === selectedCurrency)
?.icon
}
alt={selectedCurrency}
width={16}
height={16}
/>
<span className="text-sm text-gray-600">
{selectedCurrency}
</span>
<ChevronDown className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-48">
{currencyOptions.map((currency) => (
<CurrencyDropdownItem
key={currency.code}
currency={currency}
onClick={() => setSelectedCurrency(currency.code)}
/>
))}
</DropdownMenuContent>
</DropdownMenu>
<div className="text-black text-[1.5rem] font-semibold leading-[140%]">
{currencyValues[selectedCurrency]}
</div>
</BalanceCard>
</div>
</div>
</div>

<div className="md:hidden px-2 md:px-0 grid grid-cols-3 gap-4 mt-8">
{mobileActions.map((action, index) => (
<MobileActionButton key={index} {...action} />
))}
</div>

{/* Recent Transactions */}
<div className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-xl font-semibold text-gray-900">
Recent Transactions
</h2>
<Button
variant="ghost"
className="text-gray-600 hover:text-gray-900">
See All
<ChevronRight className="ml-1 h-4 w-4" />
</Button>
<div className="my-4 px-2 md:px-0">
<div className="flex justify-between md:hidden mb-2 mt-14 items-center px-2">
<div className="text-black text-center text-[0.875rem] font-medium leading-[140%]">
Exchange Rates
</div>
<div className="text-text-see-all text-center text-[0.61rem] font-semibold leading-[140%] tracking-[0.195px]">
See All
</div>
</div>
<div className="flex gap-4 py-3 overflow-x-scroll w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
{cryptoRates.map((crypto, index) => (
<CryptoRateCard key={index} crypto={crypto} />
))}
</div>
</div>

<TransactionsTable transactions={transactionData} />
<div className="px-2 mt-10 md:mt-5 md:px-0">
<div className="flex p-4 justify-between items-center self-stretch bg-bg-transactions-header text-black text-center text-[0.875rem] md:text-[1.3125rem] font-medium leading-[140%]">
Recent Transactions
</div>
<TransactionsTable transactions={transactionData} />
</div>
</div>
);
Expand Down
7 changes: 7 additions & 0 deletions app/dashboard/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from "react";

const Settings = () => {
return <div>Settings</div>;
};

export default Settings;
98 changes: 96 additions & 2 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,48 @@
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);

/* Custom App Colors */
--color-brand-primary: var(--brand-primary);
--color-brand-primary-hover: var(--brand-primary-hover);
--color-brand-secondary: var(--brand-secondary);
--color-brand-secondary-hover: var(--brand-secondary-hover);
--color-text-primary: var(--text-primary);
--color-text-secondary: var(--text-secondary);
--color-text-tertiary: var(--text-tertiary);
--color-text-crypto-symbol: var(--text-crypto-symbol);
--color-text-crypto-name: var(--text-crypto-name);
--color-text-crypto-price: var(--text-crypto-price);
--color-text-success: var(--text-success);
--color-text-error: var(--text-error);
--color-text-muted: var(--text-muted);
--color-text-contact: var(--text-contact);
--color-text-link: var(--text-link);
--color-text-naira: var(--text-naira);
--color-text-see-all: var(--text-see-all);
--color-bg-main-desktop: var(--bg-main-desktop);
--color-bg-balance-card-desktop: var(--bg-balance-card-desktop);
--color-bg-sidebar: var(--bg-sidebar);
--color-bg-icon-container: var(--bg-icon-container);
--color-bg-input: var(--bg-input);
--color-bg-selector: var(--bg-selector);
--color-bg-conversion-form: var(--bg-conversion-form);
--color-bg-transactions-header: var(--bg-transactions-header);
--color-bg-glass-light: var(--bg-glass-light);
--color-bg-glass-medium: var(--bg-glass-medium);
--color-bg-dropdown: var(--bg-dropdown);
--color-bg-dropdown-hover: var(--bg-dropdown-hover);
--color-bg-selector-icon: var(--bg-selector-icon);
--color-bg-contact-blue: var(--bg-contact-blue);
--color-bg-contact-yellow: var(--bg-contact-yellow);
--color-border-crypto-card: var(--border-crypto-card);
--color-border-glass: var(--border-glass);
--color-success-bg: var(--success-bg);
--color-success-text: var(--success-text);
--color-error-bg: var(--error-bg);
--color-error-text: var(--error-text);
--color-contact-icon-blue: var(--contact-icon-blue);
--color-contact-icon-yellow: var(--contact-icon-yellow);
}

:root {
Expand Down Expand Up @@ -77,6 +119,59 @@
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);

/* Custom App Colors */
/* Brand Colors */
--brand-primary: #ffd552;
--brand-primary-hover: #e6c04a;
--brand-secondary: #e9eaee;
--brand-secondary-hover: #d3d4d8;

/* Text Colors */
--text-primary: #262626;
--text-secondary: #011028;
--text-tertiary: #5e5e5e;
--text-crypto-symbol: #070707;
--text-crypto-name: #adabb6;
--text-crypto-price: #000816;
--text-success: #009411;
--text-error: #c80808;
--text-muted: #787878;
--text-contact: #71717a;
--text-link: #3c78f4;
--text-naira: rgba(54, 54, 54, 0.7);
--text-see-all: rgba(48, 48, 48, 0.8);

/* Background Colors */
--bg-main-desktop: #fbfbfb;
--bg-balance-card-desktop: #eff0f5;
--bg-sidebar: #f5f5f5;
--bg-icon-container: #f5f5f5;
--bg-input: #e5e5e5;
--bg-selector: #ebebeb;
--bg-conversion-form: #efeded;
--bg-transactions-header: rgba(206, 206, 206, 0.15);
--bg-glass-light: rgba(255, 255, 255, 0.3);
--bg-glass-medium: rgba(255, 255, 255, 0.6);
--bg-dropdown: rgba(224, 224, 224, 0.6);
--bg-dropdown-hover: rgba(224, 224, 224, 0.7);
--bg-selector-icon: rgba(183, 183, 183, 0.6);
--bg-contact-blue: #d9e9ff;
--bg-contact-yellow: #fdfcbd;

/* Border Colors */
--border-crypto-card: rgba(121, 121, 121, 0.4);
--border-glass: rgba(255, 255, 255, 0.3);

/* Success/Error States */
--success-bg: rgba(27, 183, 45, 0.2);
--success-text: rgba(0, 148, 17, 0.9);
--error-bg: rgba(200, 8, 8, 0.2);
--error-text: rgba(200, 8, 8, 0.9);

/* Contact Page Colors */
--contact-icon-blue: #3c78f4;
--contact-icon-yellow: #e8b300;
}

.dark {
Expand Down Expand Up @@ -121,5 +216,4 @@
body {
@apply bg-background text-foreground;
}

}
}
Loading
Loading