├── .gitignore
├── README.md
├── h33pee.gif
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.js
    ├── Hooks
        └── useOnClickOutside.tsx
    ├── icons
        ├── arrow.svg
        ├── bell.svg
        ├── bolt.svg
        ├── caret.svg
        ├── chevron.svg
        ├── cog.svg
        ├── messenger.svg
        └── plus.svg
    ├── index.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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Dropdown/ Dropup Menu 
 2 | 
 3 | Animated multi-level dropdown menu inspired by Facebook's March 2020 web UI. 
 4 | 
 5 | ![](h33pee.gif)
 6 | 
 7 | Watch the full [React dropdown tutorial](https://youtu.be/IF6k0uZuypA) on YouTube by Jeff Delaney. 
 8 | made by the great Jeff Delaney (https://github.com/codediodeio), modified by me.
 9 | 
10 | ```
11 | git clone <this-repo>
12 | 
13 | npm i
14 | npm start
15 | ```
16 | 
17 | 
18 | I realised after searching a lot, such multilevel advanced animated menu tutorials don't exist. Maybe there are some yeah, but after trying to find a really good one for a long time, I finally landed upon this video that did exactly (actually very closed to) what I wanted, and what I wanted was to re-create youtube player's settings dropup. ( you can see it in any video, there is a cog logo right below, where all settings such as captions customization and playback rate are, just open it and play with it, its satisfying. ), and I just couldn't figure how that was done. This video/code was very close to the one I needed, just that it was limited to 2 levels ( primary and secondary ), so I extended it to 4 levels and found a general way to do so. I am a begineer js developer who loves modern web technologies, so I tried this. thanks to Jeff, I feel much better now.
19 | 


--------------------------------------------------------------------------------
/h33pee.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/facinick/MultiLevelDropUpReact/ff98098f95d3684d650029231e23b4cc3b62dfa5/h33pee.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "facebook",
 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 |     "react-transition-group": "^4.3.0"
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 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/facinick/MultiLevelDropUpReact/ff98098f95d3684d650029231e23b4cc3b62dfa5/public/favicon.ico


--------------------------------------------------------------------------------
/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 href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
28 |     <title>React App</title>
29 |   </head>
30 |   <body>
31 |     <noscript>You need to enable JavaScript to run this app.</noscript>
32 |     <div id="root"></div>
33 |     <!--
34 |       This HTML file is a template.
35 |       If you open it directly in the browser, you will see an empty page.
36 | 
37 |       You can add webfonts, meta tags, or analytics to this file.
38 |       The build step will place the bundled scripts into the <body> tag.
39 | 
40 |       To begin the development, run `npm start` or `yarn start`.
41 |       To create a production bundle, use `npm run build` or `yarn build`.
42 |     -->
43 |   </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/facinick/MultiLevelDropUpReact/ff98098f95d3684d650029231e23b4cc3b62dfa5/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/facinick/MultiLevelDropUpReact/ff98098f95d3684d650029231e23b4cc3b62dfa5/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.js:
--------------------------------------------------------------------------------
  1 | import './index.css';
  2 | import { ReactComponent as CaretIcon } from './icons/caret.svg';
  3 | import { ReactComponent as ChevronIcon } from './icons/chevron.svg';
  4 | import { ReactComponent as ArrowIcon } from './icons/arrow.svg';
  5 | 
  6 | import React, { useState, useEffect, useRef } from 'react';
  7 | import { CSSTransition } from 'react-transition-group';
  8 | 
  9 | function App() {
 10 |   return (
 11 |       <NavItem icon={<CaretIcon />}>
 12 |         <DropdownMenu></DropdownMenu>
 13 |       </NavItem>
 14 |   );
 15 | }
 16 | 
 17 | function NavItem(props) {
 18 |   const [open, setOpen] = useState(false);
 19 | 
 20 |   return (
 21 |     <div className="nav-item">
 22 |       <a href="#" className={`icon-button dropdown-button ${open?"open":"closed"}`} onClick={() => setOpen(!open)}>
 23 |         {props.icon}
 24 |       </a>
 25 | 
 26 |       {open && props.children}
 27 |     </div>
 28 |   );
 29 | }
 30 | 
 31 | function getIndex(menu){
 32 |   switch(menu){
 33 |     case "MAIN" : return 1;
 34 |     case "PLAYBACK SPEED" : return 2;
 35 |     case "CLOSED CAPTIONS" : return 2;
 36 |     case "FONT COLOR" : return 4;
 37 |     case "FONT STYLE" : return 4;
 38 |     case "BACKGROUND OPACITY" : return 4;
 39 |     case "BACKGROUND COLOR" : return 4;
 40 |     case "CC SETTINGS" : return 3;
 41 |     default : return 0;
 42 |   }
 43 | }
 44 | 
 45 | function DropdownMenu() {
 46 |   const [activeMenu, setActiveMenu] = useState('MAIN');
 47 |   const [menuHeight, setMenuHeight] = useState(null);
 48 |   const [activeIndex, setActiveIndex] = useState(1);
 49 |   const [prevIndex, setPrevIndex] = useState(1);
 50 | 
 51 |   const [playbackSpeed, setPlaybackSpeed] = useState(1);
 52 |   const [fontColor, setFontColor] = useState("WHITE");
 53 |   const [fontsize, setFontStyle] = useState("HELVETICA");
 54 |   const [backgroundOpacity, setBackgroundOpacity] = useState(0.75);
 55 |   const [backgroundColor, setbackgroundColor] = useState("BLACK");
 56 |   const [closedCaptions, setClosedCaptions] = useState(false);
 57 | 
 58 |   const dropdownRef = useRef(null);
 59 | 
 60 |   useEffect(() => {
 61 |     setMenuHeight(dropdownRef.current?.firstChild.offsetHeight)
 62 |   }, [])
 63 | 
 64 |   function calcHeight(el) {
 65 |     const height = el.offsetHeight;
 66 |     setMenuHeight(height);
 67 |   }
 68 | 
 69 |   function stateUpdate({event,data}){
 70 |     switch(event){
 71 |       case "PLAYBACK SPEED":
 72 |         setPlaybackSpeed(data);
 73 |         break;
 74 |       case "FONT COLOR":
 75 |         setFontColor(data);
 76 |         break;
 77 |       case "FONT STYLE":
 78 |         setFontStyle(data);
 79 |         break;
 80 |       case "BACKGROUND OPACITY":
 81 |         setBackgroundOpacity(data);
 82 |         break;
 83 |       case "BACKGROUND COLOR":
 84 |         setbackgroundColor(data);
 85 |         break;
 86 |       case "TOGGLE CC":
 87 |         setClosedCaptions(data);
 88 |         break;
 89 |     }
 90 |   }
 91 | 
 92 |   function DropdownItem(props) {
 93 |     return (
 94 |       <a href="#" className="menu-item" onClick={
 95 |         () => {
 96 |           if(props.goToMenu){
 97 |             setActiveMenu(props.goToMenu);
 98 |             setPrevIndex(activeIndex);
 99 |             setActiveIndex(getIndex(props.goToMenu));
100 |           }
101 |           if(props.event && props.data) stateUpdate({event:props.event,data:props.data})
102 |         }}>
103 |         {props.leftIcon && <span className="icon-button">{props.leftIcon}</span>}
104 |         {props.children}
105 |         {props.rightIcon && <span className="icon-right">{props.rightIcon}</span>}
106 |       </a>
107 |     );
108 |   }
109 | 
110 |   return (
111 |     <div className="dropdown" style={{ height: menuHeight }} ref={dropdownRef}>
112 | 
113 |       <CSSTransition
114 |         in={activeMenu === 'MAIN'}
115 |         timeout={500}
116 |         classNames={`menu-s`}
117 |         unmountOnExit
118 |         onEnter={calcHeight}>
119 |         <div className="menu">
120 |           <DropdownItem
121 |             rightIcon={<ChevronIcon />}
122 |             goToMenu="PLAYBACK SPEED">
123 |             PLAYBACK SPEED<span className={"toggleStatus"}>{`${playbackSpeed}x`}</span>
124 |           </DropdownItem>
125 |           <DropdownItem
126 |             rightIcon={<ChevronIcon />}
127 |             goToMenu="CLOSED CAPTIONS">
128 |             CLOSED CAPTIONS<span className={"toggleStatus"}>{closedCaptions? "ON":"OFF"}</span>
129 |           </DropdownItem>
130 | 
131 |         </div>
132 |       </CSSTransition>
133 | 
134 |       <CSSTransition
135 |         in={activeMenu === 'PLAYBACK SPEED'}
136 |         timeout={500}
137 |         classNames={`menu-e`}
138 |         unmountOnExit
139 |         onEnter={calcHeight}>
140 |         <div className="menu">
141 |           <DropdownItem goToMenu="MAIN" leftIcon={<ArrowIcon />}>
142 |             <h4>PLAYBACK SPEED</h4>
143 |           </DropdownItem>
144 |           <DropdownItem event={'PLAYBACK SPEED'} data={0.75}>0.75x</DropdownItem>
145 |           <DropdownItem event={'PLAYBACK SPEED'} data={1}>1x (Default)</DropdownItem>
146 |           <DropdownItem event={'PLAYBACK SPEED'} data={1.5}>1.5x</DropdownItem>
147 |           <DropdownItem event={'PLAYBACK SPEED'} data={2}>2x</DropdownItem>
148 |         </div>
149 |       </CSSTransition>
150 | 
151 |       <CSSTransition
152 |         in={activeMenu === 'CLOSED CAPTIONS'}
153 |         timeout={500}
154 |         classNames={`menu-i${activeIndex>prevIndex?"slideLeft":"slideRight"}`}
155 |         unmountOnExit
156 |         onEnter={calcHeight}>
157 |         <div className="menu">
158 |           <DropdownItem goToMenu="MAIN" leftIcon={<ArrowIcon />}>
159 |             <h4>CLOSED CAPTIONS</h4>
160 |           </DropdownItem>
161 |           <DropdownItem event={"TOGGLE CC"} data={false}>
162 |             TURN OFF</DropdownItem>
163 |           <DropdownItem event={"TOGGLE CC"} data={true}>
164 |             ENGLISH</DropdownItem>
165 |           <DropdownItem 
166 |             rightIcon={<ChevronIcon />}
167 |             goToMenu="CC SETTINGS">
168 |             CC SETTINGS</DropdownItem>
169 |         </div>
170 |       </CSSTransition>
171 | 
172 |       <CSSTransition
173 |         in={activeMenu === 'CC SETTINGS'}
174 |         timeout={500}
175 |         classNames={`menu-i${activeIndex>prevIndex?"slideLeft":"slideRight"}`}
176 |         unmountOnExit
177 |         onEnter={calcHeight}>
178 |         <div className="menu">
179 |           <DropdownItem goToMenu="CLOSED CAPTIONS" leftIcon={<ArrowIcon />}>
180 |             <h4>CC SETTINGS</h4>
181 |           </DropdownItem>
182 |           <DropdownItem 
183 |               rightIcon={<ChevronIcon />}
184 |               goToMenu="FONT COLOR">
185 |               FONT COLOR</DropdownItem>
186 |           <DropdownItem 
187 |               rightIcon={<ChevronIcon />}
188 |               goToMenu="FONT STYLE">
189 |               FONT SIZE</DropdownItem>
190 |           <DropdownItem 
191 |               rightIcon={<ChevronIcon />}
192 |               goToMenu="BACKGROUND COLOR">
193 |               BACKGROUND COLOR</DropdownItem>
194 |           <DropdownItem 
195 |               rightIcon={<ChevronIcon />}
196 |               goToMenu="BACKGROUND OPACITY">
197 |               BACKGROUND OPACITY</DropdownItem>
198 |         </div>
199 |       </CSSTransition>
200 | 
201 |       <CSSTransition
202 |         in={activeMenu === 'FONT COLOR'}
203 |         timeout={500}
204 |         classNames={`menu-e`}
205 |         unmountOnExit
206 |         onEnter={calcHeight}>
207 |         <div className="menu">
208 |           <DropdownItem goToMenu="CC SETTINGS" leftIcon={<ArrowIcon />}>
209 |             <h4>FONT COLORS</h4>
210 |           </DropdownItem>
211 |           <DropdownItem >RED</DropdownItem>
212 |           <DropdownItem >BLUE</DropdownItem>
213 |           <DropdownItem >GREEN</DropdownItem>
214 |           <DropdownItem >YELLOW</DropdownItem>
215 |           <DropdownItem >BLACK</DropdownItem>
216 |           <DropdownItem >WHITE (Default)</DropdownItem>
217 |         </div>
218 |       </CSSTransition>
219 | 
220 |       <CSSTransition
221 |         in={activeMenu === 'FONT STYLE'}
222 |         timeout={500}
223 |         classNames={`menu-e`}
224 |         unmountOnExit
225 |         onEnter={calcHeight}>
226 |         <div className="menu">
227 |           <DropdownItem goToMenu="CC SETTINGS" leftIcon={<ArrowIcon />}>
228 |             <h4>FONT STYLES</h4>
229 |           </DropdownItem>
230 |           <DropdownItem >HELVETICA</DropdownItem>
231 |           <DropdownItem >SANS-SERIF (Default)</DropdownItem>
232 |           <DropdownItem >CURSIVE</DropdownItem>
233 |         </div>
234 |       </CSSTransition>
235 | 
236 |       <CSSTransition
237 |         in={activeMenu === 'BACKGROUND COLOR'}
238 |         timeout={500}
239 |         classNames={`menu-e`}
240 |         unmountOnExit
241 |         onEnter={calcHeight}>
242 |         <div className="menu">
243 |           <DropdownItem goToMenu="CC SETTINGS" leftIcon={<ArrowIcon />}>
244 |             <h4>BACKGROUND COLOR</h4>
245 |           </DropdownItem>
246 |           <DropdownItem >WHITE</DropdownItem>
247 |           <DropdownItem >BLACK (Default)</DropdownItem>
248 |           <DropdownItem >RED</DropdownItem>
249 |           <DropdownItem >GREEN</DropdownItem>
250 |           <DropdownItem >BLUE</DropdownItem>
251 |           <DropdownItem >YELLOW</DropdownItem>
252 |         </div>
253 |       </CSSTransition>
254 | 
255 |       <CSSTransition
256 |         in={activeMenu === 'BACKGROUND OPACITY'}
257 |         timeout={500}
258 |         classNames={`menu-e`}
259 |         unmountOnExit
260 |         onEnter={calcHeight}>
261 |         <div className="menu">
262 |           <DropdownItem goToMenu="CC SETTINGS" leftIcon={<ArrowIcon />}>
263 |             <h4>BACKGROUND OPACITY</h4>
264 |           </DropdownItem>
265 |           <DropdownItem >0</DropdownItem>
266 |           <DropdownItem >25</DropdownItem>
267 |           <DropdownItem >50</DropdownItem>
268 |           <DropdownItem >75 (Default)</DropdownItem>
269 |           <DropdownItem >100</DropdownItem>
270 |         </div>
271 |       </CSSTransition>
272 | 
273 |     </div>
274 |   );
275 | }
276 | 
277 | export default App;
278 | 


--------------------------------------------------------------------------------
/src/Hooks/useOnClickOutside.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react';
 2 | 
 3 | export function useOnClickOutside(ref, handler) {
 4 |     useEffect(
 5 |       () => {
 6 |         const listener = event => {
 7 |           // Do nothing if clicking ref's element or descendent elements
 8 |           if (!ref.current || ref.current.contains(event.target)) {
 9 |             return;
10 |           }
11 |   
12 |           handler(event);
13 |         };
14 |   
15 |         document.addEventListener('mousedown', listener);
16 |         document.addEventListener('touchstart', listener);
17 |   
18 |         return () => {
19 |           document.removeEventListener('mousedown', listener);
20 |           document.removeEventListener('touchstart', listener);
21 |         };
22 |       },
23 |       [ref, handler]
24 |     );
25 | }


--------------------------------------------------------------------------------
/src/icons/arrow.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 448 512"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z" class=""></path></svg>


--------------------------------------------------------------------------------
/src/icons/bell.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 28 28"><path d="M7.847 23.488C9.207 23.488 11.443 23.363 14.467 22.806 13.944 24.228 12.581 25.247 10.98 25.247 9.649 25.247 8.483 24.542 7.825 23.488L7.847 23.488ZM24.923 15.73C25.17 17.002 24.278 18.127 22.27 19.076 21.17 19.595 18.724 20.583 14.684 21.369 11.568 21.974 9.285 22.113 7.848 22.113 7.421 22.113 7.068 22.101 6.79 22.085 4.574 21.958 3.324 21.248 3.077 19.976 2.702 18.049 3.295 17.305 4.278 16.073L4.537 15.748C5.2 14.907 5.459 14.081 5.035 11.902 4.086 7.022 6.284 3.687 11.064 2.753 15.846 1.83 19.134 4.096 20.083 8.977 20.506 11.156 21.056 11.824 21.986 12.355L21.986 12.356 22.348 12.561C23.72 13.335 24.548 13.802 24.923 15.73Z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/bolt.svg:
--------------------------------------------------------------------------------
1 | <svg  viewBox="0 0 320 512"><path d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z" class=""></path></svg>


--------------------------------------------------------------------------------
/src/icons/caret.svg:
--------------------------------------------------------------------------------
1 | <svg  viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" class=""></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/chevron.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 256 512"><path d="M24.707 38.101L4.908 57.899c-4.686 4.686-4.686 12.284 0 16.971L185.607 256 4.908 437.13c-4.686 4.686-4.686 12.284 0 16.971L24.707 473.9c4.686 4.686 12.284 4.686 16.971 0l209.414-209.414c4.686-4.686 4.686-12.284 0-16.971L41.678 38.101c-4.687-4.687-12.285-4.687-16.971 0z" class=""></path></svg>


--------------------------------------------------------------------------------
/src/icons/cog.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 512 512"><path d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z" class=""></path></svg>


--------------------------------------------------------------------------------
/src/icons/messenger.svg:
--------------------------------------------------------------------------------
1 | <svg viewBox="0 0 28 28" alt=""><path d="M14 2.042c6.76 0 12 4.952 12 11.64S20.76 25.322 14 25.322a13.091 13.091 0 0 1-3.474-.461.956 .956 0 0 0-.641.047L7.5 25.959a.961.961 0 0 1-1.348-.849l-.065-2.134a.957.957 0 0 0-.322-.684A11.389 11.389 0 0 1 2 13.682C2 6.994 7.24 2.042 14 2.042ZM6.794 17.086a.57.57 0 0 0 .827.758l3.786-2.874a.722.722 0 0 1 .868 0l2.8 2.1a1.8 1.8 0 0 0 2.6-.481l3.525-5.592a.57.57 0 0 0-.827-.758l-3.786 2.874a.722.722 0 0 1-.868 0l-2.8-2.1a1.8 1.8 0 0 0-2.6.481Z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/icons/plus.svg:
--------------------------------------------------------------------------------
1 | <svg aria-hidden="true" viewBox="0 0 448 512"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" class=""></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   background: white;
  4 |   font-family: roboto;
  5 |   -webkit-font-smoothing: antialiased;
  6 |   -moz-osx-font-smoothing: grayscale;
  7 | }
  8 | 
  9 | code {
 10 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
 11 |     monospace;
 12 | }
 13 | 
 14 | :root {
 15 |   --bg:  #rgba(0, 0, 0, 0.85);
 16 |   --bg-accent: #484a4d;
 17 |   --text-color: #dadce1;
 18 |   --nav-size: 60px;
 19 |   --border: 0px solid #474a4d;
 20 |   --border-radius: 2px;
 21 |   --speed: 500ms; 
 22 | }
 23 | 
 24 | ul {
 25 |   list-style: none;
 26 |   margin: 0;
 27 |   padding: 0;
 28 | }
 29 | 
 30 | a {
 31 |   color: var(--text-color);
 32 |   text-decoration: none;;
 33 | }
 34 | 
 35 | /* Top Navigation Bar */
 36 | 
 37 | /* <ul> */
 38 | .navbar-nav {
 39 |   max-width: 100%;
 40 |   height: 100%;
 41 |   display: flex;
 42 |   justify-content: flex-end;
 43 | }
 44 | 
 45 | #root{
 46 |   display: flex;
 47 |   align-items: center;
 48 |   justify-content: center;
 49 | }
 50 | 
 51 | /* <li> */
 52 | .nav-item {
 53 |   width: calc(var(--nav-size) * 0.8);
 54 |   display: flex;
 55 |   align-items: center;
 56 |   justify-content: center;
 57 | }
 58 | 
 59 | /* Icon Button */
 60 | .icon-button {
 61 |   --button-size: calc(var(--nav-size) * 0.5);
 62 |   width: var(--button-size);
 63 |   height: var(--button-size);
 64 |   /* background-color: #484a4d; */
 65 |   /* border-radius: 50%; */
 66 |   padding: 5px;
 67 |   margin: 2px;
 68 |   display: flex;
 69 |   align-items: center;
 70 |   justify-content: center;
 71 |   transition: filter 300ms;
 72 |   bottom: 40px;
 73 |   right: 300px;
 74 | }
 75 | 
 76 | .icon-button.dropdown-button{
 77 |   position: absolute;
 78 |   background-color: #484a4d; 
 79 |   border-radius: 50%;
 80 |   transform: rotate(180deg);
 81 |   transition: all 0.3s ease;
 82 | }
 83 | 
 84 | .icon-button:hover {
 85 |   filter: brightness(1.2);
 86 | }
 87 | 
 88 | .icon-button svg { 
 89 |   fill: var(--text-color);
 90 |   width: 20px;
 91 |   height: 20px;
 92 | }
 93 | 
 94 | .icon-button.dropdown-button.open{
 95 |   transform: rotate(0deg);
 96 | }
 97 | 
 98 | 
 99 | /* Dropdown Menu */
