├── src
    ├── styles
    │   ├── _base.scss
    │   ├── _mixins.scss
    │   ├── style.scss
    │   ├── theme.js
    │   ├── _variables.scss
    │   └── variables.js
    ├── pages
    │   ├── home
    │   │   ├── home-page.styles.scss
    │   │   └── home-page.component.tsx
    │   ├── button
    │   │   ├── button-page.styles.scss
    │   │   └── button-page.component.tsx
    │   └── toggle
    │   │   ├── toggle-page.styles.scss
    │   │   └── toggle-page.component.tsx
    ├── components
    │   ├── button
    │   │   ├── icon-btn.tsx
    │   │   ├── simple-btn.styles.scss
    │   │   └── simple-btn.component.tsx
    │   ├── smiley-toggle
    │   │   ├── smiley-toggle.styles.scss
    │   │   └── smiley-toggle.component.tsx
    │   ├── layouts
    │   │   └── layout.component.tsx
    │   ├── app-bar
    │   │   └── app-bar.tsx
    │   └── side-drawer
    │   │   └── side-drawer.component.tsx
    ├── react-app-env.d.ts
    ├── reportWebVitals.ts
    ├── index.tsx
    ├── App.tsx
    └── assets
    │   └── smiley-toggle
    │       ├── onFace.svg
    │       └── offFace.svg
├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── README.md
├── .gitignore
├── tsconfig.json
└── package.json


/src/styles/_base.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/styles/_mixins.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/pages/home/home-page.styles.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/pages/button/button-page.styles.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/pages/toggle/toggle-page.styles.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/button/icon-btn.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'


--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/src/styles/style.scss:
--------------------------------------------------------------------------------
1 | @import 'variables';
2 | @import 'mixins';
3 | @import 'base';
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshaMurupudi/Kwaii-ui/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshaMurupudi/Kwaii-ui/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/HarshaMurupudi/Kwaii-ui/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/pages/toggle/toggle-page.component.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | 
3 | import SmipleyToggle from '../../components/smiley-toggle/smiley-toggle.component';
4 | 
5 | const smileyPage: React.FC = () => (
6 |   <div><SmipleyToggle /></div>
7 | )
8 | 
9 | export default smileyPage;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## KWAII-UI(Dev)
 2 | 
 3 | This is a place to find **simple** and **cute** **UI components** to kickstart your project
 4 | 
 5 | ### Tech Stack
 6 | 
 7 | * [ReactJS] - 
 8 | * [MaterialUI] -
 9 | 
10 | ### Components
11 | 
12 | 1. Toggle
13 | 
14 | ### Work in Prpgress
15 | 
16 | * [Button] - with micro interations


--------------------------------------------------------------------------------
/src/pages/button/button-page.component.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import SimpleBtn from '../../components/button/simple-btn.component';
 4 | 
 5 | const Button = () => {
 6 |   return (
 7 |     <div>
 8 |       <SimpleBtn classes="btn" onClickHandler={() => null}>Click me</SimpleBtn>
 9 |     </div>
10 |   )
11 | }
12 | 
13 | export default Button;


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


--------------------------------------------------------------------------------
/src/styles/theme.js:
--------------------------------------------------------------------------------
 1 | import { createMuiTheme } from '@material-ui/core/styles';
 2 | import green from '@material-ui/core/colors/green';
 3 | import variables from './variables';
 4 | 
 5 | const theme = createMuiTheme({
 6 |   palette: {
 7 |     primary: {
 8 |       main: variables.colors.blue,
 9 |     },
10 |     secondary: {
11 |       main: variables.colors.orange,
12 |     },
13 |   },
14 | });
15 | 
16 | export default theme;


--------------------------------------------------------------------------------
/src/styles/_variables.scss:
--------------------------------------------------------------------------------
 1 | $lightgreen: #5bd7b9;
 2 | $green: #17a589;
 3 | $darkgreen: #00755c;
 4 | 
 5 | $lightblue: #516171;
 6 | $blue: #273746;
 7 | $darkblue: #00111f;
 8 | 
 9 | $lightorange: #ffc947;
10 | $orange: #ff9800;
11 | $darkorange: #c66900;
12 | 
13 | $black: #000000;
14 | $white: #ffffff;
15 | 
16 | $color-primary: $blue;
17 | $color-secendory: $orange;
18 | $color-text-primary: $white;
19 | $color-text-secondary: $black;
20 | $color-surface: $white;
21 | $color-background: $white;
22 |   


--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
 1 | import { ReportHandler } from 'web-vitals';
 2 | 
 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
 4 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 5 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 6 |       getCLS(onPerfEntry);  
 7 |       getFID(onPerfEntry);
 8 |       getFCP(onPerfEntry);
 9 |       getLCP(onPerfEntry);
10 |       getTTFB(onPerfEntry);
11 |     });
12 |   }
13 | }
14 | 
15 | export default reportWebVitals;
16 | 


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


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import reportWebVitals from './reportWebVitals';
 4 | 
 5 | import { ThemeProvider } from '@material-ui/core/styles';
 6 | 
 7 | import App from './App';
 8 | 
 9 | import theme from './styles/theme';
10 | 
11 | import "./styles/style.scss";
12 | 
13 | 
14 | ReactDOM.render(
15 |   <React.StrictMode>
16 |     <ThemeProvider theme={theme}>
17 |       <App />
18 |     </ThemeProvider>
19 |   </React.StrictMode>,
20 |   document.getElementById('root')
21 | );
22 | 
23 | // If you want to start measuring performance in your app, pass a function
24 | // to log results (for example: reportWebVitals(console.log))
25 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
26 | reportWebVitals();
27 | 


