Skip to content

Commit 62ce444

Browse files
Miran-FirdausiMiran-Firdausi
committed
fix: navbar styling
1 parent 65f18a1 commit 62ce444

File tree

5 files changed

+61
-47
lines changed

5 files changed

+61
-47
lines changed

‎src/App.jsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,9 @@ import CursorVariantProvider from "@/context/CursorVariantProvider";
99
const navLinks = [
1010
{ name: "About Us", path: "/about-us" },
1111
{ name: "Our Team", path: "/teams" },
12-
{ name: "Events", path: "/events" },
1312
{ name: "Gallery", path: "/gallery" },
13+
{ name: "Events", path: "/events" },
1414
{ name: "Contact", path: "/contact" },
15-
{ name: "Community", path: "/community" },
1615
];
1716

1817
function App() {

‎src/components/Navbar/index.jsx‎

Lines changed: 46 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,74 @@
1-
import { useState } from "react";
1+
import { useState, useContext } from "react";
22
import { Link, useLocation } from "react-router-dom";
33
import PropTypes from "prop-types";
44
import Logo from "@/assets/images/logo.svg";
55
import closeIcon from "@/assets/images/close.svg";
66
import menuIcon from "@/assets/images/menu.svg";
7+
import { CursorVariantContext } from "@/context/CursorVariantProvider";
78

89
function Navbar({ links }) {
910
const [isOpen, setIsOpen] = useState(false);
1011
const location = useLocation();
1112

13+
const { setCursorVariantNone, setCursorVariantDefault } =
14+
useContext(CursorVariantContext);
15+
1216
const handleLinkClick = () => {
1317
setIsOpen(false);
1418
};
1519

1620
return (
17-
<nav className="shadow-md w-full flex flex-wrap justify-between items-center px-6 bg-secondary-dark relative">
18-
<Link to="/" className="cursor-pointer">
19-
<img src={Logo} alt="logo" />
20-
</Link>
21-
22-
<button
23-
type="button"
24-
onClick={() => setIsOpen(!isOpen)}
25-
className="w-7 h-7 text-white cursor-pointer md:hidden"
26-
>
27-
{isOpen ? (
28-
<img src={closeIcon} alt="close" />
29-
) : (
30-
<img src={menuIcon} alt="menu" />
31-
)}
32-
</button>
33-
21+
<nav
22+
className={`shadow-md w-full flex xs:flex-col md:flex-row ${isOpen ? "xs:h-screen" : ""} md:h-full justify-between items-center px-6 bg-secondary-dark`}
23+
>
24+
<div className="flex flex-row justify-between xs:w-full md:w-auto items-center">
25+
<Link
26+
to="/"
27+
className="cursor-pointer"
28+
onMouseEnter={setCursorVariantNone}
29+
onMouseLeave={setCursorVariantDefault}
30+
>
31+
<img src={Logo} className="w-[10rem]" alt="logo" />
32+
</Link>
33+
<button
34+
type="button"
35+
onClick={() => setIsOpen(!isOpen)}
36+
className="w-7 h-7 text-white cursor-pointer md:hidden"
37+
>
38+
{isOpen ? (
39+
<img src={closeIcon} alt="close" />
40+
) : (
41+
<img src={menuIcon} alt="menu" />
42+
)}
43+
</button>
44+
</div>
3445
<ul
3546
className={`
36-
pl-0 justify-start md:justify-center
37-
md:flex md:items-center md:w-auto w-full md:pb-0 pb-12 md:static
38-
absolute md:bg-transparent bg-secondary-dark md:z-auto z-50 left-0
39-
transition-all duration-500 ease-in ${isOpen ? "top-full" : "top-[-490px]" }
47+
md:flex pl-0 justify-start md:justify-center md:items-center md:pb-0 md:z-auto left-0 xs:justify-center xs:gap-y-12
48+
${isOpen ? "flex flex-col grow" : "hidden"}
4049
`}
50+
onMouseEnter={setCursorVariantNone}
51+
onMouseLeave={setCursorVariantDefault}
4152
>
4253
{links.map((link) => (
4354
<li
4455
key={link.name}
45-
className="md:ml-8 md:my-0 my-7 font-semibold relative"
56+
className={`
57+
group font-regular text-white text-center md:my-0 md:ml-8 transition-all hover:text-primary
58+
`}
4659
>
47-
<Link
48-
to={link.path}
49-
className={`
50-
text-white text-center block px-3 py-2 relative
51-
after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5
52-
after:bg-red-500 after:transition-all after:duration-300 after:scale-x-0 after:origin-left
53-
hover:after:scale-x-100
54-
${
55-
location.pathname
56-
.toLowerCase()
57-
.includes(link.path.toLowerCase())
58-
? "w-full"
59-
: "max-w-0"
60-
}
61-
`}
62-
onClick={handleLinkClick}
63-
>
60+
<Link to={link.path} onClick={handleLinkClick}>
6461
{link.name}
6562
</Link>
63+
<span
64+
className={`block group-hover:max-w-full transition-all duration-500 h-0.5 bg-primary rounded ${
65+
location.pathname
66+
.toLowerCase()
67+
.includes(link.path.toLowerCase())
68+
? "w-full"
69+
: "max-w-0"
70+
}`}
71+
></span>
6672
</li>
6773
))}
6874
</ul>

‎src/pages/Teams/TeamMember.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ function TeamMember({ member }) {
99
member;
1010

1111
return (
12-
<div className="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 hover:drop-shadow-2xl drop-shadow-background cursor-pointer bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 space-y-4 align-middle aspect-ratio aspect-ratio-1/1">
13-
<div className="border-8xl border-4 border-secondary-light bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl overflow-hidden p-3 space-y-4 align-middle aspect-ratio aspect-ratio-1/1">
12+
<div className="transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-105 duration-200 hover:drop-shadow-2xl drop-shadow-background cursor-pointer bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl shadow-2xl shadow-background overflow-hidden p-2 space-y-4 align-middle max-w-[350px]">
13+
<div className="pt-12 border-8xl border-4 h-full border-secondary-light bg-gradient-to-br from-gradient-light to-gradient-dark rounded-3xl overflow-hidden p-3 space-y-4 align-middle">
1414
<img
1515
src={image}
1616
alt={name}
17-
className="w-40 h-40 p-2 rounded-full mx-auto"
17+
className="w-32 h-32 rounded-full mx-auto"
1818
/>
19-
<h2 className="text-3xl font-poppins font-semi-bold text-center text-text-light">
19+
<h2 className="text-2xl mt-16 font-poppins font-thin text-center text-text-light">
2020
{name}
2121
</h2>
2222
<p className="text-l font-poppins text-center font-bold text-text-light">

‎src/pages/Teams/index.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ function Teams() {
1818
text="MEET OUR TEAM"
1919
className="text-center absolute top-0 left-0 right-0 mb-24"
2020
/>
21-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 grid-rows-auto mt-12">
21+
<div className="flex flex-row flex-wrap gap-6 justify-center items-center mt-12">
2222
{teamMembers}
2323
</div>
2424
<SkewButton text="SEE ALL" link="/all-members" className="mt-16" />

‎src/pages/Teams/teamsdata.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,15 @@
1717
"instagram": "https://instagram.com/jane_doe",
1818
"github": "https://github.com/jane-doe"
1919
},
20+
{
21+
"name": "Saksham Gupta",
22+
"position": "VICE-PRESIDENT",
23+
"image": "/CodeX-Website/images/teams/Saksham-Gupta.jpeg",
24+
"description": "Praesent vestibulum libero non diam Praesent vestibulum libero non diam",
25+
"linkedin": "https://linkedin.com/in/john-doe",
26+
"instagram": "https://instagram.com/john_doe",
27+
"github": "https://github.com/john-doe"
28+
},
2029
{
2130
"name": "Saksham Gupta",
2231
"position": "VICE-PRESIDENT",

0 commit comments

Comments
 (0)