Krosmez/hanzo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

create a sample for future navbar / burgermenu

Browse Source
This commit is contained in:
Krosmez 2024-04-07 05:20:26 -04:00
parent 85e11bad1e
commit 3bec953cfa
15 changed files with 313 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -74,3 +74,6 @@ packages/react-devtools-timeline/dist# See https://help.github.com/articles/igno
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
.prettierrc
.editorconfig

1
package.json
View File

@ -13,6 +13,7 @@
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"devDependencies": { "devDependencies": {
"@babel/plugin-proposal-private-property-in-object": "7.21.11"
}, },
"scripts": { "scripts": {
"nc": "node scripts/new-component.mjs", "nc": "node scripts/new-component.mjs",

2
public/index.html
View File

@ -28,6 +28,6 @@
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root" class="root-app"></div>
</body> </body>
</html> </html>

30
src/App.css
View File

@ -1,4 +1,32 @@
:root { :root {
--color-primary: black; --color-primary: red;
--color-secondary: #d9d9d9; --color-secondary: #d9d9d9;
--color-pink: #FFB7C5;
/* test */
--classy-base: #FFB7C5;
--classy-dark: #564145;
--classy-darken: #BEA5A9;
--classy-second: #D4C792;
--classy-second-dark: #9C915F;
/* test ++ */
--hanzo-primary: #A569BD;
/* Purple for the royal and noble feel */
--hanzo-secondary: #F1C40F;
/* Gold for wealth and prosperity */
--hanzo-tertiary: #196F3D;
/* Dark Green for the natural environment */
--hanzo-quaternary: #641E16;
/* Dark Red/Brown for the wooden structures */
--hanzo-quinary: #17202A;
/* Dark Blue for the night sky */
}
.root-app {
overflow: hidden;
}
@media (min-width: 62em) {
.root-app {
overflow: auto;
}
} }

18
src/App.js
View File

@ -5,23 +5,9 @@ import logo from "../src/assets/svg/logo.svg";
function App() { function App() {
return ( return (
<div className="App"> <>
<Header /> <Header />
<header className="App-header"> </>
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
); );
} }

19
src/components/BurgerButton/index.js Normal file
View File

@ -0,0 +1,19 @@
import "./styles.css";
const BurgerButton = ({ checked, onClick }) => {
return (
<>
<input
className="burgerInput"
type="checkbox"
checked={checked}
onClick={onClick}
/>
<label className="burgerLabel" for="burgerInput">
<span className="burgerSpan"></span>
</label>
</>
);
};
export default BurgerButton;

73
src/components/BurgerButton/styles.css Normal file
View File

@ -0,0 +1,73 @@
.burgerInput {
position: absolute;
opacity: 0;
z-index: 50;
}
.burgerInput:checked+.burgerLabel>.burgerSpan {
transform: rotate(45deg);
}
.burgerInput:checked+.burgerLabel>.burgerSpan::before {
top: 0;
transform: rotate(0deg);
}
.burgerInput:checked+.burgerLabel>.burgerSpan::after {
top: 0;
transform: rotate(90deg);
}
.burgerInput:checked~.navbar {
right: 0;
}
.burgerLabel {
position: absolute;
margin: auto;
width: 26px;
z-index: 45;
}
.burgerLabel:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -12px;
right: 0;
display: block;
margin: auto;
background-color: var(--classy-dark);
width: 50px;
height: 50px;
border-radius: 10px;
}
.burgerSpan {
position: absolute;
display: block;
width: 100%;
height: 2px;
background-color: var(--classy-second-dark);
transition-duration: 0.25s;
}
.burgerSpan::before,
.burgerSpan::after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
background-color: var(--classy-second-dark);
transition-duration: 0.25s;
}
.burgerSpan::before {
top: -8px;
}
.burgerSpan::after {
top: 8px;
}

30
src/components/BurgerMenu/index.js Normal file
View File

@ -0,0 +1,30 @@
import "./styles.css";
import { useState } from "react";
import BurgerButton from "../BurgerButton";
import Navbar from "../Navbar";
const BurgerMenu = () => {
const [checked, setChecked] = useState(false);
const handleClick = () => {
!checked
? (document.body.style.overflow = "hidden")
: (document.body.style.overflow = "auto");
setChecked(!checked);
};
return (
<div className="burgerMenu">
<BurgerButton checked={checked} onClick={handleClick} />
<Navbar
className={checked ? "animation" : ""}
onClick={handleClick}
handleClose={handleClick}
/>
</div>
);
};
export default BurgerMenu;

32
src/components/BurgerMenu/styles.css Normal file
View File

@ -0,0 +1,32 @@
@keyframes overlayIn {
from {
background-color: rgba(131, 131, 131, 0);
}
to {
background-color: rgba(131, 131, 131, 0.5);
}
}
.burgerMenu {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
}
.burgerMenu .navbar {
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
z-index: 40;
transition-duration: 0.25s;
}
.burgerMenu .navbar.animation {
animation: overlayIn 0.9s;
animation-fill-mode: forwards;
}

