Skip to content

Commit 8fca154

Browse files
Yash636261Yash636261
authored
Merge pull request #19 from mohitparmar1/navbar-hover
Fixed UI error on navbar hover effect
2 parents 173a81b + 86e678e commit 8fca154

File tree

1 file changed

+66
-65
lines changed

1 file changed

+66
-65
lines changed

Diff for: ‎Technodes/src/components/Navbar.jsx

+66-65
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,21 @@ import { Link } from "react-router-dom";
44

55
export default function Navbar() {
66
const [isDropdownOpen, setDropdownOpen] = useState(false);
7-
const [Toggle , setToggle] = useState(false);
8-
7+
const [Toggle, setToggle] = useState(false);
98

109
const toggleDropdown = () => {
1110
setDropdownOpen(!isDropdownOpen);
1211
};
1312

14-
const toggleMenu =() =>{
13+
const toggleMenu = () => {
1514
setToggle(!Toggle);
16-
}
15+
};
1716

1817
return (
1918
<div className="px-[2vw] pt-5 bg-primary fixed w-full z-10">
2019
<nav className="bg-white border-gray-200 dark:bg-secondary rounded-2xl fixed w-[94vw] z-10">
2120
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
22-
<Link to='/' className="flex items-center">
21+
<Link to="/" className="flex items-center">
2322
<img src={logo} className="h-8 mr-3" alt="TechNodes" />
2423
<span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
2524
TechNodes
@@ -114,96 +113,98 @@ export default function Navbar() {
114113
>
115114
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-secondary dark:border-gray-700">
116115
<li>
117-
<a
118-
href="#"
119-
className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-white-400 md:p-0 md:dark:white"
116+
<Link
117+
to="/"
118+
className="block py-2 pl-3 pr-4 text-white rounded md:bg-transparent md:text-white-400 md:p-0 md:dark:white md:hover:text-black "
120119
aria-current="page"
121120
>
122121
About us
123-
</a>
122+
</Link>
124123
</li>
125124
<li>
126125
<Link
127-
to='/Projects'
128-
className="block py-2 pl-3 pr-4 text-textcolor rounded hover:textdark md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
126+
to="/Projects"
127+
className="block py-2 pl-3 pr-4 text-textcolor rounded hover:textdark md:hover:bg-transparent md:hover:text-black md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
129128
>
130129
Projects
131130
</Link>
132131
</li>
133132
<li>
134133
<Link
135-
to='/Event'
136-
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
134+
to="/Event"
135+
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-black md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
137136
>
138137
Events
139138
</Link>
140139
</li>
141140
<li>
142141
<Link
143-
to='/Team'
144-
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
142+
to="/Team"
143+
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-black md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
145144
>
146145
Team
147146
</Link>
148147
</li>
149148
<li>
150149
<Link
151-
to='/Contact'
152-
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
150+
to="/Contact"
151+
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-black md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
153152
>
154153
Contact
155154
</Link>
156155
</li>
157156
</ul>
158157
</div>
159-
{Toggle && <div
160-
className="items-center justify-between md:hidden w-full md:flex md:w-auto md:order-1"
161-
id="mobile-menu-2"
162-
>
163-
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-secondary dark:border-gray-700">
164-
<li>
165-
<a
166-
href="#"
167-
className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-white-400 md:p-0 md:dark:white"
168-
aria-current="page"
169-
>
170-
About us
171-
</a>
172-
</li>
173-
<li>
174-
<Link
175-
to='/Projects'
176-
className="block py-2 pl-3 pr-4 text-textcolor rounded hover:textdark md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
177-
>
178-
Projects
179-
</Link>
180-
</li>
181-
<li>
182-
<Link
183-
to='/Event'
184-
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
185-
>
186-
Events
187-
</Link>
188-
</li>
189-
<li>
190-
<Link
191-
to='/Team'
192-
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
193-
>
194-
Team
195-
</Link>
196-
</li>
197-
<li>
198-
<a
199-
href="#"
200-
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
201-
>
202-
Contact
203-
</a>
204-
</li>
205-
</ul>
206-
</div>}
158+
{Toggle && (
159+
<div
160+
className="items-center justify-between md:hidden w-full md:flex md:w-auto md:order-1"
161+
id="mobile-menu-2"
162+
>
163+
<ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-secondary dark:border-gray-700">
164+
<li>
165+
<a
166+
href="#"
167+
className="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-white-400 md:p-0 md:dark:white"
168+
aria-current="page"
169+
>
170+
About us
171+
</a>
172+
</li>
173+
<li>
174+
<Link
175+
to="/Projects"
176+
className="block py-2 pl-3 pr-4 text-textcolor rounded hover:textdark md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
177+
>
178+
Projects
179+
</Link>
180+
</li>
181+
<li>
182+
<Link
183+
to="/Event"
184+
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
185+
>
186+
Events
187+
</Link>
188+
</li>
189+
<li>
190+
<Link
191+
to="/Team"
192+
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
193+
>
194+
Team
195+
</Link>
196+
</li>
197+
<li>
198+
<a
199+
href="#"
200+
className="block py-2 pl-3 pr-4 text-secondary rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-textdark dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
201+
>
202+
Contact
203+
</a>
204+
</li>
205+
</ul>
206+
</div>
207+
)}
207208
</div>
208209
</nav>
209210
</div>

0 commit comments

Comments
 (0)