├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── public
    └── index.html
└── src
    ├── App.css
    ├── App.js
    ├── components
        ├── About
        │   └── About.js
        ├── Navbar
        │   ├── Navbar.css
        │   └── Navbar.js
        ├── NavbarItems.js
        ├── Services
        │   └── Services.js
        └── Sidebar
        │   ├── Sidebar.css
        │   └── Sidebar.js
    └── 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 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Sarvesh Patil
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React-Responsive-Navbar
 2 | > A Ready responsive Navbar for ReactJs with Hamburger menu. Just change Name and logo and you're good to go.
 3 | 
 4 | <p align="center">
 5 |   <img src="https://raw.githubusercontent.com/sarveshh/sarveshh/main/Github%20Template.png" alt="demo"/>
 6 | </p>
 7 | 
 8 | ### Setup Navbar locally and start creating project.
 9 | 
10 | 1. Fork this repository
11 | 2. Clone this project locally using
12 | > git clone https://github.com/{your-username}/React-Responsive-Navbar.git
13 | 3. cd React-Responsive-Navbar
14 | 4. npm install
15 | 5. npm run start
16 | 6. Change Navbar Section names from NavbarItems.js fitting your needs.
17 | 7. Change Name and Logo and you're done.
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "reactnavbartemplate",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "description": "This is a template for a react navbar",
 6 |   "dependencies": {
 7 |     "@testing-library/jest-dom": "^5.11.9",
 8 |     "@testing-library/react": "^11.2.5",
 9 |     "@testing-library/user-event": "^12.7.1",
10 |     "react-icons": "^4.2.0",
11 |     "react-router": "^6.2.1",
12 |     "react-router-dom": "^6.2.1",
13 |     "react-scripts": "4.0.2",
14 |     "web-vitals": "^1.1.0"
15 |   },
16 |   "devDependencies": {
17 |     "react": "^17.0.1",
18 |     "react-dom": "^17.0.1"
19 |   },
20 |   "peerDependencies": {
21 |     "react": "^17.0.1",
22 |     "react-dom": "^17.0.1"
23 |   },
24 |   "scripts": {
25 |     "start": "react-scripts start",
26 |     "build": "react-scripts build",
27 |     "test": "react-scripts test",
28 |     "eject": "react-scripts eject"
29 |   },
30 |   "eslintConfig": {
31 |     "extends": [
32 |       "react-app",
33 |       "react-app/jest"
34 |     ]
35 |   },
36 |   "browserslist": {
37 |     "production": [
38 |       ">0.2%",
39 |       "not dead",
40 |       "not op_mini all"
41 |     ],
42 |     "development": [
43 |       "last 1 chrome version",
44 |       "last 1 firefox version",
45 |       "last 1 safari version"
46 |     ]
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <title>React Navbar Template</title>
 6 |   <meta charset="utf-8" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <meta name="theme-color" content="#000000" />
 9 |   <meta name="description" content="Web site created using create-react-app" />
10 |   <title>React App</title>
11 | </head>
12 | 
13 | <body>
14 |   <noscript>You need to enable JavaScript to run this app.</noscript>
15 |   <div id="root"></div>
16 | </body>
17 | 
18 | </html>


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | *{
2 |     margin: 0;
3 |     padding: 0;
4 |     box-sizing: border-box;
5 |     font-family: Verdana, Geneva, Tahoma, sans-serif;
6 |   }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import "./App.css";
 3 | import Navbar from "./components/Navbar/Navbar";
 4 | import About from "./components/About/About";
 5 | import Services from "./components/Services/Services";
 6 | import Sidebar from "./components/Sidebar/Sidebar";
 7 | import { Routes, Route } from "react-router-dom";
 8 | 
 9 | function App() {
10 |   const [isopen, setisopen] = useState(false);
11 |   const toggle = () => {
12 |     setisopen(!isopen);
13 |   };
14 | 
15 |   return (
16 |     <>
17 |       <Navbar toggle={toggle} />
18 |       <Sidebar isopen={isopen} toggle={toggle} />
19 |       <Routes>
20 |         <Route path="/about" element={<About />} />
21 |         <Route path="/services" element={<Services />} />
22 |       </Routes>
23 |     </>
24 |   );
25 | }
26 | 
27 | export default App;
28 | 


--------------------------------------------------------------------------------
/src/components/About/About.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const About = () => {
 4 |   return (
 5 |     <div style={{ position: "absolute", marginTop: "70px", fontSize: "20px" }}>
 6 |       About
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default About;
12 | 


--------------------------------------------------------------------------------
/src/components/Navbar/Navbar.css:
--------------------------------------------------------------------------------
 1 | nav {
 2 |   height: 70px;
 3 |   display: flex;
 4 |   justify-content: space-between;
 5 |   padding: 1rem 2rem;
 6 |   z-index: 100;
 7 |   position: fixed;
 8 |   width: 100%;
 9 |   background: black;
10 | }
11 | .link {
12 |   text-decoration: none;
13 |   display: flex;
14 |   color: white;
15 |   align-items: center;
16 |   padding: 0 1rem;
17 |   height: 100%;
18 |   cursor: pointer;
19 | }
20 | .mobile-menu-icon {
21 |   display: none;
22 | }
23 | .icons {
24 |   display: flex;
25 |   align-items: center;
26 | }
27 | .icon-tabler {
28 |   margin-right: 5px;
29 | }
30 | .github-icon {
31 |   color: white;
32 | }
33 | .menu-items {
34 |   display: flex;
35 |   align-items: center;
36 | }
37 | 
38 | @media screen and (max-width: 768px) {
39 |   .menu-items,
40 |   .signup-button,
41 |   .github-corner {
42 |     display: none;
43 |   }
44 |   .mobile-menu-icon {
45 |     display: block;
46 |     color: white;
47 |     display: flex;
48 |     align-items: center;
49 |     font-size: 4vh;
50 |     cursor: pointer;
51 |     top: 0;
52 |     right: 0;
53 |   }
54 | }
55 | 
56 | .github-corner {
57 |   position: fixed;
58 |   top: 0;
59 |   z-index: 99999;
60 |   right: 0px;
61 | }
62 | 


--------------------------------------------------------------------------------
/src/components/Navbar/Navbar.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Navbar.css";
 3 | import navbarItems from "../NavbarItems";
 4 | import { Link } from "react-router-dom";
 5 | import { FaBars } from "react-icons/fa";
 6 | 
 7 | const Navbar = ({ toggle }) => {
 8 |   return (
 9 |     <nav>
10 |       <Link to="/" className="link">
11 |         <svg
12 |           xmlns="http://www.w3.org/2000/svg"
13 |           className="icon-tabler icon-tabler-brand-edge"
14 |           width="24"
15 |           height="24"
16 |           viewBox="0 0 24 24"
17 |           strokeWidth="2"
18 |           stroke="currentColor"
19 |           fill="none"
20 |           strokeLinecap="round"
21 |           strokeLinejoin="round"
22 |         >
23 |           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
24 |           <path d="M20.978 11.372a9 9 0 1 0 -1.593 5.773"></path>
25 |           <path d="M20.978 11.372c.21 2.993 -5.034 2.413 -6.913 1.486c1.392 -1.6 .402 -4.038 -2.274 -3.851c-1.745 .122 -2.927 1.157 -2.784 3.202c.28 3.99 4.444 6.205 10.36 4.79"></path>
26 |           <path d="M3.022 12.628c-.283 -4.043 8.717 -7.228 11.248 -2.688"></path>
27 |           <path d="M12.628 20.978c-2.993 .21 -5.162 -4.725 -3.567 -9.748"></path>
28 |         </svg>
29 |         Name
30 |       </Link>
31 |       <div className="menu-items">
32 |         {navbarItems.map((item, index) => (
33 |           <Link className="link" to={item.link} key={index}>
34 |             {item.title}
35 |           </Link>
36 |         ))}
37 |       </div>
38 |       <div className="icons">
39 |         <svg
40 |           xmlns="http://www.w3.org/2000/svg"
41 |           className="github-icon icon-tabler icon-tabler-brand-github"
42 |           width="30"
43 |           height="30"
44 |           viewBox="0 0 24 24"
45 |           strokeWidth="2"
46 |           stroke="currentColor"
47 |           fill="#000"
48 |           strokeLinecap="round"
49 |           strokeLinejoin="round"
50 |         >
51 |           <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
52 |           <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path>
53 |         </svg>
54 |         <div className="mobile-menu-icon">
55 |           <FaBars onClick={toggle} />
56 |         </div>
57 |       </div>
58 |     </nav>
59 |   );
60 | };
61 | 
62 | export default Navbar;
63 | 


--------------------------------------------------------------------------------
/src/components/NavbarItems.js:
--------------------------------------------------------------------------------
 1 | const navbarItems = [
 2 |   {
 3 |     title: "About",
 4 |     link: "/about",
 5 |   },
 6 |   {
 7 |     title: "Services",
 8 |     link: "/Services",
 9 |   },
10 | ];
11 | 
12 | export default navbarItems;
13 | 


--------------------------------------------------------------------------------
/src/components/Services/Services.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Services = () => {
 4 |   return (
 5 |     <div style={{ position: "absolute", marginTop: "70px", fontSize: "20px" }}>
 6 |       Services
 7 |     </div>
 8 |   );
 9 | };
10 | 
11 | export default Services;
12 | 


--------------------------------------------------------------------------------
/src/components/Sidebar/Sidebar.css:
--------------------------------------------------------------------------------
 1 | .sidebar-container{
 2 |     position: fixed;
 3 |     z-index: 999;
 4 |     width: 100%;
 5 |     height: 100%;
 6 |     background: #000d1a;
 7 |     display: grid;
 8 |     align-items: center;
 9 |     left: 0;
10 |     transition: 0.3s ease-in-out;
11 | }
12 | 
13 | .opacity-on{
14 |     opacity: 1;
15 |     top: 0;
16 | }
17 | .opacity-off{
18 |     opacity: 0;
19 |     top: -100%;
20 | }
21 | .icon{
22 |     background: transparent;
23 |     font-size: 2rem;
24 |     cursor: pointer;
25 |     outline: none;
26 |     color: white;
27 |     position: absolute;
28 |     top: 2rem;
29 |     right: 2.5rem;
30 | }
31 | .close-icon{
32 |     color : whitesmoke
33 | }
34 | .sidebar-menu{
35 |     display: grid;
36 |     grid-template-columns: 1fr;
37 |     grid-template-rows: repeat(4, 80px);
38 |     text-align: center;
39 |     margin-bottom: 4rem;
40 | }
41 | .sidebar-links{
42 |     display: flex;
43 |     align-items: center;
44 |     justify-content: center;
45 |     color: #fff;
46 |     font-size: 1.5rem;
47 |     text-decoration: none;
48 |     list-style: none;
49 |     cursor: pointer;
50 |     transition: 0.2s ease-in-out ;
51 | }
52 | 
53 | @media screen and (max-width: 480px){
54 |     .sidebar-menu{
55 |         grid-template-rows: repeat(4, 60px)
56 |     }
57 | }
58 | .button-wrap{
59 |     display: flex;
60 |     justify-content: center;
61 | }


--------------------------------------------------------------------------------
/src/components/Sidebar/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import "./Sidebar.css";
 3 | import navbarItems from "../NavbarItems";
 4 | import { FaTimes } from "react-icons/fa";
 5 | import { Link } from "react-router-dom";
 6 | 
 7 | const Sidebar = ({ isopen, toggle }) => {
 8 |   let opacityClasses = ["sidebar-container"];
 9 |   if (isopen) {
10 |     opacityClasses.push("opacity-on");
11 |   } else {
12 |     opacityClasses.push("opacity-off");
13 |   }
14 | 
15 |   return (
16 |     <div
17 |       className={opacityClasses.join(" ")}
18 |       isopen={isopen.toString()}
19 |       onClick={toggle}
20 |     >
21 |       <div className="icon">
22 |         <FaTimes className="close-icon" onClick={toggle} />
23 |       </div>
24 |       <div className="sidebar-wrapper">
25 |         <div className="sidebar-menu">
26 |           {navbarItems.map((item, index) => (
27 |             <Link to={item.link} key={index} className="sidebar-links">
28 |               {item.title}
29 |             </Link>
30 |           ))}
31 |         </div>
32 |       </div>
33 |     </div>
34 |   );
35 | };
36 | 
37 | export default Sidebar;
38 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | import { BrowserRouter } from 'react-router-dom';
 5 | 
 6 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <BrowserRouter>
 9 |       <App />
10 |     </BrowserRouter>
11 |   </React.StrictMode>,
12 |   document.getElementById('root')
13 | );
14 | 


--------------------------------------------------------------------------------