add hamb_menu

package-lock.json

@@ -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",

package.json

@@ -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"

src/App.css

@@ -1,14 +1,31 @@
 .container {
-  border: 2px solid red;
   max-width: 1000px;
   margin: 0 auto;
 }
 
-.nav {
+.nav .container {
-  background-color: rgb(84, 84, 84);
   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;
+  }
+}

src/App.jsx

@@ -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 />

src/components/Header.jsx

@@ -1,23 +1,49 @@
-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="logo">
+        <div className=" nav-items">
-          <Link to="/">LOGO</Link>
+          <div className="logo">
-        </div>
+            <Link to="/">MS.</Link>
-        <div className="menu-items">
-          <div>
-            <Link to="/">About</Link>
           </div>
-          <div>
+          <div className="hamburger">
-            <Link to="/experiance">Experiance</Link>
+            <Hamburger toggled={isOpen} toggle={setOpen} />
           </div>
-          <div>
+
-            <Link to="/contact">Contact</Link>
+          <div className="menu-items ">
+            <div>
+              <Link to="/">.me()</Link>
+            </div>
+            <div>
+              <Link to="/experience">.experience()</Link>
+            </div>
+            <div>
+              <Link to="/contact">.contact()</Link>
+            </div>
           </div>
         </div>
+
+        {isOpen && hamburgerMenu}
       </div>
     </div>
   );

src/index.css

@@ -1,3 +1,4 @@
 body {
   margin: 0;
+  font-family: "Roboto Mono", monospace;
 }