Explorar el Código

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 hace 10 meses
padre
commit
f553638cc6
Se han modificado 1 ficheros con 22 adiciones y 3 borrados
  1. 22 3
      app/components/header.tsx

+ 22 - 3
app/components/header.tsx

@@ -15,9 +15,10 @@ import {
 } from "@/components/ui/navigation-menu";
 } from "@/components/ui/navigation-menu";
 import { Button } from "@/components/ui/button";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 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 { DarkModeToggle } from "./dark-mode-toggle";
 import React from "react";
 import React from "react";
+import { usePathname } from "next/navigation";
 
 
 const userMenuItems = [
 const userMenuItems = [
   {
   {
@@ -40,13 +41,17 @@ export default function Header() {
   const user = getUser();
   const user = getUser();
 
 
   const logoSrc = theme === "dark" ? "/vtorio-dark.svg" : "/vtorio.svg";
   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) {
   if (isLoading) {
     return (
     return (
       <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <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 h-16 items-center justify-between">
           <div className="flex items-center gap-6 pl-4 md:pl-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
               <Image
                 src={logoSrc}
                 src={logoSrc}
                 alt="vtor.io"
                 alt="vtor.io"
@@ -56,6 +61,12 @@ export default function Header() {
                 priority
                 priority
               />
               />
             </Link>
             </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>
           <div className="flex items-center gap-4 pr-4 md:pr-6">
           <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>
             <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">
     <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 h-16 items-center justify-between pr-6">
         <div className="flex items-center gap-6 pl-4 md:pl-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
             <Image
               src={logoSrc}
               src={logoSrc}
               alt="vtor.io"
               alt="vtor.io"
@@ -79,6 +90,14 @@ export default function Header() {
               priority
               priority
             />
             />
           </Link>
           </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>
 
 
         <div className="flex items-center gap-4 pr-0 md:pr-0">
         <div className="flex items-center gap-4 pr-0 md:pr-0">