scarlett/ITR-Website
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: change menu style

Browse Source
This commit is contained in:
Jianqi Jin
2023-09-16 21:30:38 -05:00
parent 065b3d1e28
commit 66205a43c6
13 changed files with 395 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DropdownContainer.js
+50 -50
View File
@@ -1,54 +1,54 @@
import React, { Component } from "react";
import React, { useEffect, useRef } from "react";
import { NavLink } from "react-router-dom";
import "../assets/stylesheets/dropdown.scss";
import { useSize } from "ahooks";
import { useContainer } from "unstated-next";
import GlobalStore from "../store/global";
export default class DropdownContainer extends Component {
constructor(props){
super(props);
this.container = React.createRef();
}
toggleHamburger() {
this.container.current.className = "slideOut c";
setTimeout(() => {this.props.hamburgerToggle();}
, 500);
}
render() {
return (
<nav ref={this.container} className="c slideIn">
<div className="header">
<label className="header__text">ITR</label>
<button className="header__x" onClick={() => this.toggleHamburger()}>X</button>
</div>
<div className="dd">
<li>
<NavLink className="dd__link" to="/">
<label className="dd__link_label">Home</label>
<label className="dd__link_arrow">{">"}</label>
</NavLink>
</li>
<li>
<NavLink className="dd__link" to="/about">
<label className="dd__link_label">About</label>
<label className="dd__link_arrow">{">"}</label>
</NavLink>
</li>
<li>
<NavLink className="dd__link" to="/projects">
<label className="dd__link_label">Projects</label>
<label className="dd__link_arrow">{">"}</label>
</NavLink>
</li>
<li>
<NavLink className="dd__link" to="/gallery">
<label className="dd__link_label">Gallery</label>
<label className="dd__link_arrow">{">"}</label>
</NavLink>
</li>
</div>
</nav>
);
}
const DropdownContainer = () => {
const container = useRef();
const { isMobile, toggleMenu } = useContainer(GlobalStore);
const toggleHamburger = () => {
container.current.className = "slideOut c";
setTimeout(() => {
toggleMenu();
}, 500);
};
return (
<nav ref={container} className={`dropdown c slideIn ${isMobile ? 'mobile' : ''}`}>
{!isMobile && (
<div className="header">
<label className="header__text">ITR</label>
<button className="header__x" onClick={() => toggleHamburger()}>X</button>
</div>)}
<div className="dd">
<li>
<NavLink className="dd__link" to="/">
<label className="dd__link_label">Home</label>
<label className="dd__link_arrow">{">"}</label>
</NavLink>
</li>
<li>
<NavLink className="dd__link" to="/about">
<label className="dd__link_label">About</label>
<label className="dd__link_arrow">{">"}</label>
</NavLink>
</li>
<li>
<NavLink className="dd__link" to="/projects">
<label className="dd__link_label">Projects</label>
<label className="dd__link_arrow">{">"}</label>
</NavLink>
</li>
<li>
<NavLink className="dd__link" to="/gallery">
<label className="dd__link_label">Gallery</label>
<label className="dd__link_arrow">{">"}</label>
</NavLink>
</li>
</div>
</nav>
);
}
export default DropdownContainer;
src/components/NavBar.js
+48 -45
View File
@@ -1,52 +1,55 @@
import React, { Component } from "react";
import React, { Component, useEffect, useState } from "react";
import { NavLink } from "react-router-dom";
import "../assets/stylesheets/navbar.scss";
import { useContainer } from "unstated-next";
import GlobalStore from "../store/global";
import Hamburger from "hamburger-react";
export default class NavBar extends Component {
constructor(props) {
super(props);
this.state = { navBackground: { backgroundColor: "transparent" }, hamburger: false };
const NavBar = () => {
const [navBackground, setNavBackground] = useState({ backgroundColor: "transparent" });
const { toggleMenu, isHamburger } = useContainer(GlobalStore);
useEffect(() => {
document.addEventListener("scroll", (event) => {
if (window.scrollY < 10)
this.setState({ navBackground: { backgroundColor: "transparent" } });
else this.setState({ navBackground: { backgroundColor: "#232323" } });
if (window.scrollY < 10) {
setNavBackground({ backgroundColor: "transparent" });
}
else {
setNavBackground({ backgroundColor: "#232323" });
};
});
}
}, []);
toggleHamburger() {
this.props.hamburgerToggle();
}
render() {
return (
<nav className="navbar" style={this.state.navBackground}>
<a id="logo" href="http://localhost:3000">
<h2 className="navbar__logotext">ITR</h2>
</a>
<ul>
<li>
<NavLink to="/">Home</NavLink>
</li>
<li>
<NavLink to="/about">About</NavLink>
</li>
<li>
<NavLink to="/projects">Projects</NavLink>
</li>
<li>
<NavLink to="/gallery">Gallery</NavLink>
</li>
</ul>
{/* <NavLink className="nav__login" to="/login">
Login
</NavLink> */}
<div className="nav__placeholder"></div>
<div className="navbar__hamburger" onClick={() => this.toggleHamburger()}>
<div className="navbar__hamburger_line"></div>
<div className="navbar__hamburger_line"></div>
<div className="navbar__hamburger_line"></div>
</div>
</nav>
);
}
return (
<nav className="navbar" style={navBackground}>
<a id="logo" href="http://localhost:3000">
<h2 className="navbar__logotext">ITR</h2>
</a>
<ul>
<li>
<NavLink to="/">Home</NavLink>
</li>
<li>
<NavLink to="/about">About</NavLink>
</li>
<li>
<NavLink to="/projects">Projects</NavLink>
</li>
<li>
<NavLink to="/gallery">Gallery</NavLink>
</li>
</ul>
{/* <NavLink className="nav__login" to="/login">
Login
</NavLink> */}
<div className="nav__placeholder"></div>
<Hamburger toggled={isHamburger} toggle={toggleMenu} />
{/* <div className="navbar__hamburger">
<div className="navbar__hamburger_line"></div>
<div className="navbar__hamburger_line"></div>
<div className="navbar__hamburger_line"></div>
</div> */}
</nav>
);
}
export default NavBar;