polsevev/polsevev.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Nav menu finito

Browse source
This commit is contained in:
Rolf Martin Glomsrud 2023-09-01 15:27:28 +02:00
parent f512a345f7
commit 730f3f8765
3 changed files with 28 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
polsevev.dev.frontend/src/Hooks/useComponentVisible.tsx
View file

@ -1,24 +0,0 @@
import { useEffect, useRef, useState } from "react";
export default function useComponentVisible(initialIsVisible: boolean) {
const [isCompVisible, setIsCompVisible] =
useState<boolean>(initialIsVisible);
const ref = useRef<HTMLDivElement>(null);
const handleClickOutsideComp = (event: Event) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
setIsCompVisible(false);
}
};
useEffect(() => {
document.addEventListener("click", handleClickOutsideComp, true);
return () => {
document.removeEventListener("click", handleClickOutsideComp, true);
};
});
const openComp = () => setIsCompVisible(true);
return { ref, isCompVisible, openComp };
}

21
polsevev.dev.frontend/src/components/NavigationMenu.tsx
View file

@ -1,11 +1,13 @@
import { FC, useEffect, useState } from "react";
import { NavItem, SideBarBox } from "../styles/TopBarStyle";
import { ExitLayer, NavItem, SideBarBox } from "../styles/TopBarStyle";
import { useNavigate } from "react-router";
import useComponentVisible from "../Hooks/useComponentVisible";
const NavigationMenu: FC = () => {
const navigate = useNavigate();
const handleClick = (loc: string) => navigate(loc);
const handleClick = (loc: string) => {
setIsNavMenuOpen(false);
navigate(loc);
};
const locations: Array<string> = ["/", "/about", "CV", "/projects"];
const [isPhone, setIsPhone] = useState(
window.matchMedia("(min-width: 720px)").matches
@ -13,9 +15,7 @@ const NavigationMenu: FC = () => {
const locationButtons = locations.map((location) => (
<NavItem onClick={() => handleClick(location)}>{location}</NavItem>
));
const { ref, isCompVisible, openComp } = useComponentVisible(false);
const [isNavMenuOpen, setIsNavMenuOpen] = useState<boolean>(false);
useEffect(() => {
const recheckIsPhone = () => {
setIsPhone(window.matchMedia("(min-width: 720px)").matches);
@ -30,11 +30,14 @@ const NavigationMenu: FC = () => {
locationButtons
) : (
<>
<button onClick={() => openComp()}>
<button onClick={() => setIsNavMenuOpen(true)}>
<span className="material-symbols-outlined">menu</span>
</button>
{isCompVisible && (
<SideBarBox ref={ref}>{locationButtons}</SideBarBox>
<SideBarBox xPosition={isNavMenuOpen ? 0 : 20}>
{locationButtons}
</SideBarBox>
{isNavMenuOpen && (
<ExitLayer onClick={() => setIsNavMenuOpen(false)} />
)}
</>
)}

29
polsevev.dev.frontend/src/styles/TopBarStyle.tsx
View file

@ -1,4 +1,4 @@
import styled, { keyframes } from "styled-components";
import styled from "styled-components";
export const Wrapper = styled("div")`
position: fixed;
@ -34,19 +34,10 @@ export const GithubLogo = styled("img")(() => ({
padding: "5px",
}));
const comeFromLeft = keyframes`
from{
left: 100%;
}
to {
left: calc(100% - 10em);
}
`;
export const SideBarBox = styled("div")`
export const SideBarBox = styled("div")<{ xPosition: number }>`
z-index: 100;
position: absolute;
top: 0;
animation: ${comeFromLeft} 0.2s linear;
top: 2px;
left: calc(100% - 10em);
overflow: overlay;
background-color: ${(props) => props.theme.palette.aero};
@ -55,4 +46,16 @@ export const SideBarBox = styled("div")`
border: 2px solid #ffffff;
padding-bottom: 5px;
padding-top: 5px;
transform: translateX(${({ xPosition }) => `${xPosition}em`});
transition: transform 0.2s ease-in-out;
`;
export const ExitLayer = styled("div")`
position: absolute;
width: 100vw;
top: 0;
left: 0;
height: 100vh;
z-index: 90;
transform: translateX(-20px);
`;