Skip to content

make the navber in center #8

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

Open
kashif-hussain6 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

make the navber in center #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab7b6fe
make the navber in center
kashif-hussain6 Aug 7, 2024
c9782b7
fix the bug issue
kashif-hussain6 Aug 19, 2024
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
5 changes: 3 additions & 2 deletions src/components/banner/LeftBanner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ const LeftBanner = () => {
<div className="flex flex-col gap-5">
<h4 className=" text-lg font-normal">WELCOME TO MY WORLD</h4>
<h1 className="text-5xl font-bold text-white">
Hi, I'm{" "}
Hi, I'm{ " "}


<span className="text-designColor text-6xl capitalize">
Kashif Hussain
</span>
Expand All @@ -36,7 +38,6 @@ const LeftBanner = () => {
Node.js.
</p>
</div>
{/* Media */}
<Media />
</div>
);
Expand Down
169 changes: 88 additions & 81 deletions src/components/navbar/Navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,93 +8,100 @@ import { navLinksdata } from "../../constants";

const Navbar = () => {
const [showMenu, setShowMenu] = useState(false);

return (
<div className="w-full h-24 sticky top-0 z-50 bg-bodyColor mx-auto flex justify-between items-center font-titleFont border-b-[1px] border-b-gray-600">
<div>
<img className="w-72 h-64" src={logo} alt="logo" />
</div>
<div>
<ul className="hidden mdl:inline-flex items-center gap-6 lg:gap-10">
{navLinksdata.map(({ _id, title, link }) => (
<li
className="text-base font-normal text-gray-400 tracking-wide cursor-pointer hover:text-designColor duration-300"
key={_id}
>
<Link
activeClass="active"
to={link}
spy={true}
smooth={true}
offset={-70}
duration={500}

<div className="w-full h-24 sticky top-0 z-50 bg-bodyColor mx-auto flex justify-center items-center font-titleFont border-b-[1px] border-b-gray-600">

<div className="max-w-[1400px] w-full mx-auto flex justify-between items-center ">
<div>

<img className="w-60 mr-3 h-auto" src={logo} alt="logo" />
</div>
<div className="flex items-center">

<ul className="hidden mdl:inline-flex items-center gap-6 lg:gap-10">
{navLinksdata.map(({ _id, title, link }) => (
<li
className="text-base font-normal text-gray-400 tracking-wide cursor-pointer hover:text-designColor duration-300"
key={_id}
>
{title}
</Link>
</li>
))}
</ul>
<span
onClick={() => setShowMenu(!showMenu)}
className="text-xl mdl:hidden bg-black w-10 h-10 inline-flex items-center justify-center rounded-full text-designColor cursor-pointer"
>
<FiMenu />
</span>
{showMenu && (
<div className="w-[80%] h-screen overflow-scroll absolute top-0 left-0 bg-gray-900 p-4 scrollbar-hide">
<div className="flex flex-col gap-8 py-2 relative">
<div>
<img className="w-32" src={logo} alt="logo" />
<p className="text-sm text-gray-400 mt-2">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Earum soluta perspiciatis molestias enim cum repellat, magnam
exercitationem distinctio aliquid nam.
</p>
</div>
<ul className="flex flex-col gap-4">
{navLinksdata.map((item) => (
<li
key={item._id}
className="text-base font-normal text-gray-400 tracking-wide cursor-pointer hover:text-designColor duration-300"
>
<Link
onClick={() => setShowMenu(false)}
activeClass="active"
to={item.link}
spy={true}
smooth={true}
offset={-70}
duration={500}
<Link
activeClass="active"
to={link}
spy={true}
smooth={true}
offset={-70}
duration={500}
>
{title}
</Link>
</li>
))}
</ul>
<span
onClick={() => setShowMenu(!showMenu)}
className="text-xl mdl:hidden bg-black w-10 h-10 inline-flex items-center justify-center rounded-full text-designColor cursor-pointer"
>
<FiMenu />
</span>
{showMenu && (
<div className="w-[80%] h-screen overflow-scroll absolute top-0 left-0 bg-gray-900 p-4 scrollbar-hide">
<div className="flex flex-col gap-8 py-2 relative">
<div>
<img className="w-32" src={logo} alt="logo" />
<p className="text-sm text-gray-400 mt-2">
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Earum soluta perspiciatis molestias enim cum repellat,
magnam exercitationem distinctio aliquid nam.
</p>
</div>
<ul className="flex flex-col gap-4">
{navLinksdata.map((item) => (
<li
key={item._id}
className="text-base font-normal text-gray-400 tracking-wide cursor-pointer hover:text-designColor duration-300"
>
{item.title}
</Link>
</li>
))}
</ul>
<div className="flex flex-col gap-4">
<h2 className="text-base uppercase font-titleFont mb-4">
Find me in
</h2>
<div className="flex gap-4">
<span className="bannerIcon">
<FaFacebookF />
</span>
<span className="bannerIcon">
<FaTwitter />
</span>
<span className="bannerIcon">
<FaLinkedinIn />
</span>
<Link
onClick={() => setShowMenu(false)}
activeClass="active"
to={item.link}
spy={true}
smooth={true}
offset={-70}
duration={500}
>
{item.title}
</Link>
</li>
))}
</ul>
<div className="flex flex-col gap-4">
<h2 className="text-base uppercase font-titleFont mb-4">
Find me in
</h2>
<div className="flex gap-4">
<span className="bannerIcon">
<FaFacebookF />
</span>
<span className="bannerIcon">
<FaTwitter />
</span>
<span className="bannerIcon">
<FaLinkedinIn />
</span>
</div>
</div>
<span
onClick={() => setShowMenu(false)}
className="absolute top-4 right-4 text-gray-400 hover:text-designColor duration-300 text-2xl cursor-pointer"
>
<MdClose />
</span>
</div>
<span
onClick={() => setShowMenu(false)}
className="absolute top-4 right-4 text-gray-400 hover:text-designColor duration-300 text-2xl cursor-pointer"
>
<MdClose />
</span>
</div>
</div>
)}
)}
</div>
</div>
</div>
);
Expand Down
5 changes: 4 additions & 1 deletion src/constants/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
export const navLinksdata = [

{
_id: 1001,
_id: 1000,
title: "Home",
link: "home",

},

{
_id: 1002,
title: "Features",
Expand Down