Skip to content

Commit

Permalink
Merge pull request #386 from kapilG0/enhancement-gssoc
Browse files Browse the repository at this point in the history
After click on hamburger icons a box open up but after that cross icon should come in place of hamburger so user know to close that open box #302
abhay-raj19 authored Sep 6, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents e8817ee + 203bd9f commit 968f569
Showing 5 changed files with 521 additions and 5 deletions.
492 changes: 492 additions & 0 deletions package-lock.json
7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"aos": "^3.0.0-beta.6",
"font-awesome": "^4.7.0",
"gsap": "^3.12.5",
"locomotive-scroll": "^5.0.0-beta.12",
"lottie-react": "^2.4.0",
@@ -28,7 +29,7 @@
"start": "vite",
"build": "vite build",
"preview": "vite preview",
"dev":"vite"
"dev": "vite"
},
"eslintConfig": {
"extends": [
@@ -51,7 +52,7 @@
"devDependencies": {
"@emotion/babel-plugin": "^11.11.0",
"@vitejs/plugin-react": "^4.2.1",
"vite": "^5.2.11",
"esbuild": "^0.15.0"
"esbuild": "^0.15.0",
"vite": "^5.2.11"
}
}
1 change: 1 addition & 0 deletions src/App.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import 'font-awesome/css/font-awesome.min.css';

:root {
--primary-color: #6f55f2;
16 changes: 14 additions & 2 deletions src/components/Header/Header.jsx
Original file line number Diff line number Diff line change
@@ -30,6 +30,7 @@ const nav__links = [
},
];
const Header = ({ isDarkMode, setDarkMode }) => {
const [isClicked, setIsClicked] = useState(false)
const [open, setOpen] = useState(false);
const [headerBackground, setHeaderBackground] = useState(
isDarkMode ? "#111" : "#fff"
@@ -58,6 +59,14 @@ const Header = ({ isDarkMode, setDarkMode }) => {
headerRef.current.classList.remove("sticky_header");
}
};
const byClick=()=>{
if(isClicked==false){
setIsClicked(true);
}else{
setIsClicked(false);
}
toggleMobileMenu()
}

useEffect(() => {
setHeaderBackground(isDarkMode ? "#111" : "#fff");
@@ -127,11 +136,14 @@ const Header = ({ isDarkMode, setDarkMode }) => {
? { transform: 'translateX(0%)' }
: { transform: 'translateX(140%)' }
}
/>
/>
</div>
</div>

<div className="nav-btn">
<div
s onClick={byClick} className={`fa ${isClicked ? 'fa-times' : 'fa-bars'} ` }

>
<label htmlFor="nav-check">
<span></span>
<span></span>
10 changes: 10 additions & 0 deletions src/styles/header.css
Original file line number Diff line number Diff line change
@@ -187,6 +187,8 @@ ul {
.nav-btn {
display: block;
}



.nav-btn>label>span {
display: block;
@@ -209,6 +211,7 @@ ul {
background-color: #7d66f3;
border-radius:6px;
}


.nav__wrapper {
flex-direction: column;
@@ -264,6 +267,7 @@ ul {
justify-content: space-between;
width: 100%;
}

}

.styles-container {
@@ -296,6 +300,7 @@ ul {


@media (max-width: 1000px) {

.menu {
column-gap: 1.25rem;
/* margin-top: 2.5rem; */
@@ -313,4 +318,9 @@ ul {
.nav__links {
gap: 1.5rem;
}
}
@media (min-width:641px) and (max-width:1281px) {
.fa{
display: none;
}
}

0 comments on commit 968f569

Please sign in to comment.