├── .gitignore
├── .vscode
└── settings.json
├── README.md
├── package-lock.json
├── package.json
├── public
├── index.html
├── manifest.json
└── robots.txt
└── src
├── App.js
├── Components
└── Navbar.js
├── Styles
└── main.css
└── index.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.fontSize": 16
3 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## A responsive navbar for React JS
2 | ---
3 | ##### Tutorail: https://youtu.be/amf18mxNX18
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "navbar",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.2",
7 | "@testing-library/react": "^12.1.3",
8 | "@testing-library/user-event": "^13.5.0",
9 | "react": "^17.0.2",
10 | "react-dom": "^17.0.2",
11 | "react-icons": "^4.3.1",
12 | "react-scripts": "5.0.0",
13 | "web-vitals": "^2.1.4"
14 | },
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test",
19 | "eject": "react-scripts eject"
20 | },
21 | "eslintConfig": {
22 | "extends": [
23 | "react-app",
24 | "react-app/jest"
25 | ]
26 | },
27 | "browserslist": {
28 | "production": [
29 | ">0.2%",
30 | "not dead",
31 | "not op_mini all"
32 | ],
33 | "development": [
34 | "last 1 chrome version",
35 | "last 1 firefox version",
36 | "last 1 safari version"
37 | ]
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/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.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Navbar from "./Components/Navbar";
3 |
4 | function App() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 |
12 | export default App;
13 |
--------------------------------------------------------------------------------
/src/Components/Navbar.js:
--------------------------------------------------------------------------------
1 | import { useRef } from "react";
2 | import { FaBars, FaTimes } from "react-icons/fa";
3 | import "../Styles/main.css";
4 |
5 | function Navbar() {
6 | const navRef = useRef();
7 |
8 | const showNavbar = () => {
9 | navRef.current.classList.toggle(
10 | "responsive_nav"
11 | );
12 | };
13 |
14 | return (
15 |
34 | );
35 | }
36 |
37 | export default Navbar;
38 |
--------------------------------------------------------------------------------
/src/Styles/main.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;700&display=swap");
2 |
3 | * {
4 | padding: 0;
5 | margin: 0;
6 | box-sizing: border-box;
7 | font-family: "Titillium Web", sans-serif;
8 | }
9 |
10 | :root {
11 | --mainColor: #29335c;
12 | --mainColorLight: #5767aa;
13 | --secondaryColor: #db2b39;
14 | --textColor: #eee;
15 | }
16 |
17 | header {
18 | display: flex;
19 | align-items: center;
20 | justify-content: space-between;
21 | height: 80px;
22 | padding: 0 2rem;
23 | background-color: var(--mainColor);
24 | color: var(--textColor);
25 | }
26 |
27 | nav a {
28 | margin: 0 1rem;
29 | color: var(--textColor);
30 | text-decoration: none;
31 | }
32 |
33 | nav a:hover {
34 | color: var(--secondaryColor);
35 | }
36 |
37 | header .nav-btn {
38 | padding: 5px;
39 | cursor: pointer;
40 | background: transparent;
41 | border: none;
42 | outline: none;
43 | color: var(--textColor);
44 | visibility: hidden;
45 | opacity: 0;
46 | font-size: 1.8rem;
47 | }
48 |
49 | header div,
50 | nav {
51 | display: flex;
52 | align-items: center;
53 | }
54 |
55 | @media only screen and (max-width: 1024px) {
56 | header .nav-btn {
57 | visibility: visible;
58 | opacity: 1;
59 | }
60 |
61 | header nav {
62 | position: fixed;
63 | top: -100vh;
64 | left: 0;
65 | height: 100%;
66 | width: 100%;
67 | display: flex;
68 | flex-direction: column;
69 | align-items: center;
70 | justify-content: center;
71 | gap: 1.5rem;
72 | background-color: var(--mainColor);
73 | transition: 1s;
74 | }
75 |
76 | header .responsive_nav {
77 | transform: translateY(100vh);
78 | }
79 |
80 | nav .nav-close-btn {
81 | position: absolute;
82 | top: 2rem;
83 | right: 2rem;
84 | }
85 |
86 | nav a {
87 | font-size: 1.5rem;
88 | }
89 | }
90 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(
6 | ,
7 | document.getElementById('root')
8 | );
9 |
--------------------------------------------------------------------------------