Skip to content

Commit 3afbc1a

Browse files
Ansh-2222Ansh-2222
committed
Shows the Dashboard button only if the User is an Architect
1 parent d548d89 commit 3afbc1a

1 file changed

Lines changed: 122 additions & 105 deletions

File tree

‎src/components/Navbar.tsx‎

Lines changed: 122 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -8,30 +8,39 @@ import UserProfileMenu from './UserProfileMenu';
88
import LanguageSelector from './LanguageSelector';
99
import { useTranslation } from 'react-i18next';
1010
import { useNavigate } from 'react-router-dom';
11+
import { supabase } from "@/integrations/supabase/client"; // ✅ Supabase client import
1112

1213
const Navbar: React.FC = () => {
1314
const [isOpen, setIsOpen] = useState(false);
1415
const [isScrolled, setIsScrolled] = useState(false);
15-
const [isServicesOpen, setIsServicesOpen] = useState(false); // Desktop dropdown
16-
const [isMobileServicesOpen, setIsMobileServicesOpen] = useState(false); // Mobile dropdown
16+
const [isServicesOpen, setIsServicesOpen] = useState(false);
17+
const [isMobileServicesOpen, setIsMobileServicesOpen] = useState(false);
18+
const [userRole, setUserRole] = useState<string | null>(null); // ✅ Store role
1719
const { user } = useAuth();
1820
const { t } = useTranslation();
1921
const navigate = useNavigate();
2022

21-
23+
// ✅ Fetch user role
2224
useEffect(() => {
23-
const handleScroll = () => {
24-
if (window.scrollY > 10) {
25-
setIsScrolled(true);
26-
} else {
27-
setIsScrolled(false);
25+
const fetchUserRole = async () => {
26+
if (user?.id) {
27+
const { data, error } = await supabase
28+
.from('profiles')
29+
.select('user_role')
30+
.eq('id', user.id)
31+
.single();
32+
if (!error && data) {
33+
setUserRole(data.user_role);
34+
}
2835
}
2936
};
37+
fetchUserRole();
38+
}, [user]);
3039

40+
useEffect(() => {
41+
const handleScroll = () => setIsScrolled(window.scrollY > 10);
3142
window.addEventListener('scroll', handleScroll);
32-
return () => {
33-
window.removeEventListener('scroll', handleScroll);
34-
};
43+
return () => window.removeEventListener('scroll', handleScroll);
3544
}, []);
3645

3746
const handleSearchClick = () => {
@@ -90,30 +99,44 @@ const Navbar: React.FC = () => {
9099
</button>
91100
<div
92101
className={`absolute top-full left-0 mt-2 w-48 bg-white shadow-lg rounded-md border border-gray-200 z-50
93-
overflow-hidden transition-all duration-300 ease-in-out
94-
${isServicesOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}`}
95-
onMouseEnter={() => setIsServicesOpen(true)}
96-
onMouseLeave={() => setIsServicesOpen(false)}
102+
overflow-hidden transition-all duration-300 ease-in-out
103+
${isServicesOpen ? 'max-h-[500px] opacity-100' : 'max-h-0 opacity-0'}`}
97104
>
98-
<Link to="/categories/workers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Worker</Link>
99-
{/* <Link to="/categories/houseowners" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Home Owners</Link> */}
100-
<Link to="/categories/architects" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Architects/Designers</Link>
101-
<Link to="/categories/contractors" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Contractors</Link>
102-
<Link to="/categories/developers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Developers</Link>
103-
<Link to="/categories/suppliers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100">Material Suppliers</Link>
105+
<Link to="/categories/workers" className="block px-4 py-2 hover:bg-gray-100">
106+
Worker
107+
</Link>
108+
<Link to="/categories/architects" className="block px-4 py-2 hover:bg-gray-100">
109+
Architects/Designers
110+
</Link>
111+
<Link to="/categories/contractors" className="block px-4 py-2 hover:bg-gray-100">
112+
Contractors
113+
</Link>
114+
<Link to="/categories/developers" className="block px-4 py-2 hover:bg-gray-100">
115+
Developers
116+
</Link>
117+
<Link to="/categories/suppliers" className="block px-4 py-2 hover:bg-gray-100">
118+
Material Suppliers
119+
</Link>
104120
</div>
105121
</div>
106122

107-
<Link to="/blog" className="text-foreground hover:text-primary transition-colors">{t('common.blog')}</Link>
108-
<Link to="/about" className="text-foreground hover:text-primary transition-colors">{t('common.about')}</Link>
109-
<Link to="/contact" className="text-foreground hover:text-primary transition-colors">{t('common.contact')}</Link>
123+
<Link to="/blog" className="text-foreground hover:text-primary">
124+
{t('common.blog')}
125+
</Link>
126+
<Link to="/about" className="text-foreground hover:text-primary">
127+
{t('common.about')}
128+
</Link>
129+
<Link to="/contact" className="text-foreground hover:text-primary">
130+
{t('common.contact')}
131+
</Link>
110132
</div>
111133

134+
{/* Desktop Right Side */}
112135
<div className="hidden md:flex items-center space-x-2">
113136
<LanguageSelector />
114137

115-
{/* ⚡ Architect Dashboard button added here */}
116-
{user && (
138+
{/* ✅ Only for architects */}
139+
{user && userRole === 'architect' && (
117140
<Button
118141
variant="outline"
119142
className="flex items-center space-x-2 border-primary text-primary hover:bg-primary hover:text-white"
@@ -178,92 +201,86 @@ const Navbar: React.FC = () => {
178201
{/* Services main link (redirect only) */}
179202
<Link to="/services" className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors" onClick={() => setIsOpen(false)}>Services</Link>
180203

181-
{/* New "All Services" mobile button */}
182-
<button
183-
className="w-full text-left px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors flex justify-between items-center"
184-
onClick={() => setIsMobileServicesOpen(!isMobileServicesOpen)}
185-
>
186-
{t('common.solutions')}
187-
<span className={`transform transition-transform duration-200 ${isMobileServicesOpen ? 'rotate-180' : 'rotate-0'}`}>▼</span>
188-
</button>
189-
190-
{isMobileServicesOpen && (
191-
<div className="pl-4 mt-2 space-y-1">
192-
<Link to="/categories/workers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Worker</Link>
193-
{/* <Link to="/categories/houseowners" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Home Owners</Link> */}
194-
<Link to="/categories/architects" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Architects/Designers</Link>
195-
<Link to="/categories/contractors" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Contractors</Link>
196-
<Link to="/categories/developers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Developers</Link>
197-
<Link to="/categories/suppliers" className="block px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md" onClick={() => setIsOpen(false)}>Material Suppliers</Link>
198-
</div>
199-
)}
204+
{/* Solutions dropdown */}
205+
<button
206+
className="w-full text-left px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted flex justify-between items-center"
207+
onClick={() => setIsMobileServicesOpen(!isMobileServicesOpen)}
208+
>
209+
{t('common.solutions')}
210+
<span
211+
className={`transform transition-transform duration-200 ${
212+
isMobileServicesOpen ? 'rotate-180' : 'rotate-0'
213+
}`}
214+
>
215+
▼
216+
</span>
217+
</button>
200218

201-
<Link to="/blog" className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors" onClick={() => setIsOpen(false)}>Blog</Link>
202-
<Link to="/about" className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors" onClick={() => setIsOpen(false)}>About</Link>
203-
<Link to="/contact" className="block px-3 py-2 rounded-md text-base font-medium text-foreground hover:bg-muted hover:text-primary transition-colors" onClick={() => setIsOpen(false)}>Contact</Link>
219+
{isMobileServicesOpen && (
220+
<div className="pl-4 mt-2 space-y-1">
221+
<Link to="/categories/workers" className="block px-4 py-2 hover:bg-gray-100" onClick={() => setIsOpen(false)}>
222+
Worker
223+
</Link>
224+
<Link to="/categories/architects" className="block px-4 py-2 hover:bg-gray-100" onClick={() => setIsOpen(false)}>
225+
Architects/Designers
226+
</Link>
227+
<Link to="/categories/contractors" className="block px-4 py-2 hover:bg-gray-100" onClick={() => setIsOpen(false)}>
228+
Contractors
229+
</Link>
230+
<Link to="/categories/developers" className="block px-4 py-2 hover:bg-gray-100" onClick={() => setIsOpen(false)}>
231+
Developers
232+
</Link>
233+
<Link to="/categories/suppliers" className="block px-4 py-2 hover:bg-gray-100" onClick={() => setIsOpen(false)}>
234+
Material Suppliers
235+
</Link>
236+
</div>
237+
)}
204238

205-
<div className="pt-2 space-y-2">
239+
<Link to="/blog" className="block px-3 py-2 hover:bg-muted" onClick={() => setIsOpen(false)}>
240+
Blog
241+
</Link>
242+
<Link to="/about" className="block px-3 py-2 hover:bg-muted" onClick={() => setIsOpen(false)}>
243+
About
244+
</Link>
245+
<Link to="/contact" className="block px-3 py-2 hover:bg-muted" onClick={() => setIsOpen(false)}>
246+
Contact
247+
</Link>
206248

207-
{/* Profile Button added above sign out */}
208-
{user && (
209-
<Button
210-
variant="outline"
211-
className="w-full flex items-center justify-center space-x-2"
212-
onClick={() => {
213-
setIsOpen(false);
214-
navigate('/profile'); // Navigate to profile route using react-router-dom
215-
}}
216-
>
217-
<User className="h-5 w-5" />
218-
<span>{t('common.profile')}</span>
219-
</Button>
220-
)}
249+
<div className="pt-2 space-y-2">
250+
{/* ✅ Only show Architect Dashboard if user role = architect */}
251+
{user && userRole === 'architect' && (
252+
<Button
253+
variant="outline"
254+
className="w-full flex items-center justify-center space-x-2"
255+
onClick={() => {
256+
setIsOpen(false);
257+
navigate('/architectDashboard');
258+
}}
259+
>
260+
<LayoutDashboard className="h-4 w-4" />
261+
<span>Architect Dashboard</span>
262+
</Button>
263+
)}
221264

222-
{/* 🔹 Architect Dashboard Button (added, do not remove) */}
223-
{user && (
224-
<Button
225-
variant="outline"
226-
className="w-full flex items-center justify-center space-x-2"
227-
onClick={() => {
228-
setIsOpen(false);
229-
navigate('/architectDashboard');
230-
}}
231-
>
232-
<span>Architect Dashboard</span>
233-
</Button>
234-
)}
235-
236-
{user ? (
237-
<UserProfileMenu />
238-
) : (
239-
<>
240-
<Button
241-
variant="outline"
242-
className="w-full animate-pulse-shadow"
243-
asChild
244-
onClick={() => setIsOpen(false)}
245-
>
246-
<Link to="/auth/login">{t('common.signIn')}</Link>
247-
</Button>
248-
<Button
249-
className="w-full animate-pulse-shadow"
250-
asChild
251-
onClick={() => setIsOpen(false)}
252-
>
253-
<Link to="/auth/register">{t('common.joinNow')}</Link>
254-
</Button>
255-
</>
265+
{user ? (
266+
<UserProfileMenu />
267+
) : (
268+
<>
269+
<Button variant="outline" className="w-full" asChild onClick={() => setIsOpen(false)}>
270+
<Link to="/auth/login">{t('common.signIn')}</Link>
271+
</Button>
272+
<Button className="w-full" asChild onClick={() => setIsOpen(false)}>
273+
<Link to="/auth/register">{t('common.joinNow')}</Link>
274+
</Button>
275+
</>
276+
)}
277+
</div>
278+
</div>
279+
</div>
256280
)}
257281
</div>
258-
</div>
259-
</div>
260-
)}
261-
262-
</div>
263282
</nav>
264283
);
265284
};
266285

267-
export default Navbar;
268-
269-
286+
export default Navbar;

0 commit comments

Comments
 (0)