first commit

package.json

@@ -8,7 +8,10 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "4.0.0",
+    "react-icons": "^4.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.2.0",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/App.js

@@ -1,24 +1,17 @@
-import logo from './logo.svg';
-import './App.css';
+import React from 'react';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' 
+import GlobalStyles from './globalStyles'
+import { Navbar } from './components';
 
 function App() {
   return (
-    <div className="App">
-      <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>
+
+      <Router>
+          <GlobalStyles />
+          <Navbar />
+      </Router>
+
+
   );
 }
 

src/components/Navbar/Navbar.elements.js

@@ -0,0 +1,133 @@
+import styled from 'styled-components';
+import { Container } from '../../globalStyles'
+import { FaMagento } from 'react-icons/fa'
+import { Link } from 'react-router-dom'
+
+export const Nav = styled.nav`
+    background: #101522;
+    height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.2rem;
+    position: sticky;
+    top: 0;
+    z-index: 999;
+`
+
+export const NavbarContainer = styled(Container)`
+    display: flex;
+    justify-content: space-between;
+    height: 80px;
+
+    ${Container}
+`
+
+export const NavLogo = styled(Link)`
+    color: #fff;
+    justify-self: flex-start;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: 2rem;
+    display: flex;
+    align-items: center;
+`
+
+export const NavIcon = styled(FaMagento)`
+    margin-right: 0.5rem;
+
+`
+
+export const HamburgerIcon = styled.div`
+    display: none;
+
+    @media screen and (max-width: 960px) {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(-100%, 60%);
+        font-size: 1.8rem;
+        cursor: pointer;   
+    }
+`
+
+export const NavMenu = styled.ul`
+    display: flex;
+    align-items: center;
+    list-style: none;
+    text-align: center;
+  
+    @media screen and (max-width: 960px) {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 90vh;
+        position: absolute;
+        top: 80px;
+        opacity: 1;
+        transition: all 0.5s ease;
+        background-color: #101522;
+        left: ${({ click }) => (click ? 0 : '-100%')};
+    }
+`
+export const NavItem = styled.li`
+    height: 80px;
+    border-bottom: 2px solid transparent;
+
+    &:hover {
+        border-bottom: 4px solid #fff;
+    }
+
+    @media screen and (max-width: 960px) {
+        width: 100%;
+
+        &:hover {
+            border-bottom: none;
+        }
+    }
+
+`
+
+export const NavLinks = styled(Link)`
+    color: #fff;
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    padding: 0.5rem 1rem;
+    height: 100%;
+
+    @media screen and (max-width: 960px) {
+        text-align: center;
+        padding: 2rem;
+        width: 100%;
+        display: table;
+
+        &:hover {
+            color: #4b59f7;
+            transition: all 0.3s ease;
+        }
+    }
+`
+
+export const NavItemBtn = styled.li`
+  @media screen and (max-width: 960px) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 120px;
+  }
+`;
+
+export const NavBtnLink = styled(Link)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  padding: 8px 16px;
+  height: 100%;
+  width: 100%;
+  border: none;
+  outline: none;
+`;

src/components/Navbar/Navbar.js

@@ -0,0 +1,79 @@
+import React, {useState} from 'react'
+import { Nav, 
+    NavbarContainer, 
+    NavLogo, 
+    NavIcon, 
+    HamburgerIcon,
+    NavMenu,
+    NavItem,
+    NavLinks,
+    NavItemBtn,
+    NavBtnLink
+ } from './Navbar.elements'
+import { FaTimes, FaBars } from 'react-icons/fa';
+import { IconContext } from 'react-icons/lib'
+import { Button } from '../../globalStyles';
+
+
+function Navbar() {
+
+    const [click, setClick] = useState(false);
+
+    const handleClick = () => {
+        setClick(!click)
+    }
+
+    return (
+        <>
+        <IconContext.Provider value={{ color: '#fff' }}>
+            <Nav>
+                <NavbarContainer>
+                    <NavLogo to='/'> 
+                        <NavIcon />
+                            ULTRA
+                    </NavLogo>
+                    <HamburgerIcon onClick={handleClick}>
+                        {click ? <FaTimes /> : <FaBars />}
+                    </HamburgerIcon>
+                    <NavMenu onClick={handleClick} click={click} >
+                        <NavItem>
+                            <NavLinks to='/'>
+                                Home
+                            </NavLinks>
+                        </NavItem>
+
+
+                        <NavItem>
+                            <NavLinks to='/'>
+                                Services
+                            </NavLinks>
+                        </NavItem>
+
+
+                        <NavItem>
+                            <NavLinks to='/Products'>
+                                Products
+                            </NavLinks>
+                        </NavItem>
+
+                        <NavItemBtn >
+                            {button ? (
+                                <NavBtnLink to='/sign-up'>
+                                    <Button primary>SIGN UP</Button>
+                                </NavBtnLink>
+                            ) : (
+                                <NavBtnLink to='/sign-up'>
+                                    <Button onClick={closeMobileMenu} fontBig primary>SIGN UP</Button>
+                                </NavBtnLink>
+                            )}
+
+                        </NavItemBtn>
+                    </NavMenu>
+                </NavbarContainer>
+            </Nav>
+        </IconContext.Provider>    
+        </>
+    )
+}
+
+export default Navbar

src/components/index.js

@@ -0,0 +1 @@
+export { default as Navbar } from './Navbar/Navbar';

src/globalStyles.js

@@ -0,0 +1,48 @@
+import styled, { createGlobalStyle } from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Source Sans Pro', sans-serif;
+}
+`;
+
+
+export const Container = styled.div`
+  z-index: 1;
+  width: 100%;
+  max-width: 1300px;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 50px;
+  padding-left: 50px;
+  @media screen and (max-width: 991px) {
+    padding-right: 30px;
+    padding-left: 30px;
+  }
+`;
+
+export const Button = styled.button`
+  border-radius: 4px;
+  background: ${({ primary }) => (primary ? '#4B59F7' : '#0467FB')};
+  white-space: nowrap;
+  padding: ${({ big }) => (big ? '12px 64px' : '10px 20px')};
+  color: #fff;
+  font-size: ${({ fontBig }) => (fontBig ? '20px' : '16px')};
+  outline: none;
+  border: none;
+  cursor: pointer;
+  &:hover {
+    transition: all 0.3s ease-out;
+    background: #fff;
+    background-color: ${({ primary }) => (primary ? '#0467FB' : '#4B59F7')};
+  }
+  @media screen and (max-width: 960px) {
+    width: 100%;
+  }
+`;
+
+
+export default  GlobalStyles;