Skip to content

Commit 41332e4

Browse files
dipak0000812dipak0000812
committed
chore: cleanup redundant root configuration files
1 parent 42b7f41 commit 41332e4

File tree

2 files changed

+205
-164
lines changed

2 files changed

+205
-164
lines changed

‎learnmate-frontend/src/components/layout/Navbar.jsx‎

Lines changed: 79 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { useState } from 'react';
22
import { Link, useNavigate, useLocation } from 'react-router-dom';
3-
import {
4-
GraduationCap,
5-
Bell,
6-
User,
7-
LogOut,
8-
Settings,
9-
Moon,
3+
import {
4+
GraduationCap,
5+
Bell,
6+
User,
7+
LogOut,
8+
Settings,
9+
Moon,
1010
Sun,
1111
Menu,
1212
X,
@@ -37,82 +37,87 @@ const Navbar = ({ toggleSidebar, isSidebarOpen }) => {
3737
};
3838

3939
return (
40-
<nav className="bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl border-b border-gray-200 dark:border-gray-700 sticky top-0 z-40 shadow-sm">
41-
<div className="px-4 sm:px-6 lg:px-8">
40+
<nav className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl border-b border-slate-200 dark:border-slate-800 sticky top-0 z-40 transition-all duration-300">
41+
<div className="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8">
4242
<div className="flex items-center justify-between h-16">
4343
{/* Left Side - Logo & Menu Toggle */}
4444
<div className="flex items-center gap-4">
4545
{/* Mobile Menu Toggle */}
4646
<button
4747
onClick={toggleSidebar}
48-
className="lg:hidden p-2 rounded-xl hover:bg-gradient-to-r hover:from-blue-50 hover:to-teal-50 dark:hover:from-gray-700 dark:hover:to-gray-600 transition-all"
48+
className="lg:hidden p-2 rounded-xl text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition-all focus:ring-2 focus:ring-slate-200"
49+
aria-label="Toggle Sidebar"
4950
>
5051
{isSidebarOpen ? (
51-
<X className="w-6 h-6 text-gray-600 dark:text-gray-300" />
52+
<X className="w-6 h-6" />
5253
) : (
53-
<Menu className="w-6 h-6 text-gray-600 dark:text-gray-300" />
54+
<Menu className="w-6 h-6" />
5455
)}
5556
</button>
5657

5758
{/* Logo */}
58-
<Link to="/dashboard" className="flex items-center gap-2 group">
59-
<div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-teal-600 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-teal-500/50 transition-all group-hover:scale-110 relative">
60-
<GraduationCap className="w-6 h-6 text-white" />
61-
<Sparkles className="w-3 h-3 text-yellow-400 absolute -top-1 -right-1 animate-pulse" />
59+
<Link to="/dashboard" className="flex items-center gap-3 group">
60+
<div className="w-9 h-9 bg-gradient-to-br from-blue-600 to-violet-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20 group-hover:scale-105 transition-all duration-300">
61+
<GraduationCap className="w-5 h-5 text-white" />
6262
</div>
63-
<span className="text-xl font-bold bg-gradient-to-r from-blue-600 to-teal-600 bg-clip-text text-transparent hidden sm:block">
63+
<span className="text-xl font-heading font-bold text-slate-900 dark:text-white tracking-tight hidden sm:block">
6464
LearnMate
6565
</span>
6666
</Link>
6767
</div>
6868

6969
{/* Center - Quick Stats (Desktop only) */}
70-
<div className="hidden md:flex items-center gap-4">
71-
<div className="flex items-center gap-2 px-3 py-1.5 bg-gradient-to-r from-yellow-50 to-orange-50 dark:from-yellow-900/20 dark:to-orange-900/20 rounded-lg">
72-
<Trophy className="w-4 h-4 text-yellow-600" />
73-
<span className="text-sm font-semibold text-gray-900 dark:text-white">3,450 pts</span>
70+
<div className="hidden md:flex items-center gap-3 bg-slate-50 dark:bg-slate-800/50 p-1.5 rounded-full border border-slate-200 dark:border-slate-700">
71+
<div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-white dark:bg-slate-700 shadow-sm border border-slate-100 dark:border-slate-600">
72+
<Trophy className="w-3.5 h-3.5 text-amber-500" />
73+
<span className="text-xs font-semibold text-slate-700 dark:text-slate-200">3,450 XP</span>
7474
</div>
75-
<div className="flex items-center gap-2 px-3 py-1.5 bg-gradient-to-r from-blue-50 to-teal-50 dark:from-blue-900/20 dark:to-teal-900/20 rounded-lg">
76-
<Zap className="w-4 h-4 text-teal-600 animate-pulse" />
77-
<span className="text-sm font-semibold text-gray-900 dark:text-white">Level 7</span>
75+
<div className="flex items-center gap-1.5 px-3 py-1">
76+
<Zap className="w-3.5 h-3.5 text-blue-500" />
77+
<span className="text-xs font-semibold text-slate-600 dark:text-slate-300">Lvl 7</span>
7878
</div>
7979
</div>
8080

8181
{/* Right Side - Actions */}
82-
<div className="flex items-center gap-3">
82+
<div className="flex items-center gap-2">
8383
{/* Dark Mode Toggle */}
8484
<button
8585
onClick={toggleDarkMode}
86-
className="p-2 rounded-xl hover:bg-gradient-to-r hover:from-blue-50 hover:to-teal-50 dark:hover:from-gray-700 dark:hover:to-gray-600 transition-all"
86+
className="p-2.5 rounded-full text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-all"
87+
aria-label="Toggle Theme"
8788
>
8889
{darkMode ? (
89-
<Sun className="w-5 h-5 text-yellow-500" />
90+
<Sun className="w-5 h-5 text-amber-400 fill-amber-400" />
9091
) : (
91-
<Moon className="w-5 h-5 text-gray-600 dark:text-gray-300" />
92+
<Moon className="w-5 h-5" />
9293
)}
9394
</button>
9495

9596
{/* Notifications */}
96-
<button className="p-2 rounded-xl hover:bg-gradient-to-r hover:from-blue-50 hover:to-teal-50 dark:hover:from-gray-700 dark:hover:to-gray-600 transition-all relative">
97-
<Bell className="w-5 h-5 text-gray-600 dark:text-gray-300" />
98-
<span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full animate-pulse"></span>
97+
<button className="p-2.5 rounded-full text-slate-500 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-all relative">
98+
<Bell className="w-5 h-5" />
99+
<span className="absolute top-2 right-2.5 w-2 h-2 bg-rose-500 rounded-full ring-2 ring-white dark:ring-slate-900"></span>
99100
</button>
100101

101102
{/* Profile Menu */}
102-
<div className="relative">
103+
<div className="relative ml-2">
103104
<button
104105
onClick={() => setShowProfileMenu(!showProfileMenu)}
105-
className="flex items-center gap-2 p-2 rounded-xl hover:bg-gradient-to-r hover:from-blue-50 hover:to-teal-50 dark:hover:from-gray-700 dark:hover:to-gray-600 transition-all"
106+
className="flex items-center gap-3 p-1 pl-2 rounded-full hover:bg-slate-50 dark:hover:bg-slate-800 border border-transparent hover:border-slate-200 dark:hover:border-slate-700 transition-all"
106107
>
107-
<div className="w-8 h-8 bg-gradient-to-br from-blue-600 to-teal-600 rounded-full flex items-center justify-center shadow-lg relative">
108-
<span className="text-white text-sm font-semibold">
109-
{user?.name?.charAt(0).toUpperCase() || 'U'}
110-
</span>
111-
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-emerald-500 border-2 border-white dark:border-gray-800 rounded-full"></div>
108+
<div className="text-xs font-medium text-slate-700 dark:text-slate-200 text-right hidden lg:block leading-tight">
109+
<div className="font-heading font-bold">{user?.name || 'Guest'}</div>
110+
<div className="text-slate-400 text-[10px] uppercase tracking-wider">Student</div>
111+
</div>
112+
<div className="w-9 h-9 bg-slate-200 dark:bg-slate-700 rounded-full flex items-center justify-center overflow-hidden border-2 border-white dark:border-slate-800 ring-1 ring-slate-200 dark:ring-slate-700">
113+
{user?.avatar ? (
114+
<img src={user.avatar} alt="Profile" className="w-full h-full object-cover" />
115+
) : (
116+
<span className="text-slate-600 dark:text-slate-300 font-bold">
117+
{user?.name?.charAt(0).toUpperCase() || 'U'}
118+
</span>
119+
)}
112120
</div>
113-
<span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden md:block">
114-
{user?.name || 'User'}
115-
</span>
116121
</button>
117122

118123
{/* Dropdown Menu */}
@@ -122,47 +127,48 @@ const Navbar = ({ toggleSidebar, isSidebarOpen }) => {
122127
className="fixed inset-0 z-10"
123128
onClick={() => setShowProfileMenu(false)}
124129
/>
125-
<div className="absolute right-0 mt-2 w-64 bg-white/95 dark:bg-gray-800/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-gray-200/50 dark:border-gray-700/50 py-2 z-20 animate-fade-in">
126-
<div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
127-
<p className="text-sm font-semibold text-gray-900 dark:text-white">
130+
<div className="absolute right-0 mt-3 w-72 bg-white dark:bg-slate-900 rounded-2xl shadow-2xl shadow-slate-200/50 dark:shadow-black/50 border border-slate-100 dark:border-slate-800 py-2 z-20 animate-enter transform origin-top-right">
131+
<div className="px-5 py-4 border-b border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50">
132+
<p className="text-sm font-bold text-slate-900 dark:text-white font-heading">
128133
{user?.name || 'User'}
129134
</p>
130-
<p className="text-xs text-gray-500 dark:text-gray-400 truncate">
135+
<p className="text-xs text-slate-500 dark:text-slate-400 truncate mb-3">
131136
{user?.email || 'user@example.com'}
132137
</p>
133-
<div className="flex gap-2 mt-2">
134-
<Badge variant="primary" size="sm">Level 7</Badge>
135-
<Badge variant="success" size="sm">🔥 12 days</Badge>
138+
<div className="flex gap-2">
139+
<Badge variant="primary" size="sm" className="bg-blue-100 text-blue-700 border-none">Pro Plan</Badge>
136140
</div>
137141
</div>
138142

139-
<Link
140-
to="/profile"
141-
className="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gradient-to-r hover:from-blue-50 hover:to-teal-50 dark:hover:from-gray-700 dark:hover:to-gray-600 transition-all"
142-
onClick={() => setShowProfileMenu(false)}
143-
>
144-
<User className="w-4 h-4" />
145-
My Profile
146-
</Link>
147-
148-
<Link
149-
to="/settings"
150-
className="flex items-center gap-3 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gradient-to-r hover:from-blue-50 hover:to-teal-50 dark:hover:from-gray-700 dark:hover:to-gray-600 transition-all"
151-
onClick={() => setShowProfileMenu(false)}
152-
>
153-
<Settings className="w-4 h-4" />
154-
Settings
155-
</Link>
143+
<div className="p-2">
144+
<Link
145+
to="/profile"
146+
className="flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-lg transition-all"
147+
onClick={() => setShowProfileMenu(false)}
148+
>
149+
<User className="w-4 h-4 text-slate-400" />
150+
My Profile
151+
</Link>
156152

157-
<hr className="my-2 border-gray-200 dark:border-gray-700" />
153+
<Link
154+
to="/settings"
155+
className="flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-lg transition-all"
156+
onClick={() => setShowProfileMenu(false)}
157+
>
158+
<Settings className="w-4 h-4 text-slate-400" />
159+
Account Settings
160+
</Link>
161+
</div>
158162

159-
<button
160-
onClick={handleLogout}
161-
className="flex items-center gap-3 px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 w-full transition-all"
162-
>
163-
<LogOut className="w-4 h-4" />
164-
Logout
165-
</button>
163+
<div className="p-2 border-t border-slate-100 dark:border-slate-800">
164+
<button
165+
onClick={handleLogout}
166+
className="flex items-center gap-3 px-3 py-2.5 text-sm font-medium text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-900/10 rounded-lg w-full transition-all"
167+
>
168+
<LogOut className="w-4 h-4" />
169+
Sign Out
170+
</button>
171+
</div>
166172
</div>
167173
</>
168174
)}

0 commit comments

Comments
 (0)