Skip to content

feat: compact dashboard layout with a collapsible sidebar and hamburger #205

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

Open
Atharva0506 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat: compact dashboard layout with a collapsible sidebar and hamburger #205

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5cfebac
feat(dashboard): compact spacing and a hamburger drawer for the sidebar
Atharva0506 Aug 22, 2026
41a9627
feat(dashboard): align page blocks and add a collapsible desktop rail
Atharva0506 Aug 22, 2026
48d9f02
refactor(dashboard): put the rail greeting on the toggle's row
Atharva0506 Aug 22, 2026
0c09e95
fix(dashboard): close the nav drawer at lg and tidy the shell helpers
Atharva0506 Aug 29, 2026
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
6 changes: 5 additions & 1 deletion frontend/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { motion, AnimatePresence } from "framer-motion";
import CloseIcon from "@mui/icons-material/Close";
import MenuIcon from "@mui/icons-material/Menu";
import InfoIcon from "@mui/icons-material/Info";
import { cn } from "@/lib/utils";
import { SHELL } from "@/utils/layout";

function Navbar() {
const { address, isConnected } = useAccount();
Expand Down Expand Up @@ -138,7 +140,9 @@ function Navbar() {
: "bg-[#161920]"
}`}
>
<div className="max-w-full mx-auto px-4 sm:px-6 lg:px-8 z-10">
{/* Shares the page shell's cap so the logo and wallet button line up with
the content edges instead of hugging the screen on a wide display. */}
<div className={cn(SHELL, "z-10")}>
<div className="flex justify-between items-center h-24">
<motion.div
whileHover={{ scale: 1.05 }}
Expand Down
15 changes: 10 additions & 5 deletions frontend/src/components/UserProfileSettings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,16 @@ export default function UserProfileSettings() {
onSubmit={handleSubmit}
className="bg-white p-4 sm:p-6 rounded-xl border border-gray-100 shadow-sm"
>
<div className="flex flex-wrap items-center justify-between gap-2 mb-4">
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
<User className="text-gray-600 w-5 h-5" />
Your Information
</h3>
<div className="flex flex-wrap items-start justify-between gap-2 mb-4">
<div>
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
<User className="text-gray-600 w-5 h-5" />
Your Information
</h3>
<p className="mt-0.5 text-sm text-gray-500">
Applied as the sender on every invoice. Saved on this device only.
</p>
</div>
{!loading && isComplete && (
<span className="flex items-center gap-1.5 text-xs font-medium text-green-700 bg-green-50 border border-green-200 rounded-full px-2.5 py-1">
<CheckCircle2 className="h-3.5 w-3.5" />
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/page/Applayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ function Applayout() {
return (
<div className="flex flex-col min-h-screen overflow-x-hidden bg-[#161920]">
<Navbar />
<main className="flex-1 pt-20 w-full max-w-[100vw] overflow-x-hidden">
{/* Navbar is fixed at h-24, so the offset has to match it exactly —
pt-20 left content tucked 16px underneath. */}
<main className="flex-1 pt-24 w-full max-w-[100vw] overflow-x-hidden">
<Outlet />
</main>
</div>
Expand Down
58 changes: 31 additions & 27 deletions frontend/src/page/CreateInvoice.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ import { toInvoiceUserDetails } from "@/utils/userProfile";
import { useUserProfile } from "@/hooks/useUserProfile";
import OnboardingProfileDialog from "@/components/OnboardingProfileDialog";
import SenderSummary from "@/components/SenderSummary";
import { CARD, PAGE_CONTAINER } from "@/utils/layout";
import toast from "react-hot-toast";
import { storeInvoice } from "../services/invoiceStorage/invoiceDB.js";
import { computeInvoiceHash } from "../services/relay/invoiceHashUtils.js";
Expand Down Expand Up @@ -798,7 +799,7 @@ function CreateInvoice() {
</div>

{showUnsupportedNetwork && (
<div className="w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6">
<div className={PAGE_CONTAINER}>
<div className="bg-white border border-amber-200 rounded-lg p-6 shadow-sm">
<h2 className="text-xl font-bold mb-2 text-gray-800">
Unsupported network
Expand All @@ -812,16 +813,11 @@ function CreateInvoice() {
</div>
)}

<div
className={cn(
"w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6",
showUnsupportedNetwork && "hidden"
)}
>
<div className={cn(PAGE_CONTAINER, showUnsupportedNetwork && "hidden")}>
{(searchParams.get("clientAddress") ||
searchParams.get("amount") ||
searchParams.get("description")) && (
<div className="mb-6 bg-green-50 border border-green-200 rounded-lg p-4 overflow-hidden">
<div className="mb-3 bg-green-50 border border-green-200 rounded-lg p-3 overflow-hidden">
<div className="flex items-center gap-3">
<CheckCircle2 className="h-5 w-5 text-green-600" />
<div>
Expand All @@ -837,56 +833,60 @@ function CreateInvoice() {
</div>
)}

<div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 mb-4 sm:mb-6">
<div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 mb-3">
<h2 className="text-xl sm:text-2xl font-bold text-white">
Create New Invoice
</h2>
<SenderSummary />
</div>

<div className="flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-3 sm:gap-4 mb-6 sm:mb-8 bg-gray-50 p-4 rounded-lg shadow-sm overflow-hidden">
{/* Full width so its right edge lands on the same line as the Payment
Currency card and the items table below. Every block on the page
shares one left and one right edge. */}
<div className="w-full flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-2 sm:gap-3 mb-3 sm:mb-4 bg-gray-50 p-3 rounded-lg shadow-sm overflow-hidden">
<div className="flex items-center space-x-2 w-full sm:w-auto">
<Label className="text-sm sm:text-md font-medium text-gray-700">
<Label className="text-sm font-medium text-gray-700">
Invoice #
</Label>
<Input
value="1"
className="w-24 bg-gray-100 border-gray-300 text-gray-700"
className="w-16 bg-gray-100 border-gray-300 text-gray-700"
disabled
/>
</div>

<div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-2 w-full sm:w-auto">
<Label className="text-sm sm:text-md font-medium text-gray-700">
<Label className="text-sm font-medium text-gray-700">
Issued Date
</Label>
<Button
type="button"
className={cn(
"w-full sm:w-[220px] justify-start text-left font-normal bg-white border border-gray-300 text-gray-700 hover:bg-gray-50",
"w-full sm:w-auto justify-start text-left font-normal bg-white border border-gray-300 text-gray-700 hover:bg-gray-50",
!issueDate && "text-black"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{format(issueDate, "PPP")}
{format(issueDate, "PP")}
</Button>
</div>

<div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-2 w-full sm:w-auto">
<Label className="text-sm sm:text-md font-medium text-gray-700">
<Label className="text-sm font-medium text-gray-700">
Due Date
</Label>
<Popover>
<PopoverTrigger asChild>
<Button
variant="outline"
className={cn(
"w-full sm:w-[220px] justify-start text-left font-normal text-gray-700",
"w-full sm:w-auto justify-start text-left font-normal text-gray-700",
!dueDate && "text-muted-foreground"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{dueDate ? (
format(dueDate, "PPP")
format(dueDate, "PP")
) : (
<span className="text-gray-700">Pick a due date</span>
)}
Expand Down Expand Up @@ -915,9 +915,11 @@ function CreateInvoice() {
<form onSubmit={handleSubmit}>
{/* Client details and payment token sit side by side so the invoice
items stay above the fold on desktop. */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-6 sm:mb-8 items-start">
{/* items-stretch keeps both cards the same height; the two differ a
lot in content and a ragged bottom edge reads as unfinished. */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4 mb-3 sm:mb-4 items-stretch">
{/* Client Information — the sender's own details come from Settings */}
<div className="w-full border border-gray-200 p-4 sm:p-6 rounded-lg shadow-sm bg-white overflow-hidden">
<div className={CARD}>
<h3 className="text-base sm:text-lg font-semibold mb-4 text-gray-800">
Client Information
</h3>
Expand Down Expand Up @@ -1122,7 +1124,7 @@ function CreateInvoice() {
</div>
</div>

<div className="bg-white p-4 sm:p-6 rounded-lg border border-gray-200 shadow-sm overflow-hidden">
<div className={CARD}>
<h3 className="text-lg font-semibold text-gray-800 mb-4 flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -1364,7 +1366,7 @@ function CreateInvoice() {


{/* Invoice Items Section */}
<div className="mb-6 sm:mb-8">
<div className="mb-4">
{/* Desktop Header - Hidden on mobile */}
<div className="hidden md:grid bg-green-500 text-white py-3 px-4 rounded-t-lg font-medium text-sm gap-2 items-center" style={{ gridTemplateColumns: 'repeat(16, minmax(0, 1fr))' }}>
<div className="col-span-4">DESCRIPTION</div>
Expand Down Expand Up @@ -1414,7 +1416,7 @@ function CreateInvoice() {
</div>

<div className="border border-gray-200 rounded-b-lg bg-white">
<div className="p-3 sm:p-4 space-y-4 md:space-y-3">
<div className="p-2 sm:p-3 space-y-3 md:space-y-2">
{itemData.map((item, index) => (
<div className="relative" key={item.id} style={{ zIndex: Math.max(1, 50 - index) }}>
{/* Mobile Layout - Stacked */}
Expand Down Expand Up @@ -1710,8 +1712,10 @@ function CreateInvoice() {
Add Item
</Button>

<div className="bg-gray-50 p-2 rounded-lg w-full md:w-1/3">
<div className="flex justify-between items-center mb-2">
{/* Capped rather than a fraction of the row: at 1/3 of a wide
content column the label and amount drifted far apart. */}
<div className="bg-gray-50 p-2 rounded-lg w-full sm:w-auto sm:min-w-[260px]">
<div className="flex justify-between items-center gap-6">
<span className="font-medium text-gray-700">Total:</span>
<span className="font-bold text-lg text-black">
{totalAmountDue}{" "}
Expand All @@ -1722,7 +1726,7 @@ function CreateInvoice() {
</div>
{totalAmountError && (
<div className="flex items-center justify-end gap-1.5 mt-1 text-red-600">
<AlertCircle className="w-4 h-4" />
<AlertCircle className="w-4 h-4 shrink-0" />
<span className="text-sm font-medium">{totalAmountError}</span>
</div>
)}
Expand All @@ -1731,7 +1735,7 @@ function CreateInvoice() {
</div>

{/* Form Actions */}
<div className="flex flex-col-reverse sm:flex-row justify-between items-center gap-4 mt-6">
<div className="flex flex-col-reverse sm:flex-row justify-between items-center gap-3 mt-4 pb-4">
<Button
className="bg-green-600 hover:bg-green-700 px-8 py-2 text-white"
type="submit"
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/page/CreateInvoicesBatch.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ import { toInvoiceUserDetails } from "@/utils/userProfile";
import { useUserProfile } from "@/hooks/useUserProfile";
import OnboardingProfileDialog from "@/components/OnboardingProfileDialog";
import SenderSummary from "@/components/SenderSummary";
import { CARD, PAGE_CONTAINER, PAGE_HEADER, SECTION_GAP } from "@/utils/layout";

import ProductAutocompleteInput from "@/components/ProductAutocompleteInput";
import { useProductCatalog } from "@/hooks/useProductCatalog";
Expand Down Expand Up @@ -835,9 +836,9 @@ function CreateInvoicesBatch() {
/>
</div>

<div className="w-full max-w-7xl mx-auto px-2 sm:px-4 md:px-6">
<div className={PAGE_CONTAINER}>
{/* Simple Header */}
<div className="mb-6 sm:mb-8">
<div className={PAGE_HEADER}>
<h2 className="text-2xl sm:text-3xl font-bold text-white mb-2">
Create Multiple Invoices
</h2>
Expand All @@ -849,7 +850,7 @@ function CreateInvoicesBatch() {
</div>

{/* Clean Date Selection */}
<div className="w-full bg-white p-4 sm:p-6 rounded-lg shadow-sm mb-6 sm:mb-8 border border-gray-200 overflow-hidden">
<div className={cn(CARD, SECTION_GAP)}>
<div className="flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center gap-4 sm:gap-6">
<div className="flex items-center space-x-3 w-full sm:w-auto">
<div className="flex items-center justify-center gap-3">
Expand Down Expand Up @@ -955,7 +956,7 @@ function CreateInvoicesBatch() {

<form onSubmit={handleSubmit}>
{/* Clean Token Selection */}
<div className="w-full mb-6 sm:mb-8 bg-white p-4 sm:p-6 rounded-lg border border-gray-200 shadow-sm overflow-hidden">
<div className={cn(CARD, SECTION_GAP)}>
<h3 className="text-lg font-semibold text-gray-800 mb-4">
Payment Currency
</h3>
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/page/GenerateLink.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ import { Badge } from "@/components/ui/badge";
import { BrowserProvider, ethers } from "ethers";
import { ERC20_ABI } from "@/contractsABI/ERC20_ABI";
import { useTokenList } from "../hooks/useTokenList";
import { PAGE_CONTAINER } from "@/utils/layout";
import { cn } from "@/lib/utils";

const GenerateLink = () => {
const { address, isConnected, chainId } = useAccount();
Expand Down Expand Up @@ -130,7 +132,7 @@ const GenerateLink = () => {
/>
</div>

<div className="w-full max-w-7xl mx-auto space-y-6 px-2 sm:px-4 md:px-6 transition-all duration-300">
<div className={cn(PAGE_CONTAINER, "space-y-4 transition-all duration-300")}>
<div className="mb-6 sm:mb-8">
<h2 className="text-xl sm:text-2xl font-bold text-white mb-2 flex items-center gap-2 sm:gap-3">
<div className="w-8 h-8 sm:w-10 sm:h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
Expand Down
Loading
Loading