add hamb_menu
This commit is contained in:
Mariia Shabelnik
parent
c4e8900e24
commit
b3e699f4b1
15
package-lock.json
generated
15
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "portfolio",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"hamburger-react": "^2.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.3.0"
|
||||
@ -1069,6 +1070,14 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/hamburger-react": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/hamburger-react/-/hamburger-react-2.5.0.tgz",
|
||||
"integrity": "sha512-5GSXe+ucxTPJ0SkhIsPQ/PRDweZPIKya1lfahAuExx31SdheeUA4uOPfQIAirbKona8hvo79VDr5LJQzPXsdpw==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
@ -2131,6 +2140,12 @@
|
||||
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
|
||||
"dev": true
|
||||
},
|
||||
"hamburger-react": {
|
||||
"version": "2.5.0",
|
||||
"resolved": "https://registry.npmjs.org/hamburger-react/-/hamburger-react-2.5.0.tgz",
|
||||
"integrity": "sha512-5GSXe+ucxTPJ0SkhIsPQ/PRDweZPIKya1lfahAuExx31SdheeUA4uOPfQIAirbKona8hvo79VDr5LJQzPXsdpw==",
|
||||
"requires": {}
|
||||
},
|
||||
"has": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
|
||||
|
||||
@ -4,11 +4,12 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev": "vite --host",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"hamburger-react": "^2.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.3.0"
|
||||
|
||||
60
src/App.css
60
src/App.css
@ -1,14 +1,31 @@
|
||||
.container {
|
||||
border: 2px solid red;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: rgb(84, 84, 84);
|
||||
.nav .container {
|
||||
height: 3em;
|
||||
}
|
||||
|
||||
.nav {
|
||||
background-color: rgb(47, 46, 58);
|
||||
height: 3em;
|
||||
-webkit-box-shadow: 0px 3px 10px 1px rgba(122, 122, 122, 0.59);
|
||||
-moz-box-shadow: 0px 3px 10px 1px rgba(122, 122, 122, 0.59);
|
||||
box-shadow: 0px 3px 10px 1px rgba(122, 122, 122, 0.59);
|
||||
}
|
||||
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
color: rgb(229, 229, 255);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 5px #03e9f4;
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -23,3 +40,40 @@
|
||||
.menu-items div {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
background-color: rgba(84, 84, 84, 0.9);
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
backdrop-filter: blur(3px);
|
||||
top: 3em;
|
||||
bottom: 0;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hamburger-menu a {
|
||||
font-size: 2em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.hamburger {
|
||||
display: inline;
|
||||
}
|
||||
.menu-items {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import "./App.css";
|
||||
import { Routes, Route, Link } from "react-router-dom";
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import Home from "./pages/Home";
|
||||
import Experiance from "./pages/Experiance";
|
||||
import Experience from "./pages/Experience";
|
||||
import Contact from "./pages/Contact";
|
||||
import Footer from "./components/Footer";
|
||||
import Header from "./components/Header";
|
||||
@ -12,7 +12,7 @@ function App() {
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="experiance" element={<Experiance />} />
|
||||
<Route path="experience" element={<Experience />} />
|
||||
<Route path="contact" element={<Contact />} />
|
||||
</Routes>
|
||||
<Footer />
|
||||
|
||||
@ -1,24 +1,50 @@
|
||||
import { Routes, Route, Link } from "react-router-dom";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Turn as Hamburger } from "hamburger-react";
|
||||
import { useState } from "react";
|
||||
|
||||
function Header() {
|
||||
const [isOpen, setOpen] = useState(false);
|
||||
|
||||
const hamburgerMenu = (
|
||||
<div className="hamburger-menu">
|
||||
<div>
|
||||
<Link to="/">.me()</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/experience">.experience()</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/contact">.contact()</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="nav">
|
||||
<div className="container nav-items">
|
||||
<div className="container">
|
||||
<div className=" nav-items">
|
||||
<div className="logo">
|
||||
<Link to="/">LOGO</Link>
|
||||
<Link to="/">MS.</Link>
|
||||
</div>
|
||||
<div className="menu-items">
|
||||
<div className="hamburger">
|
||||
<Hamburger toggled={isOpen} toggle={setOpen} />
|
||||
</div>
|
||||
|
||||
<div className="menu-items ">
|
||||
<div>
|
||||
<Link to="/">About</Link>
|
||||
<Link to="/">.me()</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/experiance">Experiance</Link>
|
||||
<Link to="/experience">.experience()</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link to="/contact">Contact</Link>
|
||||
<Link to="/contact">.contact()</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isOpen && hamburgerMenu}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Roboto Mono", monospace;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user