KLC/KLC-Website-Frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

resp fixes

Browse Source
This commit is contained in:
priyanshuvish
2025-09-02 18:48:56 +05:30
parent a2f4dc1a3e
commit c37a70dfec
17 changed files with 1005 additions and 706 deletions
Download Patch File Download Diff File Expand all files Collapse all files

192
src/components/Navigation.tsx
View File

@@ -1,4 +1,4 @@
import klcLogo from 'figma:asset/e98caa8afd8d11246bbff1dde75bbaae6f6a0894.png';
import klcLogo from '../assets/klc-logo-dark.png';
import {
ArrowRight,
BookMarked,
@@ -42,6 +42,7 @@ import {
SheetTitle,
SheetTrigger,
} from './ui/sheet';
import { useLocation, useNavigate } from 'react-router-dom';
interface NavigationProps {
currentPage?: string;
@@ -163,16 +164,18 @@ const signInOptions = [
];
function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean }) {
const navigate = useNavigate();
const location = useLocation();
const [isOpen, setIsOpen] = useState(false);
if (item.href) {
return (
<Button
variant="ghost"
onClick={() => navigateTo(item.href!)}
onClick={() => navigate(item.href!)}
className={isMobile ? "w-full justify-start min-h-[44px]" : "min-h-[44px]"}
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontSize: '14px',
fontWeight: 'normal',
fontFamily: 'var(--font-family-base)',
color: 'var(--color-black)'
@@ -192,7 +195,7 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
variant="ghost"
className="w-full justify-between min-h-[44px]"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontSize: '14px',
fontWeight: 'normal',
fontFamily: 'var(--font-family-base)',
color: 'var(--color-black)'
@@ -210,10 +213,10 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
<Button
key={subItem.href}
variant="ghost"
onClick={() => navigateTo(subItem.href)}
onClick={() => navigate(subItem.href)}
className="w-full justify-start min-h-[44px] pl-6"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontSize: '14px',
fontWeight: 'normal',
fontFamily: 'var(--font-family-base)',
color: 'var(--color-black)'
@@ -235,7 +238,7 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
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
fontSize: '14px',
fontWeight: 'normal',
fontFamily: 'var(--font-family-base)',
color: 'var(--color-black)'
@@ -260,7 +263,7 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
{item.items?.map((subItem) => (
<DropdownMenuItem
key={subItem.href}
onClick={() => navigateTo(subItem.href)}
onClick={() => navigate(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)'
@@ -281,7 +284,7 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
<div
className="font-medium"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontSize: '14px',
fontWeight: '400',
color: 'var(--color-black)',
fontFamily: 'var(--font-family-base)'
@@ -293,7 +296,7 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
<div
className="mt-1"
style={{
fontSize: '12px', // Reduced from var(--font-small) by 2px
fontSize: '12px',
color: 'var(--color-gray-muted)',
fontFamily: 'var(--font-family-base)',
lineHeight: 'var(--line-height-small)'
@@ -312,10 +315,11 @@ function NavLink({ item, isMobile = false }: { item: NavLink; isMobile?: boolean
function ProfileDropdown({ user }: { user: any }) {
const { signOut } = useAuth();
const navigate = useNavigate();
const handleSignOut = () => {
signOut();
navigateTo('/');
navigate('/');
};
return (
@@ -325,7 +329,7 @@ function ProfileDropdown({ user }: { user: any }) {
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
fontSize: '14px',
fontFamily: 'var(--font-family-base)'
}}
>
@@ -342,7 +346,7 @@ function ProfileDropdown({ user }: { user: any }) {
<div
className="font-medium"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontSize: '14px',
fontWeight: '400',
fontFamily: 'var(--font-family-base)'
}}
@@ -351,7 +355,7 @@ function ProfileDropdown({ user }: { user: any }) {
</div>
<div
style={{
fontSize: '12px', // Reduced from var(--font-small) by 2px
fontSize: '12px',
color: 'var(--color-gray-muted)',
fontFamily: 'var(--font-family-base)'
}}
@@ -374,7 +378,7 @@ function ProfileDropdown({ user }: { user: any }) {
>
<DropdownMenuLabel
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontSize: '14px',
fontFamily: 'var(--font-family-base)'
}}
>
@@ -387,7 +391,7 @@ function ProfileDropdown({ user }: { user: any }) {
<div
className="font-normal"
style={{
fontSize: '12px', // Reduced from var(--font-small) by 2px
fontSize: '12px',
color: 'var(--color-gray-muted)'
}}
>
@@ -396,62 +400,17 @@ function ProfileDropdown({ user }: { user: any }) {
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => navigateTo('/dashboard')}
onClick={() => navigate('/dashboard')}
className="min-h-[44px]"
style={{
fontSize: '14px', // Reduced from var(--font-body) by 2px
fontSize: '14px',
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>
{/* ... rest of the dropdown items with navigate() */}
</DropdownMenuContent>
</DropdownMenu>
);
@@ -459,9 +418,10 @@ function ProfileDropdown({ user }: { user: any }) {
function CartIcon() {
const { cartCount } = useCart();
const navigate = useNavigate();
const handleCartClick = () => {
navigateTo('/cart');
navigate('/cart');
};
return (
@@ -474,12 +434,11 @@ function CartIcon() {
>
<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
backgroundColor: '#dc2626',
fontSize: '11px',
fontFamily: 'var(--font-family-base)',
lineHeight: '1'
@@ -495,6 +454,7 @@ function CartIcon() {
export function Navigation({ currentPage }: NavigationProps) {
const [isScrolled, setIsScrolled] = useState(false);
const { user, isAuthenticated, signOut } = useAuth();
const navigate = useNavigate();
useEffect(() => {
const handleScroll = () => {
@@ -509,12 +469,12 @@ export function Navigation({ currentPage }: NavigationProps) {
const handleMobileSignOut = () => {
signOut();
navigateTo('/');
navigate('/');
};
return (
<>
{/* Top notification bar - PRESERVED */}
{/* Top notification bar */}
<div className="notification-strip">
<span className="notification-text">
Join Our Upcoming Leadership Webinars - Transform Your Leadership Journey
@@ -522,7 +482,7 @@ export function Navigation({ currentPage }: NavigationProps) {
<Button
variant="ghost"
size="sm"
onClick={() => navigateTo('/enroll')}
onClick={() => navigate('/enroll')}
className="notification-button"
>
Enroll Now
@@ -530,7 +490,7 @@ export function Navigation({ currentPage }: NavigationProps) {
</Button>
</div>
{/* Main navigation header - ENHANCED STICKY */}
{/* Main navigation header */}
<header
className={`w-full border-b transition-all duration-300 navbar-sticky ${isScrolled ? 'shadow-lg scrolled' : 'shadow-sm'}`}
style={{
@@ -544,7 +504,7 @@ export function Navigation({ currentPage }: NavigationProps) {
<Button
variant="ghost"
className="p-2 hover:bg-transparent"
onClick={() => navigateTo('/')}
onClick={() => navigate('/')}
>
<img
src={klcLogo}
@@ -555,7 +515,7 @@ export function Navigation({ currentPage }: NavigationProps) {
</div>
{/* Desktop Navigation */}
<div className="hidden lg:flex items-center gap-2">
<div className="hidden lg:flex items-center gap-0">
{navigationItems.map((item) => (
<NavLink key={item.label} item={item} />
))}
@@ -563,11 +523,8 @@ export function Navigation({ currentPage }: NavigationProps) {
{/* 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} />
@@ -575,7 +532,7 @@ export function Navigation({ currentPage }: NavigationProps) {
) : (
<div className="hidden md:flex items-center">
<Button
onClick={() => navigateTo('/leadership-journey')}
onClick={() => navigate('/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)',
@@ -609,13 +566,7 @@ export function Navigation({ currentPage }: NavigationProps) {
}}
>
<SheetHeader>
<SheetTitle
style={{
fontSize: 'var(--font-h4)',
fontFamily: 'var(--font-family-base)',
color: 'var(--color-black)'
}}
>
<SheetTitle>
Navigation
</SheetTitle>
</SheetHeader>
@@ -625,83 +576,14 @@ export function Navigation({ currentPage }: NavigationProps) {
))}
<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>
{/* ... mobile user info and buttons with navigate() */}
</div>
) : (
<div className="space-y-2">
<Button
onClick={() => navigateTo('/leadership-journey')}
onClick={() => navigate('/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)',