Skip to content

Commit d9e8508

Browse files
kanekoshoyukanekoshoyu
committed
menu
1 parent 6e406cf commit d9e8508

File tree

5 files changed

+62
-91
lines changed

5 files changed

+62
-91
lines changed

‎src/components/interactive/Sidebar.tsx‎

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,16 @@ import {
66
Home,
77
FileText,
88
ListChecks,
9-
Menu, // ✅ add hamburger icon
9+
Menu,
1010
LogOut,
1111
} from "lucide-react";
1212
import { Button } from "@/components/ui/button";
1313
import { ScrollArea } from "@/components/ui/scroll-area";
14-
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
14+
import {
15+
Sheet,
16+
SheetContent,
17+
SheetTrigger,
18+
} from "@/components/ui/sheet";
1519
import { KEYWORDS } from "@/constant";
1620

1721
type NavItem = {
@@ -30,22 +34,17 @@ const navItems: NavItem[] = [
3034

3135
function NavLink({ item, active }: { item: NavItem; active?: boolean }) {
3236
const Icon = item.icon;
33-
34-
const baseClasses = "flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors";
35-
const normalClasses = active
36-
? "bg-accent text-accent-foreground"
37-
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground";
38-
const logoutClasses = "text-red-600 hover:bg-red-50 hover:text-red-700";
39-
40-
const className = cn(
41-
baseClasses,
42-
item.isLogout ? logoutClasses : normalClasses
43-
);
4437

4538
return (
4639
<a
4740
href={item.href}
48-
className={className}
41+
className={cn(
42+
"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
43+
active
44+
? "bg-accent text-accent-foreground"
45+
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground",
46+
item.isLogout && "text-red-600 hover:bg-red-50 hover:text-red-700"
47+
)}
4948
>
5049
<span className="flex h-8 w-8 items-center justify-center rounded-md border bg-muted">
5150
<Icon className="h-4 w-4" />
@@ -56,9 +55,6 @@ function NavLink({ item, active }: { item: NavItem; active?: boolean }) {
5655
}
5756

5857
export function Sidebar() {
59-
const [open, setOpen] = React.useState(false);
60-
61-
// Determine active path (works without react-router)
6258
const activePath =
6359
typeof window !== "undefined"
6460
? window.location.pathname.replace(/\/+$/, "") || "/"
@@ -71,19 +67,18 @@ export function Sidebar() {
7167

7268
return (
7369
<div className="flex">
74-
{/* Mobile hamburger trigger */}
70+
{/* Mobile: hamburger trigger */}
7571
<div className="lg:hidden p-2">
76-
<Sheet open={open} onOpenChange={setOpen}>
72+
<Sheet>
7773
<SheetTrigger asChild>
7874
<Button variant="outline" size="icon">
79-
{/* ✅ icon-only button */}
8075
<Menu className="h-5 w-5" />
8176
<span className="sr-only">Open Menu</span>
8277
</Button>
8378
</SheetTrigger>
84-
<SheetContent side="left" className="w-72 p-0">
79+
<SheetContent side="left" className="w-72 p-0 bg-background">
8580
<div className="p-4 border-b">
86-
<div className="text-sm text-muted-foreground">Welcome</div>
81+
<div className="text-sm text-muted-foreground">Current Team</div>
8782
<div className="font-semibold">{KEYWORDS.name}</div>
8883
</div>
8984
<ScrollArea className="h-full px-2 py-4">
@@ -101,11 +96,11 @@ export function Sidebar() {
10196
</Sheet>
10297
</div>
10398

104-
{/* Desktop sidebar */}
105-
<aside className="hidden lg:flex lg:flex-col lg:w-64 shrink-0 border-r bg-muted/30 h-[100dvh] sticky top-0">
99+
{/* Desktop: persistent sidebar */}
100+
<aside className="hidden lg:flex lg:flex-col lg:w-64 shrink-0 border-r bg-background h-[100dvh] sticky top-0">
106101
<div className="px-5 pt-6 pb-4 border-b">
107102
<div className="text-xs uppercase tracking-wide text-muted-foreground">
108-
Welcome
103+
Current Team
109104
</div>
110105
<div className="mt-1 text-base font-semibold">{KEYWORDS.name}</div>
111106
</div>

‎src/pages/dashboard/index.astro‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
11
---
22
import Layout from "@/layouts/Layout.astro";
3-
import Header from "@/components/Header.astro";
43
import Footer from "@/components/Footer.astro";
54
import { Sidebar } from "@/components/interactive/Sidebar";
65
import AuthGuard from "@/components/interactive/AuthGuard";
76
---
87

98
<Layout title="Home - Bounteer">
109
<AuthGuard client:load>
11-
<main class="bg-gray-50">
12-
<section class="container-custom lg:max-w-none lg:px-0 py-10 lg:py-14">
13-
<div class="lg:flex">
14-
<Sidebar />
10+
<main class="bg-gray-50 min-h-screen flex">
11+
<Sidebar client:load />
1512

16-
<div class="w-full lg:pl-6 lg:pr-8">
17-
<div class="mb-6 py-6">
18-
<h1 class="text-2xl font-semibold tracking-tight">Dashboard</h1>
19-
<p class="text-sm text-muted-foreground">
20-
Choose a credit package to add funds to your account.
21-
</p>
22-
</div>
23-
something here
24-
</div>
13+
<section class="flex-1 px-6 py-10">
14+
<div class="mb-6">
15+
<h1 class="text-2xl font-semibold tracking-tight">Dashboard</h1>
16+
<p class="text-sm text-muted-foreground">
17+
Choose a credit package to add funds to your account.
18+
</p>
2519
</div>
20+
something here
2621
</section>
2722
</main>
2823

‎src/pages/dashboard/role-fit-index/index.astro‎

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
import Layout from "@/layouts/Layout.astro";
3-
import Header from "@/components/Header.astro";
43
import Footer from "@/components/Footer.astro";
54
import RoleFitForm from "@/components/interactive/RoleFitIndexForm";
65
import { Sidebar } from "@/components/interactive/Sidebar";
@@ -12,23 +11,17 @@ const USER_ID = "51bad019-1d3b-4f7a-9a89-87355fbcde84";
1211

1312
<Layout title="Role Fit Index - Bounteer">
1413
<AuthGuard client:load>
15-
<Header />
14+
<main class="bg-gray-50 min-h-screen flex">
15+
<Sidebar client:load />
1616

17-
<main class="bg-gray-50">
18-
<section class="container-custom lg:max-w-none lg:px-0 py-10 lg:py-14">
19-
<div class="lg:flex">
20-
<Sidebar />
21-
22-
<div class="w-full lg:pl-6 lg:pr-8">
23-
<div class="mb-6 py-6">
24-
<h1 class="text-2xl font-semibold tracking-tight">
25-
Role Fit Index Reports
26-
</h1>
27-
</div>
28-
29-
<UserReportTable userId={USER_ID} pageSize={10} client:load />
30-
</div>
17+
<section class="flex-1 px-6 py-10">
18+
<div class="mb-6">
19+
<h1 class="text-2xl font-semibold tracking-tight">
20+
Role Fit Index Reports
21+
</h1>
3122
</div>
23+
24+
<UserReportTable userId={USER_ID} pageSize={10} client:load />
3225
</section>
3326
</main>
3427

‎src/pages/dashboard/role-fit-index/top-up/confirm.astro‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,13 @@ import Layout from "@/layouts/Layout.astro";
33
import Footer from "@/components/Footer.astro";
44
import { Sidebar } from "@/components/interactive/Sidebar";
55
import { Button } from "@/components/ui/button";
6-
import Header from "@/components/Header.astro";
76
import AuthGuard from "@/components/interactive/AuthGuard";
87
---
98

109
<Layout title="Top Up Confirmation — Bounteer">
1110
<AuthGuard client:load>
12-
<Header />
13-
1411
<main class="bg-gray-50 min-h-screen flex">
15-
<Sidebar />
12+
<Sidebar client:load />
1613

1714
<section class="flex-1 flex flex-col items-center justify-center px-6">
1815
<h1 class="text-2xl font-semibold tracking-tight mb-6 text-center">

‎src/pages/dashboard/role-fit-index/top-up/index.astro‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
import Layout from "@/layouts/Layout.astro";
3-
import Header from "@/components/Header.astro";
43
import Footer from "@/components/Footer.astro";
54
import { Sidebar } from "@/components/interactive/Sidebar";
65
import TopUpCard from "@/components/interactive/TopUpCard";
@@ -11,40 +10,32 @@ import { EXTERNAL } from "@/constant";
1110

1211
<Layout title="Top Up Role Fit Index Credit — Bounteer">
1312
<AuthGuard client:load>
14-
<Header />
13+
<main class="bg-gray-50 min-h-screen flex">
14+
<Sidebar client:load />
1515

16-
<main class="bg-gray-50">
17-
<section class="container-custom lg:max-w-none lg:px-0 py-10 lg:py-14">
18-
<div class="lg:flex">
19-
<Sidebar />
20-
21-
<div class="w-full lg:pl-6 lg:pr-8">
22-
<div class="mb-6 py-6">
23-
<h1 class="text-2xl font-semibold tracking-tight">
24-
Top Up Role Fit Index Credit
25-
</h1>
26-
<p class="text-sm text-muted-foreground">
27-
Choose a credit package to add funds to your account.
28-
</p>
29-
</div>
16+
<section class="flex-1 px-6 py-10">
17+
<div class="mb-6">
18+
<h1 class="text-2xl font-semibold tracking-tight">
19+
Top Up Role Fit Index Credit
20+
</h1>
21+
<p class="text-sm text-muted-foreground">
22+
Choose a credit package to add funds to your account.
23+
</p>
24+
</div>
3025

31-
<!-- React island (shadcn cards) -->
32-
<TopUpCard
33-
client:load
34-
directusUrl={EXTERNAL.directus_url}
35-
readToken={EXTERNAL.directus_key}
36-
category="topup"
37-
limit={4}
38-
/>
26+
<TopUpCard
27+
client:load
28+
directusUrl={EXTERNAL.directus_url}
29+
readToken={EXTERNAL.directus_key}
30+
category="topup"
31+
limit={4}
32+
/>
3933

40-
<!-- Payment Events finder (below the cards) -->
41-
<PaymentEventTable
42-
client:load
43-
directusUrl={EXTERNAL.directus_url}
44-
readToken={EXTERNAL.directus_key}
45-
/>
46-
</div>
47-
</div>
34+
<PaymentEventTable
35+
client:load
36+
directusUrl={EXTERNAL.directus_url}
37+
readToken={EXTERNAL.directus_key}
38+
/>
4839
</section>
4940
</main>
5041

0 commit comments

Comments
 (0)