Quellcode durchsuchen

feat(ui): add back button navigation to header

Added conditional back button that appears on all pages except dashboard and home page. The button uses the ArrowLeft icon from lucide-react and links back to the dashboard. Also updated the logo link to point to the home page instead of dashboard for better navigation flow.
vidane vor 6 Monaten
Ursprung
Commit
f553638cc6
1 geänderte Dateien mit 22 neuen und 3 gelöschten Zeilen
  1. 22 3
      app/components/header.tsx

+ 22 - 3
app/components/header.tsx

@@ -15,9 +15,10 @@ import {
 } from "@/components/ui/navigation-menu";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
-import { Menu, Home, Settings, User, LogOut, LogIn } from "lucide-react";
+import { Menu, Home, Settings, User, LogOut, LogIn, ArrowLeft } from "lucide-react";
 import { DarkModeToggle } from "./dark-mode-toggle";
 import React from "react";
+import { usePathname } from "next/navigation";
 
 const userMenuItems = [
   {
@@ -40,13 +41,17 @@ export default function Header() {
   const user = getUser();
 
   const logoSrc = theme === "dark" ? "/vtorio-dark.svg" : "/vtorio.svg";
+  const pathname = usePathname();
+
+  // Don't show on dashboard or home page
+  const shouldShowBackButton = pathname !== '/dashboard' && pathname !== '/';
 
   if (isLoading) {
     return (
       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <div className="flex h-16 items-center justify-between">
           <div className="flex items-center gap-6 pl-4 md:pl-6">
-            <Link href="/dashboard" className="flex items-center space-x-2">
+            <Link href="/" className="flex items-center space-x-2">
               <Image
                 src={logoSrc}
                 alt="vtor.io"
@@ -56,6 +61,12 @@ export default function Header() {
                 priority
               />
             </Link>
+            {shouldShowBackButton && (
+              <Link href="/dashboard" className="flex items-center space-x-2 text-sm font-medium hover:text-accent-foreground transition-colors">
+                <ArrowLeft className="h-4 w-4" />
+                <span>Back to dashboard</span>
+              </Link>
+            )}
           </div>
           <div className="flex items-center gap-4 pr-4 md:pr-6">
             <div className="h-8 w-20 bg-gray-200 animate-pulse rounded"></div>
@@ -69,7 +80,7 @@ export default function Header() {
     <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="flex h-16 items-center justify-between pr-6">
         <div className="flex items-center gap-6 pl-4 md:pl-6">
-          <Link href="/dashboard" className="flex items-center space-x-2">
+          <Link href="/" className="flex items-center space-x-2">
             <Image
               src={logoSrc}
               alt="vtor.io"
@@ -79,6 +90,14 @@ export default function Header() {
               priority
             />
           </Link>
+          {shouldShowBackButton && (
+            <Link href="/dashboard">
+              <Button variant="outline" size="sm" className="flex items-center space-x-2">
+                <ArrowLeft className="h-4 w-4" />
+                <span>Back to dashboard</span>
+              </Button>
+            </Link>
+          )}
         </div>
 
         <div className="flex items-center gap-4 pr-0 md:pr-0">