--------------------------------------------------------------------------------
/src/components/button/simple-btn.styles.scss:
--------------------------------------------------------------------------------
 1 | .btn {
 2 |   margin: 50px auto;
 3 |   border-radius: 25px;
 4 |   background-color: #5300e8;
 5 |   box-shadow: 0 2px 4px 0 #888888;
 6 |   display: inline-block;
 7 |   padding: 15px 50px;
 8 |   color: #ffffff;
 9 | }
10 | 
11 | .center {
12 |   text-align: center;
13 | }
14 | 
15 | /* ripple */
16 | .ripple {
17 |   position: relative;
18 |   overflow: hidden;
19 | }
20 | .ripple .rippleContainer {
21 |   position: absolute;
22 |   top: 0;
23 |   right: 0;
24 |   bottom: 0;
25 |   left: 0;
26 | }
27 | .ripple .rippleContainer span {
28 |   transform: scale(0);
29 |   border-radius: 100%;
30 |   position: absolute;
31 |   opacity: 0.75;
32 |   background-color: #ffffff;
33 |   animation: ripple 850ms;
34 | }
35 | 
36 | @keyframes ripple {
37 |   to {
38 |     opacity: 0;
39 |     transform: scale(2);
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/styles/variables.js:
--------------------------------------------------------------------------------
 1 | const lightgreen = '#5bd7b9';
 2 | const green = '#17a589';
 3 | const darkgreen = '#00755c';
 4 | 
 5 | const lightblue = '#516171';
 6 | const blue = '#273746';
 7 | const darkblue = '#00111f';
 8 | 
 9 | const lightorange = '#ffc947';
10 | const orange = '#ff9800';
11 | const darkorange = '#c66900';
12 | 
13 | const black = '#000000';
14 | const white = '#ffffff';
15 | 
16 | // $color - primary: $blue;
17 | // $color - secendory: $orange;
18 | // $color - text - primary: $white;
19 | // $color - text - secondary: $black;
20 | // $color - surface: $white;
21 | // $color - background: $white;
22 | 
23 | 
24 | const varibles = {
25 |   colors: {
26 |     lightBlue: lightblue,
27 |     blue,
28 |     darkBlue: darkblue,
29 |     lightOrange: lightorange,
30 |     orange,
31 |     darkOrange: darkorange
32 |   }
33 | 
34 | }
35 | 
36 | export default varibles;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "kawaii-ui",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@material-ui/core": "^4.11.1",
 7 |     "@material-ui/icons": "^4.9.1",
 8 |     "@testing-library/jest-dom": "^5.11.6",
 9 |     "@testing-library/react": "^11.1.2",
10 |     "@testing-library/user-event": "^12.2.2",
11 |     "@types/jest": "^26.0.15",
12 |     "@types/node": "^12.19.4",
13 |     "@types/react": "^16.9.56",
14 |     "@types/react-dom": "^16.9.9",
15 |     "@types/react-router-dom": "^5.1.6",
16 |     "@types/styled-components": "^5.1.4",
17 |     "framer-motion": "^2.9.5",
18 |     "node-sass": "^4.14.1",
19 |     "react": "^17.0.1",
20 |     "react-dom": "^17.0.1",
21 |     "react-router-dom": "^5.2.0",
22 |     "react-scripts": "4.0.0",
23 |     "styled-components": "^5.2.1",
24 |     "typescript": "^4.0.5",
25 |     "web-vitals": "^0.2.4"
26 |   },
27 |   "scripts": {
28 |     "start": "react-scripts start",
29 |     "build": "react-scripts build",
30 |     "test": "react-scripts test",
31 |     "eject": "react-scripts eject"
32 |   },
33 |   "eslintConfig": {
34 |     "extends": [
35 |       "react-app",
36 |       "react-app/jest"
37 |     ]
38 |   },
39 |   "browserslist": {
40 |     "production": [
41 |       ">0.2%",
42 |       "not dead",
43 |       "not op_mini all"
44 |     ],
45 |     "development": [
46 |       "last 1 chrome version",
47 |       "last 1 firefox version",
48 |       "last 1 safari version"
49 |     ]
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 3 | 
 4 | import NavBar from './components/app-bar/app-bar'
 5 | import Layout from './components/layouts/layout.component';
 6 | import SideDrawer from './components/side-drawer/side-drawer.component';
 7 | 
 8 | import SmileyPage from './pages/toggle/toggle-page.component';
 9 | import HomePage from './pages/home/home-page.component';
10 | import ButtonPage from './pages/button/button-page.component';
11 | 
12 | function App() {
13 |   const [open, setOpen] = React.useState(false);
14 | 
15 |   const handleDrawerClick = (drawerStatus: boolean) => {
16 |     setOpen(drawerStatus);
17 |   };
18 | 
19 |   return (
20 |     <div className="App">
21 |       {/* Header */}
22 |       {/* <SmileyPage /> */}
23 |       <Router>
24 |         <SideDrawer handleDrawerClick={handleDrawerClick} isDrawerOpen={open} />
25 |         <NavBar handleDrawerClick={handleDrawerClick} isDrawerOpen={open} />
26 | 
27 |         <Layout isDrawerOpen={open}>
28 |           <Switch>
29 |             {/* main layout */}
30 |             <Route exact path="/" render={props => <HomePage />} />
31 |             <Route exact path="/toggle" render={props => <SmileyPage />} />
32 |             <Route exact path="/button" render={props => <ButtonPage />} />
33 |           </Switch>
34 |         </Layout>
35 |       </Router>
36 |       {/* Footer */}
37 |     </div>
38 |   );
39 | }
40 | 
41 | export default App;
42 | 


--------------------------------------------------------------------------------
/src/components/smiley-toggle/smiley-toggle.styles.scss:
--------------------------------------------------------------------------------
 1 | .center {
 2 |   margin-left: calc(50% - 75px);
 3 |   margin-top: 50px;
 4 | }
 5 | .toggle-container {
 6 |   position: relative;
 7 |   cursor: pointer;
 8 |   margin: 20px 0;
 9 |   outline: 0;
10 |   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
11 | }
12 | .toggle-gray-bg {
13 |   background: #d4cfd0;
14 |   width: 150px;
15 |   height: 70px;
16 |   margin-top: -70px;
17 |   border-radius: 50px;
18 |   transition: opacity 0.4s;
19 | }
20 | .toggle-gray-bg.fade {
21 |   opacity: 0;
22 | }
23 | .toggle-color-bg {
24 |   background: linear-gradient(to right, #e992ee, #eb92b3);
25 |   width: 150px;
26 |   height: 70px;
27 |   border-radius: 50px;
28 | }
29 | .ball-face {
30 |   position: absolute;
31 |   overflow: hidden;
32 |   left: 7px;
33 |   top: 7px;
34 |   width: 56px;
35 |   height: 56px;
36 |   border-radius: 50%;
37 |   transition: left 0.4s ease-in-out;
38 |   background: linear-gradient(45deg, #c6c6c6 0%, #ffffff 60%);
39 |   box-shadow: -1px 3px 8px 0px rgba(0, 0, 0, 0.2);
40 | }
41 | .ball-face.active {
42 |   left: 87px;
43 | }
44 | .faces-container {
45 |   position: relative;
46 | }
47 | .faces-together {
48 |   position: absolute;
49 |   transition: left 0.4s ease-in-out;
50 |   left: 0;
51 | }
52 | .faces-together.active {
53 |   left: 140px;
54 | }
55 | .happy-face {
56 |   position: absolute;
57 |   top: 18px;
58 |   left: -120px;
59 |   width: 25px;
60 | }
61 | .sleepy-face {
62 |   position: absolute;
63 |   top: 27px;
64 |   left: 10px;
65 |   width: 25px;
66 | }
67 | 


--------------------------------------------------------------------------------
/src/components/smiley-toggle/smiley-toggle.component.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | 
 3 | import onFaceImg from '../../assets/smiley-toggle/onFace.svg'
 4 | import offFaceImg from '../../assets/smiley-toggle/offFace.svg'
 5 | 
 6 | import './smiley-toggle.styles.scss'
 7 | 
 8 | const SmileyToggle: React.FC = () => {
 9 | 
10 |   const [isToggled, setToggled] = useState(false);
11 |   return (
12 |     <div>
13 |       <p>
14 |         <a href="https://levelup.gitconnected.com/smiley-toggle-wotw-a3bf7cc1b5c3" target="blank">Inspiration from</a>
15 |       </p>
16 | 
17 | 
18 |       <div id="widget" className="center">
19 |         <div
20 |           onClick={() => setToggled(!isToggled)}
21 |           className="toggle-container"
22 |           role="checkbox"
23 |           aria-checked={isToggled}
24 |           id="toggleControl">
25 | 
26 |           {/* backgrounds active  */}
27 |           <div className="toggle-color-bg"></div>
28 |           <div className={`toggle-gray-bg ${isToggled ? "fade" : ""}`}></div>
29 |           {/* ball */}
30 |           <div className={`ball-face ${isToggled ? "active" : ""}`}>
31 |             <div className="faces-container">
32 |               <div className={`faces-together ${isToggled ? "active" : ""}`}>
33 |                 {/* Happy face */}
34 |                 <img className="happy-face" src={onFaceImg} alt="" />
35 | 
36 |                 {/* sleepy face svg */}
37 |                 <img className="sleepy-face" src={offFaceImg} alt="" />
38 |               </div>
39 |             </div>
40 |           </div >
41 |         </div>
42 |       </div>
43 |     </div>
44 |   )
45 | }
46 | 
47 | export default SmileyToggle;


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 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 |   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11 |   <!--
12 |       manifest.json provides metadata used when your web app is installed on a
13 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
14 |     -->
15 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
17 |   <!--
18 |       Notice the use of %PUBLIC_URL% in the tags above.
19 |       It will be replaced with the URL of the `public` folder during the build.
20 |       Only files inside the `public` folder can be referenced from the HTML.
21 | 
22 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
23 |       work correctly both with client-side routing and a non-root public URL.
24 |       Learn how to configure a non-root public URL by running `npm run build`.
25 |     -->
26 |   <title>React App</title>
27 | </head>
28 | 
29 | <body>
30 |   <noscript>You need to enable JavaScript to run this app.</noscript>
31 |   <div id="root"></div>
32 |   <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 | </body>
43 | 
44 | </html>


--------------------------------------------------------------------------------
/src/components/layouts/layout.component.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import clsx from 'clsx';
 4 | import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
 5 | 
 6 | interface PropsType {
 7 |   isDrawerOpen: boolean,
 8 |   children: any
 9 | }
10 | 
11 | const drawerWidth = 240;
12 | 
13 | 
14 | const Layout = ({ children, isDrawerOpen }: PropsType) => {
15 | 
16 |   const classes = useStyles();
17 | 
18 |   return (
19 |     <div
20 |       className={clsx(classes.content, {
21 |         [classes.contentShift]: isDrawerOpen,
22 |       })}
23 |     >
24 |       <main className={isDrawerOpen ? classes.shiftTextLeft : classes.shiftTextLeftMini} >{children}</main>
25 |     </div>
26 |   );
27 | }
28 | 
29 | const useStyles = makeStyles((theme: Theme) =>
30 |   createStyles({
31 |     drawerPaper: {
32 |       width: drawerWidth,
33 |     },
34 |     drawerHeader: {
35 |       display: 'flex',
36 |       alignItems: 'center',
37 |       padding: theme.spacing(0, 1),
38 |       // necessary for content to be below app bar
39 |       ...theme.mixins.toolbar,
40 |       justifyContent: 'flex-end',
41 |     },
42 |     content: {
43 |       flexGrow: 1,
44 |       padding: theme.spacing(3),
45 |       transition: theme.transitions.create('margin', {
46 |         easing: theme.transitions.easing.sharp,
47 |         duration: theme.transitions.duration.leavingScreen,
48 |       }),
49 |       marginLeft: -drawerWidth,
50 |     },
51 |     contentShift: {
52 |       transition: theme.transitions.create('margin', {
53 |         easing: theme.transitions.easing.easeOut,
54 |         duration: theme.transitions.duration.enteringScreen,
55 |       }),
56 |       marginLeft: 0,
57 |     },
58 |     shiftTextLeft: {
59 |       // understand close width
60 |       marginLeft: drawerWidth
61 |     },
62 |     shiftTextLeftMini: {
63 |       // open width + mini width
64 |       marginLeft: 240 + 73
65 |     },
66 |   }),
67 | );
68 | 
69 | export default Layout;


--------------------------------------------------------------------------------
/src/assets/smiley-toggle/onFace.svg:
--------------------------------------------------------------------------------
 1 |           <!-- happy face svg -->
 2 |           <svg class="happy-face" viewBox="0 0 59 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |             <g id="Canvas" transform="translate(1337 -940)">
 4 |             <g id="happy face">
 5 |             <g id="Ellipse">
 6 |             <use xlink:href="#path0_fill" transform="translate(-1337 940)" fill="#8A8B8A"/>
 7 |             </g>
 8 |             <g id="Ellipse">
 9 |             <use xlink:href="#path0_fill" transform="translate(-1290 940)" fill="#8A8B8A"/>
10 |             </g>
11 |             <g id="Rectangle" filter="url(#filter0_i)">
12 |             <use xlink:href="#path1_fill" transform="translate(-1337 971)" fill="#C4C4C4"/>
13 |             </g>
14 |             </g>
15 |             </g>
16 |             <defs>
17 |             <filter id="filter0_i" filterUnits="userSpaceOnUse" x="-1337" y="971" width="63" height="24" color-interpolation-filters="sRGB">
18 |             <feFlood flood-opacity="0" result="BackgroundImageFix"/>
19 |             <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
20 |             <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0" result="hardAlpha"/>
21 |             <feOffset dx="4" dy="4"/>
22 |             <feGaussianBlur stdDeviation="6"/>
23 |             <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
24 |             <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
25 |             <feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
26 |             </filter>
27 |             <path id="path0_fill" d="M 12 6C 12 9.31371 9.31371 12 6 12C 2.68629 12 0 9.31371 0 6C 0 2.68629 2.68629 0 6 0C 9.31371 0 12 2.68629 12 6Z"/>
28 |             <path id="path1_fill" d="M 0 2.22222C 0 0.994923 0.994923 0 2.22222 0L 56.7778 0C 58.0051 0 59 0.994923 59 2.22222L 59 2.22222C 59 12.0406 51.0406 20 41.2222 20L 17.7778 20C 7.95938 20 0 12.0406 0 2.22222L 0 2.22222Z"/>
29 |             </defs>
30 |           </svg>
31 | 


--------------------------------------------------------------------------------
/src/pages/home/home-page.component.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import clsx from 'clsx';
 3 | import {
 4 |   Typography,
 5 |   Button,
 6 |   Container
 7 | } from '@material-ui/core';
 8 | import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/styles';
 9 | 
10 | 
11 | 
12 | const drawerWidth = 240;
13 | 
14 | const HomePage = () => {
15 | 
16 |   const classes = useStyles();
17 | 
18 |   return (
19 |     <>
20 |       <div className={classes.drawerHeader} />
21 |       <Container maxWidth="sm">
22 |         <h1> Kawaii UI</h1>
23 |         <p>Simple and Cute UI components for the web</p>
24 |         <div>
25 |           <Button variant="outlined" color="primary">
26 |             Get Started
27 |           </Button>
28 |           <Button variant="outlined" color="primary">
29 |             Latest
30 |           </Button>
31 |         </div>
32 |       </Container>
33 |     </>
34 | 
35 |   )
36 | }
37 | 
38 | const useStyles = makeStyles((theme: Theme) =>
39 |   createStyles({
40 |     drawerPaper: {
41 |       width: drawerWidth,
42 |     },
43 |     drawerHeader: {
44 |       display: 'flex',
45 |       alignItems: 'center',
46 |       padding: theme.spacing(0, 1),
47 |       // necessary for content to be below app bar
48 |       ...theme.mixins.toolbar,
49 |       justifyContent: 'flex-end',
50 |     },
51 |     content: {
52 |       flexGrow: 1,
53 |       padding: theme.spacing(3),
54 |       transition: theme.transitions.create('margin', {
55 |         easing: theme.transitions.easing.sharp,
56 |         duration: theme.transitions.duration.leavingScreen,
57 |       }),
58 |       marginLeft: -drawerWidth,
59 |     },
60 |     contentShift: {
61 |       transition: theme.transitions.create('margin', {
62 |         easing: theme.transitions.easing.easeOut,
63 |         duration: theme.transitions.duration.enteringScreen,
64 |       }),
65 |       marginLeft: 0,
66 |     },
67 |     shiftTextLeft: {
68 |       // understand close width
69 |       marginLeft: drawerWidth
70 |     },
71 |     shiftTextLeftMini: {
72 |       // open width + mini width
73 |       marginLeft: 240 + 73
74 |     },
75 |   }),
76 | );
77 | 
78 | export default HomePage;


--------------------------------------------------------------------------------
/src/components/app-bar/app-bar.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { withRouter, RouteComponentProps } from 'react-router-dom';
 3 | 
 4 | import {
 5 |   AppBar,
 6 |   Toolbar,
 7 |   IconButton,
 8 |   Button
 9 | } from '@material-ui/core';
10 | import clsx from 'clsx';
11 | import { makeStyles } from '@material-ui/core/styles';
12 | 
13 | import MenuIcon from '@material-ui/icons/Menu';
14 | 
15 | const drawerWidth = 240;
16 | 
17 | interface PropsType extends RouteComponentProps<any> {
18 |   handleDrawerClick: (clickState: boolean) => void,
19 |   isDrawerOpen: boolean
20 | }
21 | 
22 | const useStyles = makeStyles((theme) => ({
23 |   appBar: {
24 |     zIndex: theme.zIndex.drawer + 1,
25 |     transition: theme.transitions.create(['width', 'margin'], {
26 |       easing: theme.transitions.easing.sharp,
27 |       duration: theme.transitions.duration.leavingScreen,
28 |     }),
29 |   },
30 |   appBarShift: {
31 |     marginLeft: drawerWidth,
32 |     width: `calc(100% - ${drawerWidth}px)`,
33 |     transition: theme.transitions.create(['width', 'margin'], {
34 |       easing: theme.transitions.easing.sharp,
35 |       duration: theme.transitions.duration.enteringScreen,
36 |     }),
37 |   },
38 |   menuButton: {
39 |     marginRight: 36,
40 |   },
41 |   hide: {
42 |     display: 'none',
43 |   },
44 |   content: {
45 |     flexGrow: 1,
46 |     backgroundColor: theme.palette.background.default,
47 |     padding: theme.spacing(3),
48 |   },
49 |   margin: {
50 |     margin: theme.spacing(1),
51 |   },
52 | 
53 |   root: {
54 |     color: 'white',
55 | 
56 |   },
57 | 
58 | }));
59 | 
60 | function NavBar({ handleDrawerClick, isDrawerOpen, history }: PropsType) {
61 |   const classes = useStyles();
62 |   const handleDrawerOpen = (): void => {
63 |     handleDrawerClick(true)
64 |   };
65 | 
66 |   return (
67 |     <AppBar position="fixed" className={clsx(classes.appBar, {
68 |       [classes.appBarShift]: isDrawerOpen,
69 |     })}>
70 |       <Toolbar>
71 |         <IconButton
72 |           color="inherit"
73 |           aria-label="open drawer"
74 |           onClick={handleDrawerOpen}
75 |           edge="start"
76 |           className={clsx(classes.menuButton, {
77 |             [classes.hide]: isDrawerOpen,
78 |           })}
79 |         >
80 |           <MenuIcon />
81 |         </IconButton>
82 |         <Button size="large" className={classes.root} onClick={() => history.push('/')}>
83 |           Kawaii UI
84 |         </Button>
85 |       </Toolbar>
86 |     </AppBar>
87 |   )
88 | }
89 | 
90 | export default withRouter(NavBar);


--------------------------------------------------------------------------------
/src/components/button/simple-btn.component.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | 
  3 | import './simple-btn.styles.scss'
  4 | 
  5 | interface PropType {
  6 |   children: any,
  7 |   classes: any,
  8 |   onClickHandler: (event: any) => null,
  9 | }
 10 | 
 11 | interface SpanStyles {
 12 |   [key: string]: any
 13 | }
 14 | 
 15 | 
 16 | interface StateType {
 17 |   spanStyles: SpanStyles,
 18 |   count: number
 19 | }
 20 | 
 21 | class SimpleBtn extends React.Component<PropType, StateType> {
 22 |   constructor(props: PropType) {
 23 |     super(props);
 24 | 
 25 |     this.state = this.initializeState();
 26 |   }
 27 | 
 28 |   initializeState = () => {
 29 |     return {
 30 |       spanStyles: {},
 31 |       count: 0
 32 |     }
 33 |   }
 34 | 
 35 |   cleanUp = () => {
 36 |     const initialState = this.initializeState();
 37 |     this.setState({ ...initialState });
 38 |   }
 39 | 
 40 |   showRipple = (e: any) => {
 41 |     console.log("Hit")
 42 |     const rippleContainer = e.currentTarget;
 43 |     const size = rippleContainer.offsetWidth;
 44 |     const pos = rippleContainer.getBoundingClientRect();
 45 |     const x = e.pageX - pos.x - (size / 2);
 46 |     const y = e.pageY - pos.y - (size / 2);
 47 | 
 48 |     const spanStyles = { top: y + 'px', left: x + 'px', height: size + 'px', width: size + 'px' };
 49 |     const count = this.state.count + 1;
 50 |     this.setState({
 51 |       spanStyles: { ...this.state.spanStyles, [count]: spanStyles },
 52 |       count: count
 53 |     });
 54 |   }
 55 | 
 56 |   // TODO: Use debouce to ristric clicks
 57 |   /* Debounce Code to call the Ripple removing function */
 58 |   callCleanUp = (cleanup: any, delay: any) => {
 59 |     // return function () { }
 60 |   }
 61 | 
 62 |   handleEvent = (event: any) => {
 63 |     console.log(event)
 64 |     // if (event.type === "mousedown") {
 65 |     //   this.setState({ message: "Mouse Down" });
 66 |     // } else {
 67 |     //   this.setState({ message: "Mouse Up" });
 68 |     // }
 69 |   }
 70 | 
 71 |   renderRippleSpan = () => {
 72 |     // return <div></div>
 73 |     const { spanStyles = {} } = this.state;
 74 |     const spanArray = Object.keys(spanStyles);
 75 |     // const testObj: { [key: string]: any } = {}
 76 |     if (spanArray && spanArray.length > 0) {
 77 |       console.log("click recieved by render ripple")
 78 |       return (
 79 |         spanArray.map((key, index) => {
 80 | 
 81 |           // console.log(testObj[key])
 82 |           return <span key={'spanCount_' + index} className="" style={{ ...spanStyles[key] }}></span>
 83 |         })
 84 |       )
 85 |     } else {
 86 |       console.log("empty")
 87 | 
 88 |       return null;
 89 |     }
 90 |   }
 91 | 
 92 | 
 93 |   render() {
 94 |     const { children = null, classes = "", onClickHandler } = this.props;
 95 |     return (
 96 |       <div>
 97 |         <div ref="targetElement" className={'ripple ' + classes} onClick={onClickHandler}>
 98 |           {children}
 99 |           <div className="rippleContainer" onMouseDown={this.showRipple}>
100 |             {this.renderRippleSpan()}
101 | 
102 |           </div>
103 |         </div>
104 |         {/* <button className="btn btn-secondary" onMouseDown={this.handleEvent} onMouseUp={this.handleEvent} >
105 |             Change Image
106 |           </button> */}
107 |       </div>
108 |     );
109 |   }
110 | }
111 | 
112 | export default SimpleBtn;


--------------------------------------------------------------------------------
/src/assets/smiley-toggle/offFace.svg:
--------------------------------------------------------------------------------
 1 |           <!-- sleepy face svg -->
 2 |           <svg class="sleepy-face" viewBox="0 0 51 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |             <g id="Canvas" transform="translate(1177 -946)">
 4 |             <g id="sleepy face">
 5 |             <g id="Vector">
 6 |             <use xlink:href="#sleepy_path0_fill" transform="translate(-1176.44 946.786)" fill="#8A8B8A"/>
 7 |             <use xlink:href="#sleepy_path1_stroke" transform="translate(-1176.44 946.786)" fill="#8A8B8A"/>
 8 |             </g>
 9 |             <g id="Vector">
10 |             <use xlink:href="#sleepy_path0_fill" transform="translate(-1142 947)" fill="#8A8B8A"/>
11 |             <use xlink:href="#sleepy_path1_stroke" transform="translate(-1142 947)" fill="#8A8B8A"/>
12 |             </g>
13 |             <g id="Vector 2">
14 |             <use xlink:href="#sleepy_path2_fill" transform="translate(-1159.55 969.5)" fill="#8A8B8A"/>
15 |             <use xlink:href="#sleepy_path3_stroke" transform="translate(-1159.55 969.5)" fill="#8A8B8A"/>
16 |             </g>
17 |             </g>
18 |             </g>
19 |             <defs>
20 |             <path id="sleepy_path0_fill" d="M 12.4433 4.71365C 6.94326 8.71367 2.27664 4.88032 0.443304 2.71365C -0.556641 0.713687 -0.0566955 -0.486341 3.9433 0.713687C 8.9433 2.21372 9.94334 1.21371 12.4433 0.213711C 14.9433 -0.786289 16.3213 1.8933 12.4433 4.71365Z"/>
21 |             <path id="sleepy_path1_stroke" d="M 0.443304 2.71365L -0.00391265 2.93725L 0.0228929 2.99086L 0.0616111 3.03662L 0.443304 2.71365ZM 12.4433 4.71365L 12.7374 5.11802L 12.4433 4.71365ZM 12.4433 0.213711L 12.2576 -0.250526L 12.2576 -0.250526L 12.4433 0.213711ZM 3.9433 0.713687L 4.08698 0.234775L 4.08698 0.234775L 3.9433 0.713687ZM 0.0616111 3.03662C 1.00963 4.157 2.70413 5.72844 4.90311 6.49809C 7.13392 7.27888 9.84841 7.21909 12.7374 5.11802L 12.1492 4.30928C 9.53816 6.20824 7.16932 6.23178 5.23347 5.55423C 3.26579 4.86554 1.71032 3.43697 0.824997 2.39068L 0.0616111 3.03662ZM 12.7374 5.11802C 13.746 4.38451 14.4399 3.64099 14.8603 2.93621C 15.2786 2.23493 15.4422 1.54173 15.3261 0.9368C 15.2065 0.313937 14.7988 -0.156382 14.216 -0.370882C 13.6493 -0.579506 12.9629 -0.532653 12.2576 -0.250526L 12.629 0.677949C 13.1737 0.460076 13.5971 0.466877 13.8706 0.567562C 14.1282 0.66237 14.2913 0.85072 14.344 1.1253C 14.4001 1.41781 14.3374 1.86082 14.0015 2.42394C 13.6677 2.98356 13.0796 3.63262 12.1492 4.30928L 12.7374 5.11802ZM 12.2576 -0.250526C 10.9348 0.278589 10.1663 0.731519 9.05284 0.907332C 7.97127 1.0781 6.55427 0.974979 4.08698 0.234775L 3.79963 1.1926C 6.33234 1.95243 7.91536 2.09932 9.2088 1.89509C 10.4703 1.69591 11.4518 1.14883 12.629 0.677949L 12.2576 -0.250526ZM 4.08698 0.234775C 3.06772 -0.0710107 2.24174 -0.233411 1.58935 -0.260882C 0.949793 -0.287813 0.395764 -0.188595 0.00597538 0.12324C -0.414433 0.45957 -0.532592 0.948393 -0.492446 1.43019C -0.453489 1.8977 -0.265425 2.41421 -0.00391265 2.93725L 0.890521 2.49005C 0.652061 2.01311 0.527639 1.62963 0.504101 1.34715C 0.481752 1.07895 0.55109 0.967773 0.630675 0.904105C 0.740879 0.815941 0.99934 0.715159 1.54728 0.738232C 2.08237 0.760764 2.81889 0.898371 3.79963 1.1926L 4.08698 0.234775Z"/>
22 |             <path id="sleepy_path2_fill" d="M 0.552112 2.99999C -1.34367 0.156396 2.05212 0 4.55208 0C 4.71876 0.166652 5.55212 1.47633e-05 8.55212 0C 12.0877 -1.73987e-05 10.5521 3.5 8.55212 4.49996C 6.55212 5.49991 2.55216 5.99997 0.552112 2.99999Z"/>
23 |             <path id="sleepy_path3_stroke" d="M 4.55208 0L 4.9056 -0.353584L 4.75916 -0.5L 4.55208 -0.5L 4.55208 0ZM 0.552112 2.99999L 0.968133 2.72263L 0.968133 2.72263L 0.552112 2.99999ZM 8.55212 0L 8.55212 -0.5L 8.55212 0ZM 4.55208 -0.5C 3.92436 -0.5 3.22426 -0.490334 2.55987 -0.429016C 1.90232 -0.36833 1.24138 -0.254105 0.707429 -0.0262233C 0.17342 0.201682 -0.322538 0.585085 -0.462649 1.22459C -0.597099 1.83826 -0.364431 2.52658 0.136091 3.27734L 0.968133 2.72263C 0.520763 2.05159 0.466986 1.65402 0.514182 1.43861C 0.555717 1.24903 0.709495 1.06016 1.09996 0.893516C 1.49047 0.726851 2.02874 0.624253 2.65177 0.566752C 3.26796 0.509883 3.92982 0.5 4.55208 0.5L 4.55208 -0.5ZM 0.136091 3.27734C 1.24066 4.93415 2.89847 5.61389 4.51062 5.74822C 6.10978 5.88147 7.70098 5.48452 8.77572 4.94717L 8.32852 4.05274C 7.40327 4.51535 5.99449 4.8684 4.59366 4.75168C 3.20581 4.63603 1.86361 4.06581 0.968133 2.72263L 0.136091 3.27734ZM 8.77572 4.94717C 9.35226 4.65892 9.87822 4.20083 10.2855 3.68475C 10.6916 3.17031 11.0043 2.56697 11.119 1.96924C 11.2344 1.36812 11.1551 0.717421 10.6898 0.220683C 10.2346 -0.265349 9.505 -0.500005 8.55212 -0.5L 8.55212 0.5C 9.36701 0.499996 9.7713 0.702836 9.96 0.904301C 10.1387 1.09506 10.2135 1.38186 10.1369 1.78074C 10.0597 2.183 9.83447 2.64215 9.50057 3.06521C 9.16797 3.48662 8.75198 3.84102 8.32852 4.05274L 8.77572 4.94717ZM 8.55212 -0.5C 7.04205 -0.499993 6.07507 -0.457981 5.47238 -0.437203C 5.16449 -0.426588 4.97421 -0.422558 4.85181 -0.429C 4.79098 -0.432202 4.77063 -0.437078 4.77252 -0.436596C 4.7726 -0.436574 4.83796 -0.421216 4.9056 -0.353584L 4.19856 0.353584C 4.30787 0.462879 4.43573 0.509484 4.52501 0.532292C 4.6161 0.555559 4.71163 0.565006 4.79925 0.569617C 4.97373 0.578801 5.21055 0.572418 5.50683 0.562203C 6.1125 0.541322 7.06219 0.500007 8.55212 0.5L 8.55212 -0.5Z"/>
24 |             </defs>
25 |             </svg>  


--------------------------------------------------------------------------------
/src/components/side-drawer/side-drawer.component.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { withRouter, RouteComponentProps } from 'react-router-dom';
  3 | 
  4 | import clsx from 'clsx';
  5 | import { makeStyles, useTheme } from '@material-ui/core/styles';
  6 | import {
  7 |   Drawer as MUIDrawer,
  8 |   CssBaseline,
  9 |   List,
 10 |   ListItem,
 11 |   ListItemText,
 12 |   ListItemIcon,
 13 |   Divider,
 14 |   IconButton,
 15 |   Collapse,
 16 | } from '@material-ui/core';
 17 | 
 18 | import WbIridescentIcon from '@material-ui/icons/WbIridescent';
 19 | import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 20 | import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 21 | import ExpandLess from '@material-ui/icons/ExpandLess'
 22 | import ExpandMore from '@material-ui/icons/ExpandMore'
 23 | import ToggleOnIcon from '@material-ui/icons/ToggleOn';
 24 | import BrandingWatermarkIcon from '@material-ui/icons/BrandingWatermark';
 25 | import CallToActionIcon from '@material-ui/icons/CallToAction';
 26 | import TouchAppIcon from '@material-ui/icons/TouchApp';
 27 | import WavesIcon from '@material-ui/icons/Waves';
 28 | import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 29 | import LayersIcon from '@material-ui/icons/Layers';
 30 | import NoteIcon from '@material-ui/icons/Note';
 31 | import SubtitlesIcon from '@material-ui/icons/Subtitles';
 32 | import TimerIcon from '@material-ui/icons/Timer';
 33 | import CallMissedIcon from '@material-ui/icons/CallMissed';
 34 | import WidgetsIcon from '@material-ui/icons/Widgets';
 35 | 
 36 | const drawerWidth = 240;
 37 | 
 38 | interface PropsType extends RouteComponentProps<any> {
 39 |   handleDrawerClick: (clickState: boolean) => void,
 40 |   isDrawerOpen: boolean
 41 | }
 42 | 
 43 | const useStyles = makeStyles((theme) => ({
 44 |   root: {
 45 |     display: 'flex',
 46 |   },
 47 |   nested: {
 48 |     paddingLeft: theme.spacing(4),
 49 |   },
 50 |   hide: {
 51 |     display: 'none',
 52 |   },
 53 |   drawer: {
 54 |     width: drawerWidth,
 55 |     flexShrink: 0,
 56 |     whiteSpace: 'nowrap',
 57 |   },
 58 |   drawerOpen: {
 59 |     width: drawerWidth,
 60 |     transition: theme.transitions.create('width', {
 61 |       easing: theme.transitions.easing.sharp,
 62 |       duration: theme.transitions.duration.enteringScreen,
 63 |     }),
 64 |   },
 65 |   drawerClose: {
 66 |     transition: theme.transitions.create('width', {
 67 |       easing: theme.transitions.easing.sharp,
 68 |       duration: theme.transitions.duration.leavingScreen,
 69 |     }),
 70 |     overflowX: 'hidden',
 71 |     width: theme.spacing(7) + 1,
 72 |     [theme.breakpoints.up('sm')]: {
 73 |       width: theme.spacing(9) + 1,
 74 |     },
 75 |   },
 76 |   toolbar: {
 77 |     display: 'flex',
 78 |     alignItems: 'center',
 79 |     justifyContent: 'flex-end',
 80 |     padding: theme.spacing(0, 1),
 81 |     // necessary for content to be below app bar
 82 |     ...theme.mixins.toolbar,
 83 |   },
 84 |   content: {
 85 |     flexGrow: 1,
 86 |     backgroundColor: theme.palette.background.default,
 87 |     padding: theme.spacing(3),
 88 |   },
 89 | }));
 90 | 
 91 | function Drawer({ handleDrawerClick, isDrawerOpen, history }: PropsType) {
 92 |   const menuList = {
 93 |     components: {
 94 |       name: "Components",
 95 |       Icon: BrandingWatermarkIcon,
 96 |       subMenu: [
 97 |         { name: "Toggle", path: '/toggle', Icon: ToggleOnIcon },
 98 |         { name: "Button", path: '/button', Icon: CallToActionIcon },
 99 |         { name: "Card", path: '/card', Icon: SubtitlesIcon },
100 |       ]
101 |     },
102 |     effects: {
103 |       name: "Effects",
104 |       Icon: WbIridescentIcon,
105 |       subMenu: [
106 |         { name: "Shadow", path: '/shadow', Icon: LayersIcon },
107 |         { name: "Ripple", path: '/ripple', Icon: TouchAppIcon },
108 |         { name: "Defer Loading", path: '/ripple', Icon: CallMissedIcon },
109 |         { name: "Lazy Loading", path: '/ripple', Icon: TimerIcon },
110 |       ]
111 |     },
112 |     material: {
113 |       name: 'Material',
114 |       Icon: WidgetsIcon,
115 |       subMenu: [
116 |         { name: 'Paper', path: '/material/paper', Icon: NoteIcon },
117 |         { name: 'Glass', path: '/material/glass', Icon: CheckBoxOutlineBlankIcon },
118 |       ]
119 |     }
120 |   };
121 | 
122 |   const classes = useStyles();
123 |   const theme = useTheme();
124 |   const [sideMenuItemOpen, setSideMenuItemOpen] = React.useState(true);
125 | 
126 |   const handleClick = () => {
127 |     setSideMenuItemOpen(!sideMenuItemOpen);
128 |   };
129 |   const handleDrawerClose = () => {
130 |     handleDrawerClick(false);
131 |   };
132 | 
133 |   return (
134 |     <div className={classes.root}>
135 |       <CssBaseline />
136 | 
137 |       <MUIDrawer
138 |         variant="permanent"
139 |         className={clsx(classes.drawer, {
140 |           [classes.drawerOpen]: isDrawerOpen,
141 |           [classes.drawerClose]: !isDrawerOpen,
142 |         })}
143 |         classes={{
144 |           paper: clsx({
145 |             [classes.drawerOpen]: isDrawerOpen,
146 |             [classes.drawerClose]: !isDrawerOpen,
147 |           }),
148 |         }}
149 |       >
150 |         <div className={classes.toolbar}>
151 |           <IconButton onClick={handleDrawerClose}>
152 |             {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
153 |           </IconButton>
154 |         </div>
155 |         <Divider />
156 |         <List>
157 |           {Object.values(menuList).map((menu, index) => (
158 |             <div key={index}>
159 |               <ListItem button onClick={handleClick}>
160 |                 <ListItemIcon><menu.Icon /></ListItemIcon>
161 |                 <ListItemText primary={menu.name} />
162 |                 {sideMenuItemOpen ? <ExpandLess /> : <ExpandMore />}
163 |               </ListItem>
164 |               <Collapse in={sideMenuItemOpen} timeout="auto" unmountOnExit>
165 |                 <List component="div" disablePadding>
166 |                   {menu.subMenu.map((subMenuItem, index) => (
167 |                     <ListItem button className={classes.nested} onClick={() => history.push(`${subMenuItem.path}`)} >
168 |                       <ListItemIcon>
169 |                         <subMenuItem.Icon />
170 |                       </ListItemIcon>
171 |                       <ListItemText primary={`${subMenuItem.name}`} />
172 |                     </ListItem>
173 |                   ))}
174 |                 </List>
175 |               </Collapse>
176 |             </div>
177 | 
178 |           ))}
179 |         </List>
180 | 
181 |       </MUIDrawer>
182 |       <main className={classes.content}>
183 |         <div className={classes.toolbar} />
184 | 
185 |       </main>
186 |     </div>
187 |   );
188 | }
189 | 
190 | export default withRouter(Drawer);


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