Added top toolbar to AppShell
X-Lovable-Edit-ID: edt-4b99d7ff-d9f3-4422-9016-8547a45d41c9 Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
@@ -1,9 +1,13 @@
|
||||
import { Link, useLocation, useNavigate } from "@tanstack/react-router";
|
||||
import { useAuth } from "@/lib/auth";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Briefcase, Users, FileText, Receipt, ShieldCheck, LogOut, Scale, LayoutDashboard, Calendar as CalendarIcon, CheckSquare, MessageSquare, Activity, DollarSign, FolderOpen, Files as FilesIcon, Settings as SettingsIcon, ClipboardList, UserPlus } from "lucide-react";
|
||||
import { Briefcase, Users, FileText, Receipt, ShieldCheck, LogOut, Scale, LayoutDashboard, Calendar as CalendarIcon, CheckSquare, MessageSquare, Activity, DollarSign, FolderOpen, Files as FilesIcon, Settings as SettingsIcon, ClipboardList, UserPlus, User as UserIcon } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ReactNode } from "react";
|
||||
import { HeaderTimer } from "@/components/timer/header-timer";
|
||||
import { QuickAddTime, QuickAddExpense } from "@/components/quick-add/quick-add";
|
||||
import { DateCalculator } from "@/components/date-calculator";
|
||||
import { NotificationBell } from "@/components/notifications/notification-bell";
|
||||
|
||||
interface NavItem {
|
||||
to: string;
|
||||
@@ -106,6 +110,22 @@ export function AppShell({ children }: { children: ReactNode }) {
|
||||
</div>
|
||||
|
||||
<main className="flex-1 min-w-0 md:ml-0 mt-14 md:mt-0">
|
||||
{/* Desktop top toolbar */}
|
||||
<div className="hidden md:flex items-center justify-end gap-2 px-6 py-2 border-b bg-card/50">
|
||||
<QuickAddTime />
|
||||
<QuickAddExpense />
|
||||
<DateCalculator />
|
||||
<HeaderTimer />
|
||||
<NotificationBell />
|
||||
<Link
|
||||
to="/settings/profile"
|
||||
className="inline-flex items-center justify-center h-9 w-9 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
|
||||
aria-label="My profile"
|
||||
title="My profile"
|
||||
>
|
||||
<UserIcon className="h-4 w-4" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="md:hidden flex overflow-x-auto gap-1 px-3 py-2 border-b bg-card">
|
||||
{NAV.filter((n) => !n.adminOnly || isAdmin).map((item) => {
|
||||
const active = item.to === "/" ? location.pathname === "/" : location.pathname.startsWith(item.to);
|
||||
|
||||
Reference in New Issue
Block a user