Enhance Navbar component by adding a Dashboard link for authenticated users, improving navigation based on user roles. Update styling and structure for better clarity and user experience while maintaining existing logout functionality.

This commit is contained in:
iamkiddy 2025-12-04 19:37:35 +00:00
parent 479b8943ae
commit 460901ab5c

View File

@ -2,7 +2,7 @@
import { motion, AnimatePresence } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Heart, Menu, X, LogOut } from "lucide-react";
import { Heart, Menu, X, LogOut, LayoutGrid } from "lucide-react";
import { ThemeToggle } from "@/components/ThemeToggle";
import { useEffect, useState } from "react";
import { LoginDialog } from "@/components/LoginDialog";
@ -139,6 +139,14 @@ export function Navbar() {
</Link>
)}
{isAuthenticated && (
<>
<Link
href={isAdmin ? "/admin/dashboard" : "/user/dashboard"}
className={`text-sm font-medium transition-colors cursor-pointer px-3 py-2 rounded-lg hover:opacity-90 ${isDark ? 'text-gray-300 hover:text-white' : 'text-gray-700 hover:text-rose-600'}`}
>
<LayoutGrid className="w-4 h-4 inline mr-1.5" />
Dashboard
</Link>
<Button
size="sm"
variant="outline"
@ -148,6 +156,7 @@ export function Navbar() {
<LogOut className="w-4 h-4 mr-2" />
Logout
</Button>
</>
)}
</div>
@ -244,6 +253,15 @@ export function Navbar() {
</Link>
)}
{isAuthenticated && (
<>
<Link
href={isAdmin ? "/admin/dashboard" : "/user/dashboard"}
onClick={() => setMobileMenuOpen(false)}
className={`text-left text-sm sm:text-base font-medium py-2.5 sm:py-3 px-3 sm:px-4 rounded-lg transition-colors flex items-center gap-2 ${isDark ? 'text-gray-300 hover:bg-gray-800' : 'text-gray-700 hover:bg-gray-100'}`}
>
<LayoutGrid className="w-4 h-4" />
Dashboard
</Link>
<Button
variant="outline"
className="w-full justify-start text-sm sm:text-base bg-red-600 hover:bg-red-700 text-white border-red-600 hover:border-red-700"
@ -254,6 +272,7 @@ export function Navbar() {
<LogOut className="w-4 h-4 mr-2" />
Logout
</Button>
</>
)}
</div>
</div>