remove menu
This commit is contained in:
@@ -1,36 +0,0 @@
|
|||||||
import "./menu.sass";
|
|
||||||
import {animate, motion} from "framer-motion";
|
|
||||||
import {useEffect} from "react";
|
|
||||||
import {useArticle} from "../articles/ArticleContext";
|
|
||||||
import {ARTICLES} from "../articles/articles";
|
|
||||||
|
|
||||||
|
|
||||||
const hidden = -999;
|
|
||||||
|
|
||||||
export function Menu({active} : {active: boolean}) {
|
|
||||||
const [, setReading] = useArticle();
|
|
||||||
useEffect(() => {
|
|
||||||
if(active) {
|
|
||||||
animate(".menu", {left : 0})
|
|
||||||
} else {
|
|
||||||
animate(".menu", {left : hidden})
|
|
||||||
}
|
|
||||||
}, [active]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<motion.section initial={{left: hidden}} className="menu">
|
|
||||||
<ul>
|
|
||||||
{
|
|
||||||
ARTICLES.map((article) =>
|
|
||||||
<li key={article.name}>
|
|
||||||
<button className="link" onClick={() => setReading(article)} >
|
|
||||||
{article.name}
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</motion.section>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,32 +1,12 @@
|
|||||||
import {useState} from "react";
|
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
||||||
import {faBars} from "@fortawesome/free-solid-svg-icons/faBars";
|
|
||||||
import {ReactComponent as Wave} from "../img/menu-wave.svg";
|
import {ReactComponent as Wave} from "../img/menu-wave.svg";
|
||||||
import "./nav.sass";
|
import "./nav.sass";
|
||||||
import {Links} from "./Links";
|
import {Links} from "./Links";
|
||||||
import {Menu} from "./Menu";
|
|
||||||
|
|
||||||
export default function Nav() {
|
export default function Nav() {
|
||||||
const [active, setActive] = useState(false);
|
|
||||||
|
|
||||||
return <div>
|
return <div>
|
||||||
<nav>
|
<nav>
|
||||||
<MenuButton active={active} setActive={setActive}/>
|
|
||||||
<Links/>
|
<Links/>
|
||||||
</nav>
|
</nav>
|
||||||
<Wave className="wave" />
|
<Wave className="wave" />
|
||||||
<Menu active={active}/>
|
|
||||||
</div>;
|
</div>;
|
||||||
}
|
}
|
||||||
|
|
||||||
function MenuButton(props : { active: boolean, setActive: (_:boolean) => void }) {
|
|
||||||
const {active, setActive} = props;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button className="menu-btn link">
|
|
||||||
<FontAwesomeIcon icon={faBars} onClick={function() {
|
|
||||||
setActive(!active);
|
|
||||||
}}/>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,20 +0,0 @@
|
|||||||
@use "nav"
|
|
||||||
|
|
||||||
.menu
|
|
||||||
position: absolute
|
|
||||||
z-index: 999
|
|
||||||
&, ul
|
|
||||||
display: flex
|
|
||||||
flex-direction: column
|
|
||||||
list-style: none
|
|
||||||
button
|
|
||||||
font-weight: bold
|
|
||||||
text-decoration: underline
|
|
||||||
font-size: 1rem
|
|
||||||
background: nav.$menu
|
|
||||||
color: white
|
|
||||||
width: 25%
|
|
||||||
height: calc(100vh - 100px)
|
|
||||||
|
|
||||||
div
|
|
||||||
padding: nav.$padding
|
|
||||||
Reference in New Issue
Block a user