├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── src
    ├── App.js
    ├── setupTests.js
    ├── App.test.js
    ├── index.js
    └── components
    │   └── Sidebar
    │       ├── Sidebar.js
    │       └── index.css
├── README.md
├── .gitignore
└── 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/abdulaziz-m5u/react-sidebar-responsive/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdulaziz-m5u/react-sidebar-responsive/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdulaziz-m5u/react-sidebar-responsive/HEAD/public/logo512.png


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Js sidebar responsive
 2 | 
 3 | Clone the project and run:
 4 | 
 5 | ### `npm install`
 6 | 
 7 | ### `npm start`
 8 | 
 9 | Runs the app in the development mode.\
10 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
11 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sidebar-responsive",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.3",
 7 |     "@testing-library/react": "^12.1.4",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "react": "^18.0.0",
10 |     "react-dom": "^18.0.0",
11 |     "react-router-dom": "^6.3.0",
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 | 


--------------------------------------------------------------------------------
/src/components/Sidebar/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import './index.css';
 3 | import { Link } from 'react-router-dom';
 4 | 
 5 | const Sidebar = () => {
 6 |   const [show, setShow] = useState(false);
 7 | 
 8 |   return (
 9 |     <main className={show ? 'space-toggle' : null}>
10 |       <header className={`header ${show ? 'space-toggle' : null}`}>
11 |         <div className='header-toggle' onClick={() => setShow(!show)}>
12 |           <i className={`fas fa-bars ${show ? 'fa-solid fa-xmark' : null}`}></i>
13 |         </div>
14 |       </header>
15 | 
16 |       <aside className={`sidebar ${show ? 'show' : null}`}>
17 |         <nav className='nav'>
18 |           <div>
19 |             <Link to='/' className='nav-logo'>
20 |               <i className={`fas fa-home-alt nav-logo-icon`}></i>
21 |               <span className='nav-logo-name'>Homepage</span>
22 |             </Link>
23 | 
24 |             <div className='nav-list'>
25 |               <Link to='/dashboard' className='nav-link active'>
26 |                 <i className='fas fa-tachometer-alt nav-link-icon'></i>
27 |                 <span className='nav-link-name'>Dashboard</span>
28 |               </Link>
29 |               <Link to='/hotel' className='nav-link'>
30 |                 <i className='fas fa-hotel nav-link-icon'></i>
31 |                 <span className='nav-link-name'>Hotel</span>
32 |               </Link>
33 |               <Link to='/gallery' className='nav-link'>
34 |                 <i className='fas fa-image nav-link-icon'></i>
35 |                 <span className='nav-link-name'>Gallery</span>
36 |               </Link>
37 |               <Link to='/gallery' className='nav-link'>
38 |                 <i className='fas fa-dollar-sign nav-link-icon'></i>
39 |                 <span className='nav-link-name'>Transaction</span>
40 |               </Link>
41 |             </div>
42 |           </div>
43 | 
44 |           <Link to='/logout' className='nav-link'>
45 |             <i className='fas fa-sign-out nav-link-icon'></i>
46 |             <span className='nav-link-name'>Logout</span>
47 |           </Link>
48 |         </nav>
49 |       </aside>
50 | 
51 |       <h1>Content</h1>
52 |     </main>
53 |   );
54 | };
55 | 
56 | export default Sidebar;
57 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <link
28 |       href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&display=swap"
29 |       rel="stylesheet"
30 |     />
31 |     <link
32 |       rel="stylesheet"
33 |       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
34 |       integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
35 |       crossorigin="anonymous"
36 |       referrerpolicy="no-referrer"
37 |     />
38 |     <title>React App</title>
39 |   </head>
40 |   <body>
41 |     <noscript>You need to enable JavaScript to run this app.</noscript>
42 |     <div id="root"></div>
43 |     <!--
44 |       This HTML file is a template.
45 |       If you open it directly in the browser, you will see an empty page.
46 | 
47 |       You can add webfonts, meta tags, or analytics to this file.
48 |       The build step will place the bundled scripts into the <body> tag.
49 | 
50 |       To begin the development, run `npm start` or `yarn start`.
51 |       To create a production bundle, use `npm run build` or `yarn build`.
52 |     -->
53 |   </body>
54 | </html>
55 | 


