1
- import React , { useState } from ' react' ;
2
- import logo from '.. /assets/images/logo.png' ;
3
- import { Link , useNavigate } from ' react-router-dom' ;
4
- import courses from './ courseData' ;
1
+ import React , { useState } from " react" ;
2
+ import logo from "@ /assets/images/logo.png" ;
3
+ import { Link , useNavigate } from " react-router-dom" ;
4
+ import courses from "@/data/ courseData" ;
5
5
6
6
function Navbar ( { loggedin } ) {
7
- const [ searchTerm , setSearchTerm ] = useState ( '' ) ;
7
+ const [ searchTerm , setSearchTerm ] = useState ( "" ) ;
8
8
const [ suggestions , setSuggestions ] = useState ( [ ] ) ;
9
9
const navigate = useNavigate ( ) ;
10
10
@@ -16,7 +16,7 @@ function Navbar({ loggedin }) {
16
16
17
17
if ( searchInput . trim ( ) ) {
18
18
const filteredSuggestions = coursesArray . filter ( ( course ) =>
19
- course . title . toLowerCase ( ) . includes ( searchInput . toLowerCase ( ) )
19
+ course . title . toLowerCase ( ) . includes ( searchInput . toLowerCase ( ) ) ,
20
20
) ;
21
21
setSuggestions ( filteredSuggestions ) ;
22
22
} else {
@@ -28,7 +28,7 @@ function Navbar({ loggedin }) {
28
28
event . preventDefault ( ) ;
29
29
if ( searchTerm . trim ( ) ) {
30
30
navigate ( `/search?query=${ encodeURIComponent ( searchTerm ) } ` ) ;
31
- setSuggestions ( [ ] ) ;
31
+ setSuggestions ( [ ] ) ;
32
32
}
33
33
} ;
34
34
@@ -41,43 +41,90 @@ function Navbar({ loggedin }) {
41
41
return (
42
42
< nav className = "navbar navbar-expand-lg sticky-top bg-body-tertiary" >
43
43
< div className = "container-fluid" >
44
- < button className = "navbar-toggler" type = "button" data-bs-toggle = "collapse"
45
- data-bs-target = "#navbarExample" aria-controls = "navbarExample" aria-expanded = "false" aria-label = "Toggle navigation" >
44
+ < button
45
+ className = "navbar-toggler"
46
+ type = "button"
47
+ data-bs-toggle = "collapse"
48
+ data-bs-target = "#navbarExample"
49
+ aria-controls = "navbarExample"
50
+ aria-expanded = "false"
51
+ aria-label = "Toggle navigation"
52
+ >
46
53
< span className = "navbar-toggler-icon" > </ span >
47
54
</ button >
48
- < Link className = "navbar-brand" to = "/" > < img src = { logo } width = "36" alt = "Logo" className = "rounded-circle" /> </ Link >
55
+ < Link className = "navbar-brand" to = "/" >
56
+ < img src = { logo } width = "36" alt = "Logo" className = "rounded-circle" />
57
+ </ Link >
49
58
< div className = "collapse navbar-collapse" id = "navbarExample" >
50
59
< ul className = "navbar-nav me-auto mb-0" >
51
- { loggedin === ' true' ? (
60
+ { loggedin === " true" ? (
52
61
< li className = "nav-item" >
53
- < Link className = "nav-link active" aria-current = "page" to = "/home" > Home</ Link >
62
+ < Link
63
+ className = "nav-link active"
64
+ aria-current = "page"
65
+ to = "/home"
66
+ >
67
+ Home
68
+ </ Link >
54
69
</ li >
55
70
) : (
56
71
< li className = "nav-item" >
57
- < Link className = "nav-link active" aria-current = "page" to = "/" > Home</ Link >
72
+ < Link className = "nav-link active" aria-current = "page" to = "/" >
73
+ Home
74
+ </ Link >
58
75
</ li >
59
76
) }
60
77
< li className = "nav-item" >
61
- < Link className = "nav-link" aria-current = "page" to = "/events" > Events</ Link >
78
+ < Link className = "nav-link" aria-current = "page" to = "/events" >
79
+ Events
80
+ </ Link >
62
81
</ li >
63
82
< li className = "nav-item dropdown" >
64
- < Link className = "nav-link dropdown-toggle" to = "#" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false" > Courses</ Link >
83
+ < Link
84
+ className = "nav-link dropdown-toggle"
85
+ to = "#"
86
+ role = "button"
87
+ data-bs-toggle = "dropdown"
88
+ aria-expanded = "false"
89
+ >
90
+ Courses
91
+ </ Link >
65
92
< ul className = "dropdown-menu" >
66
- < li > < Link className = "dropdown-item" to = "/programming-languages" > Programming Languages</ Link > </ li >
67
- < li > < Link className = "dropdown-item" to = "/frameworks" > Frameworks</ Link > </ li >
68
- < li > < hr className = "dropdown-divider" /> </ li >
69
- < li > < Link className = "dropdown-item" to = "/roadmaps" > Roadmaps</ Link > </ li >
93
+ < li >
94
+ < Link className = "dropdown-item" to = "/programming-languages" >
95
+ Programming Languages
96
+ </ Link >
97
+ </ li >
98
+ < li >
99
+ < Link className = "dropdown-item" to = "/frameworks" >
100
+ Frameworks
101
+ </ Link >
102
+ </ li >
103
+ < li >
104
+ < hr className = "dropdown-divider" />
105
+ </ li >
106
+ < li >
107
+ < Link className = "dropdown-item" to = "/roadmaps" >
108
+ Roadmaps
109
+ </ Link >
110
+ </ li >
70
111
</ ul >
71
112
</ li >
72
113
</ ul >
73
114
74
- { loggedin === ' true' ? (
115
+ { loggedin === " true" ? (
75
116
< div className = "d-flex align-items-center flex-column flex-lg-row" >
76
-
77
117
< div className = "me-2 mb-2 mb-lg-0 position-relative" >
78
118
< form className = "input-group" onSubmit = { handleSearchSubmit } >
79
119
< span className = "input-group-text" id = "basic-addon1" >
80
- < svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" className = "bi bi-search" viewBox = "0 0 16 16" >
120
+ < svg
121
+ xmlns = "http://www.w3.org/2000/svg"
122
+ width = "16"
123
+ height = "16"
124
+ fill = "currentColor"
125
+ className = "bi bi-search"
126
+ viewBox = "0 0 16 16"
127
+ >
81
128
< path d = "M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" > </ path >
82
129
</ svg >
83
130
</ span >
@@ -91,24 +138,34 @@ function Navbar({ loggedin }) {
91
138
</ form >
92
139
93
140
{ suggestions . length > 0 && (
94
- < ul className = "list-group position-absolute w-100 mt-1 z-index-1000" style = { { zIndex : '1000' } } >
141
+ < ul
142
+ className = "list-group position-absolute w-100 mt-1 z-index-1000"
143
+ style = { { zIndex : "1000" } }
144
+ >
95
145
{ suggestions . map ( ( suggestion , index ) => (
96
146
< li
97
147
key = { index }
98
148
className = "list-group-item"
99
149
onClick = { ( ) => handleSuggestionClick ( suggestion ) }
100
- style = { { cursor : ' pointer' } }
150
+ style = { { cursor : " pointer" } }
101
151
>
102
152
{ suggestion . title }
103
153
</ li >
104
154
) ) }
105
155
</ ul >
106
156
) }
107
157
</ div >
108
- < span > < Link className = "btn clk rounded-circle" to = "/profile" > < i className = "fa-regular fa-user" > </ i > </ Link > Profile</ span >
158
+ < span >
159
+ < Link className = "btn clk rounded-circle" to = "/profile" >
160
+ < i className = "fa-regular fa-user" > </ i >
161
+ </ Link > { " " }
162
+ Profile
163
+ </ span >
109
164
</ div >
110
165
) : (
111
- < Link className = "btn btn-primary clk" to = "/login" > Sign up</ Link >
166
+ < Link className = "btn btn-primary clk" to = "/login" >
167
+ Sign up
168
+ </ Link >
112
169
) }
113
170
</ div >
114
171
</ div >
0 commit comments