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

Compare commits

merge into: Krosmez:main
Branches Tags
Krosmez:main
Krosmez:dev
Krosmez:feature/card
Krosmez:feature/rooting
...
pull from: 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*
yarn-debug.log*
yarn-error.log*
.prettierrc
.editorconfig

2
package.json
View File

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

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

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

@ -1,7 +1,29 @@
import './styles.css';
import "./styles.css";
const Navbar = () => {
return <div className="navbar"></div>;
import { Link } from "react-router-dom";
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;

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

8
src/index.js
View File

@ -1,18 +1,22 @@
import "./index.css";
import "./app.css";
import React from "react";
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 { GlobalContextProvider } from "./contexts/GlobalContext";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<GlobalContextProvider>
<App />
<Root />
</GlobalContextProvider>
</BrowserRouter>
</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 {}

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

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

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

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

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

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