--------------------------------------------------------------------------------
/src/components/Sidebar/index.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |   --header-height: 3rem;
  3 |   --nav-width: 68px;
  4 | 
  5 |   --first-color: #f10086;
  6 |   --first-color-alt: #f582a7;
  7 |   --white-color: #ffddee;
  8 | }
  9 | 
 10 | * {
 11 |   margin: 0;
 12 |   padding: 0;
 13 |   box-sizing: border-box;
 14 | }
 15 | 
 16 | a {
 17 |   text-decoration: none;
 18 | }
 19 | 
 20 | ul {
 21 |   list-style: none;
 22 | }
 23 | 
 24 | main {
 25 |   position: relative;
 26 |   margin: var(--header-height) 0 0 0;
 27 |   padding: 0 1rem;
 28 |   font-size: 1rem;
 29 |   font-family: 'Nunito Sans', sans-serif;
 30 |   transition: 0.5s;
 31 | }
 32 | 
 33 | .header {
 34 |   position: fixed;
 35 |   top: 0;
 36 |   left: 0;
 37 |   height: var(--header-height);
 38 |   width: 100%;
 39 |   display: flex;
 40 |   justify-content: space-between;
 41 |   align-items: center;
 42 |   background-color: var(--white-color);
 43 |   padding: 0 1rem;
 44 |   transition: 0.5s;
 45 | }
 46 | 
 47 | .header-toggle {
 48 |   font-size: 1.25rem;
 49 |   cursor: pointer;
 50 |   color: var(--first-color);
 51 | }
 52 | 
 53 | .sidebar {
 54 |   position: fixed;
 55 |   top: 0;
 56 |   left: -30%;
 57 |   height: 100vh;
 58 |   width: var(--nav-width);
 59 |   background-color: var(--first-color);
 60 |   padding-top: 1rem;
 61 |   transition: 0.5s;
 62 | }
 63 | 
 64 | .nav {
 65 |   display: flex;
 66 |   flex-direction: column;
 67 |   justify-content: space-between;
 68 |   overflow: hidden;
 69 |   height: 100%;
 70 | }
 71 | 
 72 | .nav-logo,
 73 | .nav-link {
 74 |   display: grid;
 75 |   grid-template-columns: max-content max-content;
 76 |   column-gap: 2rem;
 77 |   padding: 0.5rem 0 0.5rem 1.5rem;
 78 | }
 79 | 
 80 | .nav-logo {
 81 |   margin-bottom: 2rem;
 82 | }
 83 | 
 84 | .nav-logo-icon {
 85 |   font-size: 1.25rem;
 86 |   color: var(--white-color);
 87 |   cursor: pointer;
 88 | }
 89 | 
 90 | .nav-logo-name {
 91 |   font-weight: 700;
 92 |   color: var(--white-color);
 93 | }
 94 | 
 95 | .nav-link {
 96 |   position: relative;
 97 |   color: var(--first-color-alt);
 98 |   transition: 0.5s;
 99 |   margin-bottom: 1.5rem;
100 | }
101 | 
102 | .nav-link:hover {
103 |   color: var(--white-color);
104 |   background-color: rgba(0, 0, 0, 0.1);
105 | }
106 | 
107 | .active {
108 |   color: var(--white-color);
109 |   background-color: rgba(0, 0, 0, 0.1);
110 | }
111 | 
112 | .active::before {
113 |   content: '';
114 |   position: absolute;
115 |   left: 0;
116 |   top: 0;
117 |   height: 38px;
118 |   width: 3px;
119 |   background-color: var(--white-color);
120 |   transition: 0.5s;
121 | }
122 | 
123 | .show {
124 |   left: 0;
125 | }
126 | 
127 | .space-toggle {
128 |   padding-left: calc(var(--nav-width) + 1rem);
129 | }
130 | 
131 | @media screen and (min-width: 768px) {
132 |   main {
133 |     margin: calc(var(--header-height) + 1rem) 0 0 0;
134 |     padding: 0 1rem 0 calc(var(--nav-width) + 2rem);
135 |   }
136 | 
137 |   .header {
138 |     height: calc(var(--header-height) + 1rem);
139 |     padding-left: calc(var(--nav-width) + 2rem);
140 |   }
141 | 
142 |   .sidebar {
143 |     left: 0;
144 |     padding: 1rem 0 0 0;
145 |   }
146 | 
147 |   .show {
148 |     width: calc(var(--header-height) + 156px);
149 |   }
150 | 
151 |   .space-toggle {
152 |     padding-left: calc(var(--nav-width) + 188px);
153 |   }
154 | }
155 | 


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