28
src/components/Navbar/index.js
View File

@ -1,7 +1,27 @@
import './styles.css'; import "./styles.css";
const Navbar = () => { const Navbar = ({ className, onClick, handleClose }) => {
return <div className="navbar"></div>; return (
<nav className={`navbar ${className ? className : ""}`}>
<ul className="navbarList">
<li className="navbarList__item">
<a className="navbar__link" href="#">
Home
</a>
</li>
<li className="navbarList__item">
<a className="navbar__link" href="#">
About
</a>
</li>
<li className="navbarList__item">
<a className="navbar__link" href="#">
Hanzo Character Maker
</a>
</li>
</ul>
</nav>
);
}; };
export default Navbar; export default Navbar;

49
src/components/Navbar/styles.css
View File

@ -1 +1,48 @@
.navbar {} .navbar {
flex: 1;
}
.navbarList {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 70%;
height: 100%;
background-color: var(--classy-base);
gap: 2rem;
}
.navbarList__item {
color: var(--classy-dark);
}
.navbar__link {
color: var(--classy-dark);
font-weight: 600;
text-decoration: none;
transition: color 0.3s ease-in-out;
}
@media (min-width: 62em) {
.navbarList {
flex-direction: row;
align-items: center;
gap: 4rem;
width: 100%;
}
/* .navbarList__item {
color: var(--classy-dark);
} */
.navbarList__item:last-child {
margin-left: auto;
}
.navbar__link:hover {
color: var(--classy-second-dark);
}
}

9
src/index.css
View File

@ -62,11 +62,6 @@ a:not([class]) {
/* A elements that have a class remove underline */ /* A elements that have a class remove underline */
a[class] { a[class] {
text-decoration: none; text-decoration: none;
/* A elements that have a class and is active have underline */
&.active {
text-decoration: underline solid 2px;
}
} }
/* Make medias easier to work with */ /* Make medias easier to work with */
@ -164,7 +159,7 @@ article>*+* {
body { body {
font-size: 1.6rem; font-size: 1.6rem;
/* Base : équivalent 16px */ /* Base : équivalent 16px */
font-family: $font-stack; font-family: Arial, Helvetica, sans-serif;
line-height: 1.5; line-height: 1.5;
color: $color-light-grey; color: var(--color-primary);
} }

64
src/layouts/Container/styles.css
View File

@ -1,64 +1,64 @@
.container { .container {
width: 100%; width: 100%;
max-width: 30rem; max-width: 30rem;
margin: 0 auto; margin: 0 auto;
} }
.container.--grow { .container.--grow {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
} }
.container.--fullwidth { .container.--fullwidth {
max-width: 100%; max-width: 100%;
margin: 0; margin: 0;
} }
@media (min-width: 36em) { @media (min-width: 36em) {
/* 36em * 16 = 576px */ /* 36em * 16 = 576px */
.container { .container {
max-width: 50rem; max-width: 50rem;
} }
} }
@media (min-width: 48em) { @media (min-width: 48em) {
/* 48em * 16 = 768px */ /* 48em * 16 = 768px */
.container { .container {
max-width: 69rem; max-width: 69rem;
} }
} }
@media (min-width: 62em) { @media (min-width: 62em) {
/* 62em * 16 = 992px */ /* 62em * 16 = 992px */
.container { .container {
max-width: 96rem; max-width: 96rem;
} }
} }
@media (min-width: 75em) { @media (min-width: 75em) {
/* 75em * 16 = 1200px */ /* 75em * 16 = 1200px */
.container { .container {
max-width: 111rem; max-width: 111rem;
} }
} }
@media (min-width: 90em) { @media (min-width: 90em) {
/* 90em * 16 = 1440px */ /* 90em * 16 = 1440px */
.container { .container {
max-width: 120rem; max-width: 120rem;
} }
} }
@media (min-width: 120em) { @media (min-width: 120em) {
/* 90em * 16 = 1920px */ /* 90em * 16 = 1920px */
.container { .container {
max-width: 168rem; max-width: 168rem;
} }
} }

14
src/layouts/Header/index.js
View File

@ -2,20 +2,18 @@ import "./styles.css";
import React from "react"; import React from "react";
import BurgerMenu from "../../components/BurgerMenu";
import Container from "../Container"; import Container from "../Container";
import Navbar from "../../components/Navbar";
import useResize from "../../hooks/useResize";
const Header = () => { const Header = () => {
const { dimensions } = useResize();
return ( return (
<header className="header"> <header className="header">
<Container> <Container>
<h1>My Website</h1> {dimensions.width <= 768 ? <BurgerMenu /> : <Navbar />}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</Container> </Container>
</header> </header>
); );

11
src/layouts/Header/styles.css
View File

@ -0,0 +1,11 @@
.header {
position: relative;
padding: 3rem 0;
background-color: var(--classy-base);
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
}