├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── src ├── images │ ├── img-1.jpg │ ├── img-2.jpg │ ├── img-3.jpg │ ├── img-4.jpg │ ├── img-5.jpg │ ├── img-6.jpg │ └── img-7.jpg ├── index.js ├── components │ ├── pages │ │ ├── Products.js │ │ ├── Services.js │ │ ├── ContactUs.js │ │ ├── SignUp.js │ │ ├── Marketing.js │ │ ├── Consulting.js │ │ └── Home.js │ ├── Button.js │ ├── MenuItems.js │ ├── Button.css │ ├── Dropdown.css │ ├── Dropdown.js │ ├── Navbar.js │ └── Navbar.css ├── App.js └── App.css └── package.json /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-dropdown/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-dropdown/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-dropdown/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/images/img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-dropdown/HEAD/src/images/img-1.jpg -------------------------------------------------------------------------------- /src/images/img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-dropdown/HEAD/src/images/img-2.jpg -------------------------------------------------------------------------------- /src/images/img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-dropdown/HEAD/src/images/img-3.jpg -------------------------------------------------------------------------------- /src/images/img-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-dropdown/HEAD/src/images/img-4.jpg -------------------------------------------------------------------------------- /src/images/img-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-dropdown/HEAD/src/images/img-5.jpg -------------------------------------------------------------------------------- /src/images/img-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-dropdown/HEAD/src/images/img-6.jpg -------------------------------------------------------------------------------- /src/images/img-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/briancodex/react-navbar-dropdown/HEAD/src/images/img-7.jpg -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /src/components/pages/Products.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../../App.css'; 3 | 4 | export default function Products() { 5 | return

PRODUCTS

; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/pages/Services.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../../App.css'; 3 | 4 | export default function Services() { 5 | return

SERVICES

; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/pages/ContactUs.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../../App.css'; 3 | 4 | export default function ContactUs() { 5 | return

CONTACT

; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/pages/SignUp.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../../App.css'; 3 | 4 | export default function SignUp() { 5 | return

LIKE & SUBSCRIBE

; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/pages/Marketing.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Marketing() { 4 | return ( 5 | <> 6 |

MARKETING

7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/pages/Consulting.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function Consulting() { 4 | return ( 5 | <> 6 |

CONSULTING

7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import '../../App.css'; 3 | 4 | export default function Home() { 5 | return ( 6 | <> 7 |

EPIC

8 | 9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /src/components/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Button.css'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | export function Button() { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/MenuItems.js: -------------------------------------------------------------------------------- 1 | export const MenuItems = [ 2 | { 3 | title: 'Marketing', 4 | path: '/marketing', 5 | cName: 'dropdown-link' 6 | }, 7 | { 8 | title: 'Consulting', 9 | path: '/consulting', 10 | cName: 'dropdown-link' 11 | }, 12 | { 13 | title: 'Design', 14 | path: '/design', 15 | cName: 'dropdown-link' 16 | }, 17 | { 18 | title: 'Development', 19 | path: '/development', 20 | cName: 'dropdown-link' 21 | } 22 | ]; 23 | -------------------------------------------------------------------------------- /src/components/Button.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #1888ff; 3 | } 4 | 5 | .btn { 6 | padding: 8px 20px; 7 | border-radius: 4px; 8 | outline: none; 9 | border: none; 10 | font-size: 18px; 11 | color: #fff; 12 | cursor: pointer; 13 | background-color: var(--primary); 14 | } 15 | 16 | .btn:hover { 17 | padding: 6px 18px; 18 | transition: all 0.3s ease-out; 19 | background-color: transparent; 20 | color: #fff; 21 | border-radius: 4px; 22 | border: 2px solid var(--primary); 23 | transition: all 0.3s ease-out; 24 | } 25 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/components/Dropdown.css: -------------------------------------------------------------------------------- 1 | .dropdown-menu { 2 | background: red; 3 | width: 200px; 4 | position: absolute; 5 | top: 80px; 6 | list-style: none; 7 | text-align: start; 8 | } 9 | 10 | .dropdown-menu li { 11 | background: #1888ff; 12 | cursor: pointer; 13 | } 14 | 15 | .dropdown-menu li:hover { 16 | background: #5cabff; 17 | } 18 | 19 | .dropdown-menu.clicked { 20 | display: none; 21 | } 22 | 23 | .dropdown-link { 24 | display: block; 25 | height: 100%; 26 | width: 100%; 27 | text-decoration: none; 28 | color: #fff; 29 | padding: 16px; 30 | } 31 | 32 | @media screen and (max-width: 960px) { 33 | .fa-caret-down { 34 | display: none; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "navbar-dropdown-v1", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "3.4.1" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": { 24 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/components/Dropdown.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { MenuItems } from './MenuItems'; 3 | import './Dropdown.css'; 4 | import { Link } from 'react-router-dom'; 5 | 6 | function Dropdown() { 7 | const [click, setClick] = useState(false); 8 | 9 | const handleClick = () => setClick(!click); 10 | 11 | return ( 12 | <> 13 | 31 | 32 | ); 33 | } 34 | 35 | export default Dropdown; 36 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Navbar from './components/Navbar'; 3 | import './App.css'; 4 | import Home from './components/pages/Home'; 5 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; 6 | import Services from './components/pages/Services'; 7 | import Products from './components/pages/Products'; 8 | import ContactUs from './components/pages/ContactUs'; 9 | import SignUp from './components/pages/SignUp'; 10 | import Marketing from './components/pages/Marketing'; 11 | import Consulting from './components/pages/Consulting'; 12 | 13 | function App() { 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | } 29 | 30 | export default App; 31 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'PT Sans', sans-serif; 6 | } 7 | 8 | .home, 9 | .services, 10 | .products, 11 | .contact-us, 12 | .sign-up, 13 | .marketing, 14 | .consulting { 15 | display: flex; 16 | height: 90vh; 17 | align-items: center; 18 | justify-content: center; 19 | font-size: 3rem; 20 | } 21 | 22 | .home { 23 | background-image: url('./images/img-1.jpg'); 24 | background-position: center; 25 | background-size: cover; 26 | background-repeat: no-repeat; 27 | color: #fff; 28 | font-size: 100px; 29 | } 30 | 31 | .services { 32 | background-image: url('./images/img-2.jpg'); 33 | background-position: center; 34 | background-size: cover; 35 | background-repeat: no-repeat; 36 | color: #fff; 37 | font-size: 100px; 38 | } 39 | 40 | .products { 41 | background-image: url('./images/img-3.jpg'); 42 | background-position: center; 43 | background-size: fill; 44 | background-repeat: no-repeat; 45 | color: #fff; 46 | font-size: 100px; 47 | } 48 | 49 | .contact-us { 50 | background-image: url('./images/img-4.jpg'); 51 | background-position: center; 52 | background-size: cover; 53 | background-repeat: no-repeat; 54 | color: #fff; 55 | font-size: 100px; 56 | } 57 | 58 | .sign-up { 59 | background-image: url('./images/img-7.jpg'); 60 | background-position: center; 61 | background-size: cover; 62 | background-repeat: no-repeat; 63 | color: #fff; 64 | font-size: 100px; 65 | } 66 | 67 | .marketing { 68 | background-image: url('./images/img-6.jpg'); 69 | background-position: center; 70 | background-size: cover; 71 | background-repeat: no-repeat; 72 | color: #fff; 73 | font-size: 100px; 74 | } 75 | 76 | .consulting { 77 | background-image: url('./images/img-5.jpg'); 78 | background-position: bottom; 79 | background-size: cover; 80 | background-repeat: no-repeat; 81 | color: #fff; 82 | font-size: 100px; 83 | } 84 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 19 | 23 | 24 | 28 | 29 | 38 | React App 39 | 40 | 41 | 42 |
43 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /src/components/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Button } from './Button'; 3 | import { Link } from 'react-router-dom'; 4 | import './Navbar.css'; 5 | import Dropdown from './Dropdown'; 6 | 7 | function Navbar() { 8 | const [click, setClick] = useState(false); 9 | const [dropdown, setDropdown] = useState(false); 10 | 11 | const handleClick = () => setClick(!click); 12 | const closeMobileMenu = () => setClick(false); 13 | 14 | const onMouseEnter = () => { 15 | if (window.innerWidth < 960) { 16 | setDropdown(false); 17 | } else { 18 | setDropdown(true); 19 | } 20 | }; 21 | 22 | const onMouseLeave = () => { 23 | if (window.innerWidth < 960) { 24 | setDropdown(false); 25 | } else { 26 | setDropdown(false); 27 | } 28 | }; 29 | 30 | return ( 31 | <> 32 | 90 | 91 | ); 92 | } 93 | 94 | export default Navbar; 95 | -------------------------------------------------------------------------------- /src/components/Navbar.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 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 | text-decoration: none; 16 | font-size: 2rem; 17 | } 18 | 19 | .fa-firstdraft { 20 | margin-left: 0.5rem; 21 | font-size: 1.6rem; 22 | } 23 | 24 | .nav-menu { 25 | display: grid; 26 | grid-template-columns: repeat(5, auto); 27 | grid-gap: 10px; 28 | list-style: none; 29 | text-align: center; 30 | width: 70vw; 31 | justify-content: end; 32 | margin-right: 2rem; 33 | } 34 | 35 | .nav-item { 36 | display: flex; 37 | align-items: center; 38 | height: 80px; 39 | } 40 | 41 | .nav-links { 42 | color: white; 43 | text-decoration: none; 44 | padding: 0.5rem 1rem; 45 | } 46 | 47 | .nav-links:hover { 48 | background-color: #1888ff; 49 | border-radius: 4px; 50 | transition: all 0.2s ease-out; 51 | } 52 | 53 | .fa-bars { 54 | color: #fff; 55 | } 56 | 57 | .nav-links-mobile { 58 | display: none; 59 | } 60 | 61 | .menu-icon { 62 | display: none; 63 | } 64 | 65 | @media screen and (max-width: 960px) { 66 | .NavbarItems { 67 | position: relative; 68 | } 69 | 70 | .nav-menu { 71 | display: flex; 72 | flex-direction: column; 73 | width: 100%; 74 | height: 90vh; 75 | position: absolute; 76 | top: 80px; 77 | left: -100%; 78 | opacity: 1; 79 | transition: all 0.5s ease; 80 | } 81 | 82 | .nav-menu.active { 83 | background: #242222; 84 | left: 0; 85 | opacity: 1; 86 | transition: all 0.5s ease; 87 | z-index: 1; 88 | } 89 | 90 | .nav-links { 91 | text-align: center; 92 | padding: 2rem; 93 | width: 100%; 94 | display: table; 95 | } 96 | 97 | .nav-links:hover { 98 | background-color: #1888ff; 99 | border-radius: 0; 100 | } 101 | 102 | .navbar-logo { 103 | position: absolute; 104 | top: 0; 105 | left: 0; 106 | transform: translate(25%, 50%); 107 | } 108 | 109 | .menu-icon { 110 | display: block; 111 | position: absolute; 112 | top: 0; 113 | right: 0; 114 | transform: translate(-100%, 60%); 115 | font-size: 1.8rem; 116 | cursor: pointer; 117 | } 118 | 119 | .fa-times { 120 | color: #fff; 121 | font-size: 2rem; 122 | } 123 | 124 | .nav-links-mobile { 125 | display: block; 126 | text-align: center; 127 | padding: 1.5rem; 128 | margin: 2rem auto; 129 | border-radius: 4px; 130 | width: 80%; 131 | background: #1888ff; 132 | text-decoration: none; 133 | color: #fff; 134 | font-size: 1.5rem; 135 | } 136 | 137 | .nav-links-mobile:hover { 138 | background: #fff; 139 | color: #1888ff; 140 | transition: 250ms; 141 | } 142 | 143 | button { 144 | display: none; 145 | } 146 | } 147 | --------------------------------------------------------------------------------