first commit
This commit is contained in:
priyanshuvish
747
src/components/Navigation.tsx
Normal file
747
src/components/Navigation.tsx
Normal file
@@ -0,0 +1,747 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Button } from './ui/button';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
|
||||
import { Badge } from './ui/badge';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuLabel,
|
||||
} from './ui/dropdown-menu';
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from './ui/sheet';
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
|
||||
import { navigateTo } from './Router';
|
||||
import { useAuth } from './AuthContext';
|
||||
import { useCart } from './CartContext';
|
||||
import { ImageWithFallback } from './figma/ImageWithFallback';
|
||||
import { PrimaryCTAButton } from './PrimaryCTAButton';
|
||||
import { StandardCTAButton } from './StandardCTAButton';
|
||||
import klcLogo from 'figma:asset/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png';
|
||||
import {
|
||||
Menu,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Building2,
|
||||
User,
|
||||
Settings,
|
||||
LogOut,
|
||||
LayoutDashboard,
|
||||
Users,
|
||||
Target,
|
||||
Award,
|
||||
Lightbulb,
|
||||
GraduationCap,
|
||||
BookOpen,
|
||||
Video,
|
||||
FileText,
|
||||
Eye,
|
||||
Heart,
|
||||
MapPin,
|
||||
Calendar,
|
||||
Play,
|
||||
Home,
|
||||
Monitor,
|
||||
Headphones,
|
||||
Globe,
|
||||
Download,
|
||||
Clock,
|
||||
TrendingUp,
|
||||
Star,
|
||||
BookMarked,
|
||||
Podcast,
|
||||
Building,
|
||||
ShoppingCart,
|
||||
ArrowRight
|
||||
} from 'lucide-react';
|
||||
|
||||
interface NavigationProps {
|
||||
currentPage?: string;
|
||||
}
|
||||
|
||||
interface NavLink {
|
||||
label: string;
|
||||
href?: string;
|
||||
items?: { label: string; href: string; description?: string; icon?: any }[];
|
||||
icon?: any;
|
||||
}
|
||||
|
||||
const navigationItems: NavLink[] = [
|
||||
{
|
||||
label: 'Services',
|
||||
items: [
|
||||
{
|
||||
label: 'Leadership Development',
|
||||
href: '/services/leadership-development',
|
||||
description: 'Executive and senior leadership programs',
|
||||
icon: Target
|
||||
},
|
||||
{
|
||||
label: 'Management Development',
|
||||
href: '/services/management-development',
|
||||
description: 'Middle management and team leader training',
|
||||
icon: Users
|
||||
},
|
||||
{
|
||||
label: 'Culture Competence',
|
||||
href: '/services/culture-competence',
|
||||
description: 'Building inclusive and high-performance cultures',
|
||||
icon: Heart
|
||||
},
|
||||
{
|
||||
label: 'Consulting',
|
||||
href: '/services/consulting',
|
||||
description: 'Strategic organizational transformation',
|
||||
icon: Lightbulb
|
||||
},
|
||||
{
|
||||
label: 'Executive Coaching',
|
||||
href: '/services/executive-coaching',
|
||||
description: 'Personalized leadership development',
|
||||
icon: GraduationCap
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'About Us',
|
||||
items: [
|
||||
{
|
||||
label: 'Our Vision',
|
||||
href: '/about/our-vision',
|
||||
description: 'Our mission to transform leadership globally',
|
||||
icon: Eye
|
||||
},
|
||||
{
|
||||
label: 'Our Impact',
|
||||
href: '/about/our-impact',
|
||||
description: 'Real results and measurable outcomes',
|
||||
icon: TrendingUp
|
||||
},
|
||||
{
|
||||
label: 'Our Expertise',
|
||||
href: '/about/our-expertise',
|
||||
description: 'Industry-leading knowledge and experience',
|
||||
icon: Star
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Learning Facility',
|
||||
href: '/services/learning-facility'
|
||||
},
|
||||
{
|
||||
label: 'Resources',
|
||||
items: [
|
||||
{
|
||||
label: 'Article Blog',
|
||||
href: '/learning/articles',
|
||||
description: 'Latest insights and thought leadership',
|
||||
icon: BookMarked
|
||||
},
|
||||
{
|
||||
label: 'Webcast',
|
||||
href: '/learning/webcast',
|
||||
description: 'Live and recorded leadership sessions',
|
||||
icon: Podcast
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Online Courses',
|
||||
href: '/learning-online'
|
||||
},
|
||||
{
|
||||
label: 'Contact Us',
|
||||
href: '/contact'
|
||||
}
|
||||
];
|
||||
|
||||
const signInOptions = [
|
||||
{
|
||||
label: 'Corporate HR',
|
||||
href: '/signin/corporate-hr',
|
||||
description: 'HR dashboard, team management, and bulk enrollment tools'
|
||||
},
|
||||
{
|
||||
label: 'Corporate Learner',
|
||||
href: '/signin/corporate-learner',
|
||||
description: 'Employee learning dashboard and assigned programs'
|
||||
},
|
||||
{
|
||||
label: 'Self-Learner',
|
||||
href: '/signin/self-learner',
|
||||
description: 'Individual professional development access'
|
||||
}
|
||||
];
|
||||
|
||||
function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean }) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
if (item.href) {
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigateTo(item.href!)}
|
||||
className={isMobile ? "w-full justify-start min-h-[44px]" : "min-h-[44px]"}
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-black)'
|
||||
}}
|
||||
>
|
||||
{item.icon && <item.icon className="w-4 h-4 mr-2" />}
|
||||
{item.label}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between min-h-[44px]"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-black)'
|
||||
}}
|
||||
>
|
||||
<span className="flex items-center">
|
||||
{item.icon && <item.icon className="w-4 h-4 mr-2" />}
|
||||
{item.label}
|
||||
</span>
|
||||
<ChevronRight className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-90' : ''}`} />
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent className="pl-4 space-y-1">
|
||||
{item.items?.map((subItem) => (
|
||||
<Button
|
||||
key={subItem.href}
|
||||
variant="ghost"
|
||||
onClick={() => navigateTo(subItem.href)}
|
||||
className="w-full justify-start min-h-[44px] pl-6"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-black)'
|
||||
}}
|
||||
>
|
||||
{subItem.icon && <subItem.icon className="w-4 h-4 mr-2" />}
|
||||
{subItem.label}
|
||||
</Button>
|
||||
))}
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="flex items-center gap-1 min-h-[44px] transition-all duration-300 hover:transform hover:-translate-y-1"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontWeight: 'normal',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-black)'
|
||||
}}
|
||||
>
|
||||
{item.icon && <item.icon className="w-4 h-4 mr-2" />}
|
||||
{item.label}
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="start"
|
||||
className="w-80"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-white)',
|
||||
border: `1px solid var(--color-border)`,
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{item.items?.map((subItem) => (
|
||||
<DropdownMenuItem
|
||||
key={subItem.href}
|
||||
onClick={() => navigateTo(subItem.href)}
|
||||
className="flex items-start gap-3 p-4 cursor-pointer transition-all duration-300 hover:transform hover:-translate-y-1"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{subItem.icon && (
|
||||
<div
|
||||
className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-1"
|
||||
style={{
|
||||
backgroundColor: 'rgba(4, 4, 91, 0.1)',
|
||||
color: 'var(--color-brand-primary)'
|
||||
}}
|
||||
>
|
||||
<subItem.icon className="w-4 h-4" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<div
|
||||
className="font-medium"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontWeight: '400',
|
||||
color: 'var(--color-black)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{subItem.label}
|
||||
</div>
|
||||
{subItem.description && (
|
||||
<div
|
||||
className="mt-1"
|
||||
style={{
|
||||
fontSize: '12px', // Reduced from var(--font-small) by 2px
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: 'var(--line-height-small)'
|
||||
}}
|
||||
>
|
||||
{subItem.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
|
||||
function ProfileDropdown({ user }: { user: any }) {
|
||||
const { signOut } = useAuth();
|
||||
|
||||
const handleSignOut = () => {
|
||||
signOut();
|
||||
navigateTo('/');
|
||||
};
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="flex items-center gap-3 px-3 py-2 h-auto min-h-[44px]"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={user.avatar} alt={user.name} />
|
||||
<AvatarFallback
|
||||
className="text-sm"
|
||||
style={{ fontFamily: 'var(--font-family-base)' }}
|
||||
>
|
||||
{user.name.split(' ').map((n: string) => n[0]).join('')}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="text-left">
|
||||
<div
|
||||
className="font-medium"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontWeight: '400',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{user.corporateName}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px', // Reduced from var(--font-small) by 2px
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{user.name}
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
className="w-64"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-white)',
|
||||
border: `1px solid var(--color-border)`,
|
||||
borderRadius: '12px',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
<DropdownMenuLabel
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="font-medium"
|
||||
style={{ fontWeight: '400' }}
|
||||
>
|
||||
{user.corporateName}
|
||||
</div>
|
||||
<div
|
||||
className="font-normal"
|
||||
style={{
|
||||
fontSize: '12px', // Reduced from var(--font-small) by 2px
|
||||
color: 'var(--color-gray-muted)'
|
||||
}}
|
||||
>
|
||||
{user.email}
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => navigateTo('/dashboard')}
|
||||
className="min-h-[44px]"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4 mr-2" />
|
||||
Dashboard
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => navigateTo('/team')}
|
||||
className="min-h-[44px]"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Team Management
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => navigateTo('/profile')}
|
||||
className="min-h-[44px]"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
<User className="w-4 h-4 mr-2" />
|
||||
Profile
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={() => navigateTo('/settings')}
|
||||
className="min-h-[44px]"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
<Settings className="w-4 h-4 mr-2" />
|
||||
Settings
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={handleSignOut}
|
||||
className="min-h-[44px]"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--destructive)'
|
||||
}}
|
||||
>
|
||||
<LogOut className="w-4 h-4 mr-2" />
|
||||
Sign Out
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
|
||||
function CartIcon() {
|
||||
const { cartCount } = useCart();
|
||||
|
||||
const handleCartClick = () => {
|
||||
navigateTo('/cart');
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleCartClick}
|
||||
className="relative min-h-[44px] min-w-[44px] hover:bg-gray-100 transition-all duration-300"
|
||||
aria-label={`Shopping cart with ${cartCount} items`}
|
||||
>
|
||||
<ShoppingCart className="w-5 h-5 text-gray-600" />
|
||||
|
||||
{/* Cart Count Badge */}
|
||||
{cartCount > 0 && (
|
||||
<div
|
||||
className="absolute -top-1 -right-1 min-w-[18px] h-[18px] flex items-center justify-center rounded-full text-xs font-medium text-white animate-in fade-in zoom-in duration-300"
|
||||
style={{
|
||||
backgroundColor: '#dc2626', // Red background for notification
|
||||
fontSize: '11px',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
lineHeight: '1'
|
||||
}}
|
||||
>
|
||||
{cartCount > 9 ? '9+' : cartCount}
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
export function Navigation({ currentPage }: NavigationProps) {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const { user, isAuthenticated, signOut } = useAuth();
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 10);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleMobileSignOut = () => {
|
||||
signOut();
|
||||
navigateTo('/');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Top notification bar - PRESERVED */}
|
||||
<div className="notification-strip">
|
||||
<span className="notification-text">
|
||||
Join Our Upcoming Leadership Webinars - Transform Your Leadership Journey
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigateTo('/enroll')}
|
||||
className="notification-button"
|
||||
>
|
||||
Enroll Now
|
||||
<ChevronRight className="w-4 h-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Main navigation header - ENHANCED STICKY */}
|
||||
<header
|
||||
className={`w-full border-b transition-all duration-300 navbar-sticky ${isScrolled ? 'shadow-lg scrolled' : 'shadow-sm'}`}
|
||||
style={{
|
||||
borderColor: 'var(--color-border)'
|
||||
}}
|
||||
>
|
||||
<nav className="container mx-auto px-4 lg:px-8">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="p-2 hover:bg-transparent"
|
||||
onClick={() => navigateTo('/')}
|
||||
>
|
||||
<img
|
||||
src={klcLogo}
|
||||
alt="Kautilya Leadership Centre"
|
||||
className="h-12 w-auto object-contain"
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden lg:flex items-center gap-2">
|
||||
{navigationItems.map((item) => (
|
||||
<NavLink key={item.label} item={item} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right Side Actions */}
|
||||
<div className="flex items-center gap-4">
|
||||
|
||||
{/* Cart Icon - Always visible */}
|
||||
<CartIcon />
|
||||
|
||||
{/* Authentication Button/Profile */}
|
||||
{isAuthenticated && user ? (
|
||||
<div className="hidden md:flex">
|
||||
<ProfileDropdown user={user} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="hidden md:flex items-center">
|
||||
<Button
|
||||
onClick={() => navigateTo('/leadership-journey')}
|
||||
className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border transition-all duration-300 group"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#04045B'
|
||||
}}
|
||||
>
|
||||
Start Leadership Journey
|
||||
<ArrowRight
|
||||
className="w-5 h-5 ml-2 transition-transform duration-300 group-hover:translate-x-1"
|
||||
style={{ color: '#04045B' }}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="lg:hidden min-h-[44px] min-w-[44px]">
|
||||
<Menu className="w-6 h-6" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent
|
||||
side="right"
|
||||
className="w-80"
|
||||
style={{
|
||||
backgroundColor: 'var(--color-bg-white)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
zIndex: 10000
|
||||
}}
|
||||
>
|
||||
<SheetHeader>
|
||||
<SheetTitle
|
||||
style={{
|
||||
fontSize: 'var(--font-h4)',
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--color-black)'
|
||||
}}
|
||||
>
|
||||
Navigation
|
||||
</SheetTitle>
|
||||
</SheetHeader>
|
||||
<div className="mt-6 space-y-4">
|
||||
{navigationItems.map((item) => (
|
||||
<NavLink key={item.label} item={item} isMobile />
|
||||
))}
|
||||
|
||||
<div className="pt-4 border-t space-y-3">
|
||||
|
||||
{isAuthenticated && user ? (
|
||||
<div className="space-y-3">
|
||||
<div
|
||||
className="flex items-center gap-3 p-3 rounded-lg"
|
||||
style={{ backgroundColor: 'rgba(0, 0, 0, 0.05)' }}
|
||||
>
|
||||
<Avatar className="h-10 w-10">
|
||||
<AvatarImage src={user.avatar} alt={user.name} />
|
||||
<AvatarFallback style={{ fontFamily: 'var(--font-family-base)' }}>
|
||||
{user.name.split(' ').map((n: string) => n[0]).join('')}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<div
|
||||
className="font-medium"
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontWeight: '400',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{user.corporateName}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px', // Reduced from var(--font-small) by 2px
|
||||
color: 'var(--color-gray-muted)',
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
{user.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start min-h-[44px]"
|
||||
onClick={() => navigateTo('/dashboard')}
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
<LayoutDashboard className="w-4 h-4 mr-2" />
|
||||
Dashboard
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start min-h-[44px]"
|
||||
onClick={() => navigateTo('/profile')}
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontFamily: 'var(--font-family-base)'
|
||||
}}
|
||||
>
|
||||
<User className="w-4 h-4 mr-2" />
|
||||
Profile
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start min-h-[44px]"
|
||||
onClick={handleMobileSignOut}
|
||||
style={{
|
||||
fontSize: '14px', // Reduced from var(--font-body) by 2px
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: 'var(--destructive)'
|
||||
}}
|
||||
>
|
||||
<LogOut className="w-4 h-4 mr-2" />
|
||||
Sign Out
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
onClick={() => navigateTo('/leadership-journey')}
|
||||
className="management-dev-glassmorphic-btn text-body px-8 py-4 min-h-[52px] border transition-all duration-300 w-full group"
|
||||
style={{
|
||||
fontFamily: 'var(--font-family-base)',
|
||||
color: '#04045B'
|
||||
}}
|
||||
>
|
||||
Start Leadership Journey
|
||||
<ArrowRight
|
||||
className="w-5 h-5 ml-2 transition-transform duration-300 group-hover:translate-x-1"
|
||||
style={{ color: '#04045B' }}
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user