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

Compare commits

base: Krosmez:main
Branches Tags
Krosmez:main
Krosmez:dev
Krosmez:feature/card
Krosmez:feature/rooting
..
compare: Krosmez:feature/rooting
Branches Tags
Krosmez:dev
Krosmez:feature/card
Krosmez:feature/rooting
Krosmez:main

2 Commits
main ... feature/ro

Author SHA1 Message Date
Krosmez
a43b730178 Add basic rooting 2024-04-07 08:12:24 -04:00
Krosmez
3bec953cfa create a sample for future navbar / burgermenu 2024-04-07 05:20:26 -04:00
25 changed files with 390 additions and 92 deletions
Show Stats 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

2
package.json
View File

@ -9,10 +9,12 @@
"fs-extra": "^11.2.0", "fs-extra": "^11.2.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.22.3",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"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;
}
} }

28
src/App.js
View File

@ -1,28 +0,0 @@
import "./App.css";
import Header from "./layouts/Header";
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>
);
}
export default App;

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;
}

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

@ -1,7 +1,29 @@
import './styles.css'; import "./styles.css";
const Navbar = () => { import { Link } from "react-router-dom";
return <div className="navbar"></div>;
const Navbar = ({ className, onClick, handleClose }) => {
return (
<nav className={`navbar ${className ? className : ""}`}>
<ul className="navbarList">
<li className="navbarList__item">
<Link className="navbar__link" to="/">
Home
</Link>
</li>
<li className="navbarList__item">
<Link className="navbar__link" to="about">
About
</Link>
</li>
<li className="navbarList__item">
<Link className="navbar__link" to="character">
Hanzo Character Maker
</Link>
</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);
} }

12
src/index.js
View File

@ -1,18 +1,22 @@
import "./index.css"; import "./index.css";
import "./app.css";
import React from "react"; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App"; import Root from "./pages/Root";
import reportWebVitals from "./reportWebVitals"; import reportWebVitals from "./reportWebVitals";
import { GlobalContextProvider } from "./contexts/GlobalContext"; import { GlobalContextProvider } from "./contexts/GlobalContext";
const root = ReactDOM.createRoot(document.getElementById("root")); const root = ReactDOM.createRoot(document.getElementById("root"));
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<GlobalContextProvider> <BrowserRouter>
<App /> <GlobalContextProvider>
</GlobalContextProvider> <Root />
</GlobalContextProvider>
</BrowserRouter>
</React.StrictMode> </React.StrictMode>
); );

20
src/layouts/BasicLayout/index.js Normal file
View File

@ -0,0 +1,20 @@
import "./styles.css";
import { Outlet } from "react-router-dom";
import Footer from "../Footer";
import Header from "../Header";
const BasicLayout = () => {
return (
<>
<Header />
<main className="main">
<Outlet />
</main>
<Footer />
</>
);
};
export default BasicLayout;

1
src/layouts/BasicLayout/styles.css Normal file
View File

@ -0,0 +1 @@
.main {}

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;
} }
} }

6
src/layouts/Footer/index.js
View File

@ -1,7 +1,7 @@
import './styles.css'; import "./styles.css";
const Footer = () => { const Footer = () => {
return <div className="footer"></div>; return <footer className="footer"></footer>;
}; };
export default Footer; export default Footer;

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;
}

11
src/pages/About/index.js Normal file
View File

@ -0,0 +1,11 @@
import "./styles.css";
import BasicLayout from "../../layouts/BasicLayout";
import Footer from "../../layouts/Footer";
import Header from "../../layouts/Header";
const About = () => {
return <div className="about">ABOUT</div>;
};
export default About;

1
src/pages/About/styles.css Normal file
View File

@ -0,0 +1 @@
.about {}

7
src/pages/Character/index.js Normal file
View File

@ -0,0 +1,7 @@
import "./styles.css";
const Character = () => {
return <div className="character">character</div>;
};
export default Character;

1
src/pages/Character/styles.css Normal file
View File

@ -0,0 +1 @@
.character {}

6
src/pages/Home/index.js
View File

@ -1,7 +1,7 @@
import './styles.css'; import "./styles.css";
const Home = () => { const Home = () => {
return <div className="home"></div>; return <div className="home">home</div>;
}; };
export default Home; export default Home;

21
src/pages/Root/index.js Normal file
View File

@ -0,0 +1,21 @@
import { Route, Routes } from "react-router-dom";
import About from "../About";
import BasicLayout from "../../layouts/BasicLayout";
import Character from "../Character";
import Home from "../Home";
const Root = () => {
return (
<Routes>
<Route path="/" element={<BasicLayout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="character" element={<Character />} />
<Route path="*" element={<>ERROR 404</>} />
</Route>
</Routes>
);
};
export default Root;