finished mobile layout for navbar

Websites/Jefes/Frontend/jefes/src/components/Navbar/Navbar.css

@@ -1,4 +1,121 @@
-.nav{
+.app_navbar{
-    background-color: black;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: black;
+    padding: 1rem 2rem;
     color: white;
 }
+
+.navbar_logo{
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.navbar_logo>img{
+    width: 150px;
+}
+
+.navbar_links{
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    list-style: none;
+}
+
+.navbar_links>li{
+    margin: 0 1rem;
+    cursor: pointer;
+}
+.navbar_links>li:hover{
+    color: var(--color-grey);
+}
+
+.navbar_login{
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+.navbar_login>a{
+    margin: 0 1rem;
+    text-decoration: none;
+    transition: 0.5s ease;
+}
+.navbar_login>a:hover{
+    border-bottom: 1px solid var(--color-golden);
+}
+.navbar_login>div{
+    width: 1px;
+    height: 30px;
+    background-color: var(--color-grey);
+}
+
+/* Small Screen layout */
+.navbar_small_screen{
+    display: none;
+}
+
+.navbar_small_screen_overlay{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: black;
+    transition: 0.5s ease;
+    flex-direction: column;
+    z-index: 5;
+}
+
+.navbar_small_screen_overlay .overlay_close {
+    font-size: 27px;
+    color: var(--color-golden);
+    position: absolute;
+    cursor: pointer;
+    top: 20px;
+    right: 20px;
+}
+
+.navbar_small_screen_links{
+    list-style: none;
+}
+.navbar_small_screen_links>li{
+    margin: 2rem;
+    cursor: pointer;
+    color: var(--color-golden);
+    font-size: 2rem;
+    text-align: center;
+    font-family: var(--font-base);
+}
+.navbar_small_screen_links>li:hover{
+    color: var(--color-white);
+}
+
+/* phone */
+@media screen and (max-width: 650px){
+    .navbar_login{
+        display: none;
+    }
+    .navbar_logo{
+        width: 110px;
+    }
+}
+/* tablet */
+@media screen and (max-width: 1150px){
+    .navbar_links{
+        display: none;
+    }
+    .navbar_small_screen{
+        display: flex;
+    }
+}
+/* computer */
+@media screen and (max-width: 2000px){
+    .navbar_logo{
+        width: 140px;
+    }
+}

Websites/Jefes/Frontend/jefes/src/components/Navbar/Navbar.tsx

@@ -1,8 +1,46 @@
-import React from 'react'
+import React, { useState } from 'react'
+import {GiHamburgerMenu} from 'react-icons/gi';
+import {MdOutlineRestaurantMenu} from 'react-icons/md';
+import './Navbar.css'
+
 
 const Navbar = () => {
+  const [toggle_menu, set_toggle_menu] = useState(false);
+
   return (
-    <div>Navbar</div>
+    <nav className="app_navbar">
+      <div className="navbar_logo">
+        <img src="jefes_logo.jpg" alt=""/>
+      </div>
+      <ul className="navbar_links">
+        <li className="p_opensans"><a href="#home">Home</a></li>
+        <li className="p_opensans"><a href="#about">About</a></li>
+        <li className="p_opensans"><a href="#menu"></a>Menu</li>
+        <li className="p_opensans"><a href="#awards">Awards</a></li>
+        <li className="p_opensans"><a href="#contact">Contact</a></li>
+      </ul>  
+      <div className="navbar_login">
+        <a href="#login" className='p_opensans'>Log In / Register</a>
+        <div></div>
+        <a href="/" className='p_opensans'>Book Table</a>
+      </div>
+      <div className="navbar_small_screen">
+        <GiHamburgerMenu color="#fff" fontSize={27} onClick={() => set_toggle_menu(true)}/>
+        {toggle_menu && (
+          <div className="navbar_small_screen_overlay flex_center slide_bottom">
+            <MdOutlineRestaurantMenu fontSize={27} className='overlay_close' onClick={() => set_toggle_menu(false)} />
+            <ul className="navbar_small_screen_links">
+              <li className="p_opensans"><a href="#home">Home</a></li>
+              <li className="p_opensans"><a href="#about">About</a></li>
+              <li className="p_opensans"><a href="#menu"></a>Menu</li>
+              <li className="p_opensans"><a href="#awards">Awards</a></li>
+              <li className="p_opensans"><a href="#contact">Contact</a></li>
+            </ul>  
+          </div>
+        )}
+        
+      </div>
+    </nav>
   )
 }
 

Websites/Jefes/Frontend/jefes/src/container/Header/Header.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 const Header = () => {
     return (
         <div>Header</div>
+
     )
 }