100 | 
101 | .dropdown {
102 |   position: absolute;
103 |   bottom: 50%;
104 |   width: 300px;
105 |   transform: translateX(-45%);
106 |   background-color: rgba(0, 0, 0, 0.85);
107 |   border: var(--border);
108 |   border-radius: var(--border-radius);
109 |   overflow: hidden;
110 |   transition: height var(--speed) ease;
111 |   bottom: 100px;
112 |   right: 160px;
113 |   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
114 | }
115 | 
116 | .menu {
117 |   width: 100%;
118 |   bottom: 0;
119 |   position: absolute;
120 | }
121 | 
122 | .menu-item {
123 |   height: 30px;
124 |   display: flex;
125 |   align-items: center;
126 |   border-radius: var(--border-radius);
127 |   transition: background var(--speed);
128 |   padding: 0.5rem;
129 |   padding-left: 20px;
130 |   padding-right: 20px;
131 | }
132 | 
133 | .menu-item .icon-button {
134 |   margin-right: 0.5rem;
135 | }
136 | 
137 | 
138 | .menu-item .icon-button:hover {
139 |   filter: none;
140 | }
141 | 
142 | .menu-item:hover {
143 |   background-color: rgba(255, 255, 255, 0.1);
144 | }
145 | .menu-item:active {
146 |   background-color: rgba(255, 255, 255, 0.2);
147 | }
148 | 
149 | .icon-right {
150 |   margin-left: auto;
151 |   width: 8px;
152 |   color: white;
153 | }
154 | 
155 | .icon-right svg{
156 |   fill: white;
157 | }
158 | 
159 | .toggleStatus{
160 |   margin: 0 0 0 auto;
161 | }
162 | 
163 | /* CSSTransition classes  */
164 | 
165 | 
166 | .menu-s-enter {
167 |   position: absolute;
168 |   transform: translateX(-110%);
169 | }
170 | .menu-s-enter-active {
171 |   transform: translateX(0%);
172 |   transition: all var(--speed) ease;
173 | }
174 | .menu-s-exit {
175 |   position: absolute;
176 | }
177 | .menu-s-exit-active {
178 |   transform: translateX(-110%);
179 |   transition: all var(--speed) ease;
180 | }
181 | 
182 | .menu-islideRight-enter {
183 |   position: absolute; 
184 |   transform: translateX(-110%);
185 | }
186 | .menu-islideRight-enter-active {
187 |   transform: translateX(0%);
188 |   transition: all var(--speed) ease;
189 | }
190 | .menu-islideRight-exit {
191 |   
192 | }
193 | .menu-islideRight-exit-active {
194 |   transform: translateX(110%);
195 |   transition: all var(--speed) ease;
196 | }
197 | 
198 | .menu-islideLeft-enter {
199 |   transform: translateX(110%);
200 | }
201 | .menu-islideLeft-enter-active {
202 |   transform: translateX(0%);
203 |   transition: all var(--speed) ease;
204 | }
205 | .menu-islideLeft-exit {
206 |   position: absolute;
207 | }
208 | .menu-islideLeft-exit-active {
209 |   transform: translateX(-110%);
210 |   transition: all var(--speed) ease;
211 | }
212 | 
213 | .menu-e-enter {
214 |   transform: translateX(110%);
215 | }
216 | .menu-e-enter-active {
217 |   transform: translateX(0%);
218 |   transition: all var(--speed) ease;
219 | }
220 | .menu-e-exit {
221 | 
222 | }
223 | .menu-e-exit-active {
224 |   transform: translateX(110%);
225 |   transition: all var(--speed) ease;
226 | }


--------------------------------------------------------------------------------
/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 | ReactDOM.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 |   document.getElementById('root')
11 | );
12 | 


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