top bar for mobile dashboard

Author: kanekoshoyu

src/components/interactive/Sidebar.tsx

@@ -2,20 +2,10 @@
 
 import * as React from "react";
 import { cn } from "@/lib/utils";
-import {
-  Home,
-  FileText,
-  ListChecks,
-  Menu,
-  LogOut,
-} from "lucide-react";
+import { Home, FileText, ListChecks, Menu, LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-  Sheet,
-  SheetContent,
-  SheetTrigger,
-} from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { KEYWORDS } from "@/constant";
 
 type NavItem = {
@@ -34,7 +24,6 @@ const navItems: NavItem[] = [
 
 function NavLink({ item, active }: { item: NavItem; active?: boolean }) {
   const Icon = item.icon;
-
   return (
     <a
       href={item.href}
@@ -66,9 +55,9 @@ export function Sidebar() {
   };
 
   return (
-    <div className="flex">
-      {/* Mobile: hamburger trigger */}
-      <div className="lg:hidden p-2">
+    <>
+      {/* Mobile: Top bar with hamburger */}
+      <div className="flex items-center justify-between px-4 py-3 bg-white border-b shadow-md lg:hidden">
         <Sheet>
           <SheetTrigger asChild>
             <Button variant="outline" size="icon">
@@ -94,6 +83,7 @@ export function Sidebar() {
             </ScrollArea>
           </SheetContent>
         </Sheet>
+        <h1 className="text-lg font-semibold">Bounteer Dashboard</h1>
       </div>
 
       {/* Desktop: persistent sidebar */}
@@ -116,6 +106,6 @@ export function Sidebar() {
           </nav>
         </ScrollArea>
       </aside>
-    </div>
+    </>
   );
 }

src/pages/dashboard/index.astro

@@ -5,11 +5,13 @@ import { Sidebar } from "@/components/interactive/Sidebar";
 import AuthGuard from "@/components/interactive/AuthGuard";
 ---
 
-<Layout title="Home - Bounteer">
+<Layout title="Dashboard - Bounteer">
   <AuthGuard client:load>
-    <main class="bg-gray-50 min-h-screen flex">
+    <main class="bg-gray-50 min-h-screen flex flex-col lg:flex-row">
+      <!-- Sidebar handles both mobile topbar + desktop sidebar -->
       <Sidebar client:load />
 
+      <!-- Main content -->
       <section class="flex-1 px-6 py-10">
         <div class="mb-6">
           <h1 class="text-2xl font-semibold tracking-tight">Dashboard</h1>

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

@@ -11,9 +11,11 @@ const USER_ID = "51bad019-1d3b-4f7a-9a89-87355fbcde84";
 
 <Layout title="Role Fit Index - Bounteer">
   <AuthGuard client:load>
-    <main class="bg-gray-50 min-h-screen flex">
+    <main class="bg-gray-50 min-h-screen flex flex-col lg:flex-row">
+      <!-- Sidebar handles both mobile topbar + desktop sidebar -->
       <Sidebar client:load />
 
+      <!-- Main content -->
       <section class="flex-1 px-6 py-10">
         <div class="mb-6">
           <h1 class="text-2xl font-semibold tracking-tight">

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

@@ -8,9 +8,11 @@ import AuthGuard from "@/components/interactive/AuthGuard";
 
 <Layout title="Top Up Confirmation — Bounteer">
   <AuthGuard client:load>
-    <main class="bg-gray-50 min-h-screen flex">
+    <main class="bg-gray-50 min-h-screen flex flex-col lg:flex-row">
+      <!-- Sidebar handles both mobile topbar + desktop sidebar -->
       <Sidebar client:load />
 
+      <!-- Main content -->
       <section class="flex-1 flex flex-col items-center justify-center px-6">
         <h1 class="text-2xl font-semibold tracking-tight mb-6 text-center">
           Payment confirmed, Thank you!

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

@@ -10,9 +10,11 @@ import { EXTERNAL } from "@/constant";
 
 <Layout title="Top Up Role Fit Index Credit — Bounteer">
   <AuthGuard client:load>
-    <main class="bg-gray-50 min-h-screen flex">
+    <main class="bg-gray-50 min-h-screen flex flex-col lg:flex-row">
+      <!-- Sidebar handles both mobile topbar + desktop sidebar -->
       <Sidebar client:load />
 
+      <!-- Main content -->
       <section class="flex-1 px-6 py-10">
         <div class="mb-6">
           <h1 class="text-2xl font-semibold tracking-tight">