Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made NavBar responsive #21

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Made NavBar responsive #21

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
3aee09a
Added NavBar
mrshivamshaw Oct 21, 2023
833cf08
Udated
mrshivamshaw Oct 21, 2023
d20411d
Done
mrshivamshaw Oct 21, 2023
4738a34
done navBar
mrshivamshaw Oct 26, 2023
aae3612
Merge branch 'gdsc-aec-india:main' into my-branch
mrshivamshaw Oct 28, 2023
79d290b
Made NavBar responsive
mrshivamshaw Oct 28, 2023
2944887
updated
mrshivamshaw Oct 28, 2023
9fae706
updated
mrshivamshaw Oct 28, 2023
0395272
check
mrshivamshaw Oct 29, 2023
080b19b
Updated NavBar
mrshivamshaw Oct 29, 2023
972820a
done
mrshivamshaw Oct 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.11.0",
"react-router-dom": "^6.17.0",
"web-vitals": "^2.1.4"
},
"repository": {
Expand Down
79 changes: 63 additions & 16 deletions src/components/NavBar/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,69 @@
import React from 'react'
import Logo from '../../Assests/gdsc-logo.png'
import React, { useState } from "react";
import { FaBars, FaTimes } from "react-icons/fa";
import Logo from "../../Assests/gdsc-logo.png";
const Navbar = () => {
const [click, setClick] = useState(false);

return (
<div className='w-[100%] flex justify-center items-center py-6 relative'>
<div className='flex justify-center items-center absolute left-[5vw] gap-1'>
<img src={Logo} alt="image" className='h-[3.5rem]'/>
<h1 className='font-bold text-lg text-[#767676]'>GDSC AEC</h1>
</div>
<div style={{boxShadow:' 0 0 10px rgba(0, 0, 0, 0.2)'}} className=' px-[5em] rounded-full '>
<ul className=' flex justify-center items-center gap-12 drop-shadow-2xl text-sm h-[6.4vh] text-[#535353] transition-all delay-300'>
<li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>About us</li>
<li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Event</li>
<li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Our Team</li>
<li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Contact</li>
<div className="w-[100%] h-[12vh] flex justify-between md:justify-center lg:justify-center items-center px-[5vw] md:px-0 lg:px-0 py-6 relative">
<div className="flex justify-center items-center md:absolute lg:absolute md:left-[5vw] lg:left-[5vw] gap-1">
<img src={Logo} alt="image" className="h-[3.5rem]" />
<h1 className="font-bold text-lg text-[#767676]">GDSC AEC</h1>
</div>

<div
className="p-3 rounded-full block lg:hidden md:hidden z-40"
style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
>
{click ? (
<FaTimes onClick={() => setClick(!click)} className="z-20 relative hover:cursor-pointer"/>
) : (
<FaBars onClick={() => setClick(!click)} className="z-20 relative hover:cursor-pointer" />
)}
{click && (
<div
className="w-[12rem] h-[17rem] bg-white absolute z-10 top-0 right-0 block lg:hidden md:hidden rounded-lg"
style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
>
<ul className=" flex flex-col justify-center mt-[13vh] gap-4 items-center text-md text-[#535353]">
<li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
<a href="#about">About us</a>
</li>
<li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
<a href="#event">Event</a>
</li>
<li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
<a href="#team">Our team</a>
</li>
<li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
)}
</div>

<div
style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
className=" px-[5em] rounded-full hidden md:block lg:block md:ml-[20vw] lg:ml-0"
>
<ul className=" flex justify-center items-center gap-12 text-sm h-[6.4vh] text-[#535353] transition-all delay-300">
<li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
<a href="#about">About us</a>
</li>
<li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
<a href="#event">Event</a>
</li>
<li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
<a href="#team">Our team</a>
</li>
<li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
)
}
);
};

export default Navbar
export default Navbar;