├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── components ├── Button.css ├── Button.js └── Navbar │ ├── MenuItems.js │ ├── Navbar.css │ └── Navbar.js ├── index.css └── index.js /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-navbar-tutorial-yt", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-v1/d61d7612db8c122842b9ceabe11fc82c87565c47/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | 19 | 20 | 29 | React App 30 | 31 | 32 | 33 |
34 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-v1/d61d7612db8c122842b9ceabe11fc82c87565c47/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-v1/d61d7612db8c122842b9ceabe11fc82c87565c47/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Montserrat', sans-serif; 6 | } 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Navbar from "./components/Navbar/Navbar"; 3 | import './App.css'; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /src/components/Button.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #3acbf7; 3 | } 4 | 5 | .btn { 6 | padding: 8px 20px; 7 | border-radius: 4px; 8 | outline: none; 9 | border: none; 10 | cursor: pointer; 11 | } 12 | 13 | .btn:hover { 14 | padding: 8px 20px; 15 | transition: all 0.3s ease-out; 16 | background: #fff; 17 | color: #6568F4; 18 | transition: 250ms; 19 | } 20 | 21 | .btn--primary { 22 | background-color: var(--primary); 23 | } 24 | 25 | .btn--outline { 26 | background-color: transparent; 27 | color: #fff; 28 | padding: 8px 20px; 29 | border-radius: 4px; 30 | border: 1px solid var(--primary); 31 | transition: all 0.3s ease-out; 32 | } 33 | 34 | .btn--medium { 35 | padding: 8px 20px; 36 | border-radius: 4px; 37 | font-size: 18px; 38 | color: #fff; 39 | } 40 | 41 | .btn-large { 42 | padding: 12px 26px; 43 | border-radius: 4px; 44 | font-size: 20px; 45 | color: #fff; 46 | } -------------------------------------------------------------------------------- /src/components/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Button.css' 3 | 4 | const STYLES = [ 5 | 'btn--primary', 6 | 'btn--outline' 7 | ] 8 | 9 | const SIZES = [ 10 | 'btn--medium', 11 | 'btn--large' 12 | ] 13 | 14 | export const Button = ({ 15 | children, 16 | type, 17 | onClick, 18 | buttonStyle, 19 | buttonSize 20 | }) => { 21 | 22 | const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0] 23 | 24 | const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0] 25 | 26 | return ( 27 | 30 | ) 31 | } -------------------------------------------------------------------------------- /src/components/Navbar/MenuItems.js: -------------------------------------------------------------------------------- 1 | export const MenuItems = [ 2 | { 3 | title: 'Home', 4 | url: '#', 5 | cName: 'nav-links' 6 | }, 7 | { 8 | title: 'Services', 9 | url: '#', 10 | cName: 'nav-links' 11 | }, 12 | { 13 | title: 'Products', 14 | url: '#', 15 | cName: 'nav-links' 16 | }, 17 | { 18 | title: 'Contact Us', 19 | url: '#', 20 | cName: 'nav-links' 21 | }, 22 | { 23 | title: 'Sign up', 24 | url: '#', 25 | cName: 'nav-links-mobile' 26 | } 27 | 28 | ] -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | .NavbarItems { 2 | background: linear-gradient(90deg, rgb(110, 94, 254) 0%, rgba(73,63,252,1) 100%); 3 | height: 80px; 4 | display: flex; 5 | justify-content: center; 6 | align-items: center; 7 | font-size: 1.2rem; 8 | } 9 | 10 | .navbar-logo { 11 | color: #fff; 12 | justify-self: start; 13 | margin-left: 20px; 14 | cursor: pointer; 15 | } 16 | 17 | .fa-react { 18 | margin-left: 0.5rem; 19 | font-size: 1.6rem; 20 | } 21 | 22 | .nav-menu { 23 | display: grid; 24 | grid-template-columns: repeat(5, auto); 25 | grid-gap: 10px; 26 | list-style: none; 27 | text-align: center; 28 | width: 70vw; 29 | justify-content: end; 30 | margin-right: 2rem; 31 | } 32 | 33 | .nav-links { 34 | color: white; 35 | text-decoration: none; 36 | padding: 0.5rem 1rem; 37 | } 38 | 39 | .nav-links:hover { 40 | background-color: #6d76f7; 41 | border-radius: 4px; 42 | transition: all 0.2s ease-out; 43 | } 44 | 45 | .fa-bars { 46 | color: #fff; 47 | } 48 | 49 | .nav-links-mobile { 50 | display: none; 51 | } 52 | 53 | .menu-icon { 54 | display: none; 55 | } 56 | 57 | @media screen and (max-width: 960px) { 58 | .NavbarItems { 59 | position: relative; 60 | } 61 | 62 | .nav-menu { 63 | display: flex; 64 | flex-direction: column; 65 | width: 100%; 66 | height: 500px; 67 | position: absolute; 68 | top: 80px; 69 | left: -100%; 70 | opacity: 1; 71 | transition: all 0.5s ease; 72 | } 73 | 74 | .nav-menu.active { 75 | background: #6668f4; 76 | left: 0; 77 | opacity: 1; 78 | transition: all 0.5s ease; 79 | z-index: 1; 80 | } 81 | 82 | .nav-links { 83 | text-align: center; 84 | padding: 2rem; 85 | width: 100%; 86 | display: table; 87 | } 88 | 89 | .nav-links:hover { 90 | background-color: #7577fa; 91 | border-radius: 0; 92 | } 93 | 94 | .navbar-logo { 95 | position: absolute; 96 | top: 0; 97 | left: 0; 98 | transform: translate(25%, 50%); 99 | } 100 | 101 | .menu-icon { 102 | display: block; 103 | position: absolute; 104 | top: 0; 105 | right: 0; 106 | transform: translate(-100%, 60%); 107 | font-size: 1.8rem; 108 | cursor: pointer; 109 | } 110 | 111 | .fa-times { 112 | color: #fff; 113 | font-size: 2rem; 114 | } 115 | 116 | .nav-links-mobile { 117 | display: block; 118 | text-align: center; 119 | padding: 1.5rem; 120 | margin: 2rem auto; 121 | border-radius: 4px; 122 | width: 80%; 123 | background: #4ad9e4; 124 | text-decoration: none; 125 | color: #fff; 126 | font-size: 1.5rem; 127 | } 128 | 129 | .nav-links-mobile:hover { 130 | background: #fff; 131 | color: #6568F4; 132 | transition: 250ms; 133 | } 134 | 135 | Button { 136 | display: none; 137 | } 138 | } 139 | 140 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { MenuItems } from "./MenuItems" 3 | import { Button } from "../Button" 4 | import './Navbar.css' 5 | 6 | class Navbar extends Component { 7 | state = { clicked: false } 8 | 9 | handleClick = () => { 10 | this.setState({ clicked: !this.state.clicked }) 11 | } 12 | 13 | render() { 14 | return( 15 | 33 | ) 34 | } 35 | } 36 | 37 | export default Navbar -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | 10 | --------------------------------------------------------------------------------