mnisyif/mnisyif_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

v0.6.2 Rearrange navlinks to match website

Browse source
This commit is contained in:
Murtadha 2024-07-15 13:31:26 -04:00
parent 5be4d10ce1
commit f1faec46b4
2 changed files with 47 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/components/header/Header.jsx
View file

@ -1,36 +1,52 @@
import React, { useState } from 'react' import React, { useState } from "react";
import styles from './Header.module.css' import styles from "./Header.module.css";
function Header() { function Header() {
const [isNavVisible, setIsNavVisible] = useState(false); const [isNavVisible, setIsNavVisible] = useState(false);
const toggleNav = () => { const toggleNav = () => {
setIsNavVisible(!isNavVisible); setIsNavVisible(!isNavVisible);
}; };
return ( return (
<header className={styles.header}> <header className={styles.header}>
<div className={styles.container}> <div className={styles.container}>
<div className={styles.logo}> <div className={styles.logo}>
<span>LOGO</span> <span>LOGO</span>
</div> </div>
<div className={`${styles.hamburger} ${isNavVisible ? styles.active : ''}`} onClick={toggleNav}> <div className={`${styles.hamburger} ${isNavVisible ? styles.active : ""}`} onClick={toggleNav}>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</div> </div>
<nav className={`${styles.nav} ${isNavVisible ? styles.navVisible : ''}`}> <nav className={`${styles.nav} ${isNavVisible ? styles.navVisible : ""}`}>
<ul className={styles.navList}> <ul className={styles.navList}>
<li><a href="#home" onClick={toggleNav}>Home</a></li> <li>
<li><a href="#education" onClick={toggleNav}>Education</a></li> <a href="#home" onClick={toggleNav}>
<li><a href="#experience" onClick={toggleNav}>Experience</a></li> Home
<li><a href="#projects" onClick={toggleNav}>Projects</a></li> </a>
<li><a href="#about" onClick={toggleNav}>About</a></li> </li>
</ul> <li>
</nav> <a href="#experience" onClick={toggleNav}>
</div> Experience
</header> </a>
) </li>
<li>
<a href="#projects" onClick={toggleNav}>
Projects
</a>
</li>
<li>
<a href="#education" onClick={toggleNav}>
Education
</a>
</li>
{/* <li><a href="#about" onClick={toggleNav}>About</a></li> */}
</ul>
</nav>
</div>
</header>
);
} }
export default Header export default Header;

2
version.txt
View file

@ -1 +1 @@
0.6.1 0.6.2