Kaynağa Gözat

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 10 ay önce
ebeveyn
işleme
f553638cc6
1 değiştirilmiş dosya ile 22 ekleme ve 3 silme
  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">