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*
yarn-debug.log*
yarn-error.log*
.prettierrc
.editorconfig

1
package.json
View File

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

2
public/index.html
View File

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

30
src/App.css
View File

@ -1,4 +1,32 @@
:root {
--color-primary: black;
--color-primary: red;
--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() {
return (
<div className="App">
<>
<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 = () => {
return <div className="navbar"></div>;
const Navbar = ({ className, onClick, handleClose }) => {
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[class] {
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 */
@ -164,7 +159,7 @@ article>*+* {
body {
font-size: 1.6rem;
/* Base : équivalent 16px */
font-family: $font-stack;
font-family: Arial, Helvetica, sans-serif;
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 {
width: 100%;
max-width: 30rem;
margin: 0 auto;
width: 100%;
max-width: 30rem;
margin: 0 auto;
}
.container.--grow {
display: flex;
flex-direction: column;
flex-grow: 1;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.container.--fullwidth {
max-width: 100%;
margin: 0;
max-width: 100%;
margin: 0;
}
@media (min-width: 36em) {
/* 36em * 16 = 576px */
.container {
max-width: 50rem;
}
/* 36em * 16 = 576px */
.container {
max-width: 50rem;
}
}
@media (min-width: 48em) {
/* 48em * 16 = 768px */
.container {
max-width: 69rem;
}
/* 48em * 16 = 768px */
.container {
max-width: 69rem;
}
}
@media (min-width: 62em) {
/* 62em * 16 = 992px */
.container {
max-width: 96rem;
}
/* 62em * 16 = 992px */
.container {
max-width: 96rem;
}
}
@media (min-width: 75em) {
/* 75em * 16 = 1200px */
.container {
max-width: 111rem;
}
/* 75em * 16 = 1200px */
.container {
max-width: 111rem;
}
}
@media (min-width: 90em) {
/* 90em * 16 = 1440px */
.container {
max-width: 120rem;
}
/* 90em * 16 = 1440px */
.container {
max-width: 120rem;
}
}
@media (min-width: 120em) {
/* 90em * 16 = 1920px */
.container {
max-width: 168rem;
}
/* 90em * 16 = 1920px */
.container {
max-width: 168rem;
}
}

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

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