From 0e6506ea3303ca30bc21ba2bcf3717a3f009dc8c Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Mon, 25 May 2020 11:45:29 +0200
Subject: [PATCH] fix: fix accordion, delete aside

---
 src/containers/TheAside.js            | 242 --------------------------
 src/containers/TheHeader.js           |  13 +-
 src/store.js                          |   3 +-
 src/views/Base/Collapses/Collapses.js |  48 ++---
 4 files changed, 24 insertions(+), 282 deletions(-)
 delete mode 100644 src/containers/TheAside.js

diff --git a/src/containers/TheAside.js b/src/containers/TheAside.js
deleted file mode 100644
index f8b7099..0000000
--- a/src/containers/TheAside.js
+++ /dev/null
@@ -1,242 +0,0 @@
-import React from 'react'
-import { useSelector, useDispatch } from 'react-redux'
-import {
-  CNav,
-  CNavItem,
-  CNavLink,
-  CTabs,
-  CTabContent,
-  CTabPane,
-  CListGroup,
-  CListGroupItem,
-  CSwitch,
-  CProgress,
-  CSidebar,
-  CImg,
-  CSidebarClose
-} from '@coreui/react'
-import { CIcon } from '@coreui/icons-react'
-
-const TheAside = () => {
-  const show = useSelector(state => state.asideShow)
-  const dispatch = useDispatch()
-  const setState = (state) => dispatch({type: 'set', asideShow: state})
-  
-  return (
-    <CSidebar
-      aside
-      colorScheme='light'
-      size='lg'
-      overlaid
-      show={show}
-      onShowChange={(state) => setState(state)}
-    >
-      <CSidebarClose onClick={() => setState(false) } />
-      <CTabs>
-        <CNav variant='tabs' className='nav-underline nav-underline-primary'>
-          <CNavItem>
-            <CNavLink>
-              <CIcon name="cil-list" alt="CoreUI Icons List" />
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink>
-              <CIcon name="cil-speech" alt="CoreUI Icons Speech" />
-              </CNavLink>
-            </CNavItem>
-          <CNavItem>
-            <CNavLink>
-              <CIcon name="cil-settings" alt="CoreUI Icons Settings" />
-            </CNavLink>
-          </CNavItem>
-        </CNav>
-
-        <CTabContent>
-
-          <CTabPane>
-            <CListGroup variant="accent">
-              <CListGroupItem color="secondary" className="bg-light text-center font-weight-bold text-muted text-uppercase small">Today</CListGroupItem>
-              <CListGroupItem accent="warning" href="#" className="list-group-item-divider">
-                <div className="c-avatar float-right">
-                  <CImg
-                    className="c-avatar-img"
-                    src="avatars/7.jpg"
-                    alt="admin@bootstrapmaster.com"
-                  />
-                </div>
-                <div>Meeting with <strong>Lucas</strong></div>
-                <small className="text-muted mr-3"><CIcon name="cil-calendar" /> 1 - 3pm</small>
-                <small className="text-muted"><CIcon name="cil-location-pin" /> Palo Alto, CA</small>
-              </CListGroupItem>
-              <CListGroupItem accent="info" href="#">
-                <div className="c-avatar float-right">
-                  <CImg
-                    className="c-avatar-img"
-                    src="avatars/4.jpg"
-                    alt="admin@bootstrapmaster.com"
-                  />
-                </div>
-                <div>Skype with <strong>Megan</strong></div>
-                <small className="text-muted mr-3"><CIcon name="cil-calendar" />  4 - 5pm</small>
-                <small className="text-muted"><CIcon name="cib-skype" />  On-line</small>
-              </CListGroupItem>
-              <hr className="transparent mx-3 my-0" />
-              <CListGroupItem color="secondary" className="bg-light text-center font-weight-bold text-muted text-uppercase small">Tomorrow</CListGroupItem>
-              <CListGroupItem accent="danger" href="#" className="list-group-item-divider">
-                <div>New UI Project - <strong>deadline</strong></div>
-                <small className="text-muted mr-3"><CIcon name="cil-calendar" /> 10 - 11pm</small>
-                <small className="text-muted"><CIcon name="cil-home" /> creativeLabs HQ</small>
-                <div className="c-avatars-stack mt-2">
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/2.jpg" alt="admin@bootstrapmaster.com" /></div>
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/3.jpg" alt="admin@bootstrapmaster.com" /></div>
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/4.jpg" alt="admin@bootstrapmaster.com" /></div>
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/5.jpg" alt="admin@bootstrapmaster.com" /></div>
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/6.jpg" alt="admin@bootstrapmaster.com" /></div>
-                </div>
-              </CListGroupItem>
-              <CListGroupItem accent="success" href="#" className="c-list-group-item-divider">
-                <div><strong>#10 Startups.Garden</strong> Meetup</div>
-                <small className="text-muted mr-3"><CIcon name="cil-calendar" /> 1 - 3pm</small>
-                <small className="text-muted"><CIcon name="cil-location-pin" /> Palo Alto, CA</small>
-              </CListGroupItem>
-              <CListGroupItem accent="primary" href="#" className="c-list-group-item-divider">
-                <div><strong>Team meeting</strong></div>
-                <small className="text-muted mr-3"><CIcon name="cil-calendar" /> 4 - 6pm</small>
-                <small className="text-muted"><CIcon name="cil-home" /> creativeLabs HQ</small>
-                <div className="c-avatars-stack mt-2">
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/2.jpg" alt="admin@bootstrapmaster.com" /></div>
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/3.jpg" alt="admin@bootstrapmaster.com" /></div>
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/4.jpg" alt="admin@bootstrapmaster.com" /></div>
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/5.jpg" alt="admin@bootstrapmaster.com" /></div>
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/6.jpg" alt="admin@bootstrapmaster.com" /></div>
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" /></div>
-                  <div className="c-avatar c-avatar-xs"><CImg className="c-avatar-img" src="avatars/8.jpg" alt="admin@bootstrapmaster.com" /></div>
-                </div>
-              </CListGroupItem>
-            </CListGroup>
-          </CTabPane>
-
-          <CTabPane className="p-3">
-            <div className="message">
-              <div className="py-3 pb-5 mr-3 float-left">
-                <div className="c-avatar">
-                  <CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" />
-                  <span className="c-avatar-status bg-success"></span>
-                </div>
-              </div>
-              <div>
-                <small className="text-muted">Lukasz Holeczek</small>
-                <small className="text-muted float-right mt-1">1:52 PM</small>
-              </div>
-              <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-              <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-            </div>
-            <hr />
-            <div className="message">
-              <div className="py-3 pb-5 mr-3 float-left">
-                <div className="c-avatar">
-                  <CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" />
-                  <span className="c-avatar-status bg-success"></span>
-                </div>
-              </div>
-              <div>
-                <small className="text-muted">Lukasz Holeczek</small>
-                <small className="text-muted float-right mt-1">1:52 PM</small>
-              </div>
-              <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-              <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-            </div>
-            <hr />
-            <div className="message">
-              <div className="py-3 pb-5 mr-3 float-left">
-                <div className="c-avatar">
-                  <CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" />
-                  <span className="c-avatar-status bg-success"></span>
-                </div>
-              </div>
-              <div>
-                <small className="text-muted">Lukasz Holeczek</small>
-                <small className="text-muted float-right mt-1">1:52 PM</small>
-              </div>
-              <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-              <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-            </div>
-            <hr />
-            <div className="message">
-              <div className="py-3 pb-5 mr-3 float-left">
-                <div className="c-avatar">
-                  <CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" />
-                  <span className="c-avatar-status bg-success"></span>
-                </div>
-              </div>
-              <div>
-                <small className="text-muted">Lukasz Holeczek</small>
-                <small className="text-muted float-right mt-1">1:52 PM</small>
-              </div>
-              <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-              <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-            </div>
-            <hr />
-            <div className="message">
-              <div className="py-3 pb-5 mr-3 float-left">
-                <div className="c-avatar">
-                  <CImg className="c-avatar-img" src="avatars/7.jpg" alt="admin@bootstrapmaster.com" />
-                  <span className="c-avatar-status bg-success"></span>
-                </div>
-              </div>
-              <div>
-                <small className="text-muted">Lukasz Holeczek</small>
-                <small className="text-muted float-right mt-1">1:52 PM</small>
-              </div>
-              <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-              <small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
-            </div>
-          </CTabPane>
-
-          <CTabPane className="p-3">
-            <h6>Settings</h6>
-            <div>
-              <div className="clearfix mt-4"><small><b>Option 1</b></small>
-                <CSwitch className="float-right" shape="pill" variant="opposite" color="success" size="sm" labelOn="on" labelOff="off" defaultChecked />
-              </div>
-              <div><small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small></div>
-            </div>
-            <div>
-              <div className="clearfix mt-3"><small><b>Option 2</b></small>
-                <CSwitch className="float-right" shape="pill" variant="opposite" color="success" size="sm" labelOn="on" labelOff="off" />
-              </div>
-              <div><small className="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small></div>
-            </div>
-            <div>
-              <div className="clearfix mt-3"><small><b>Option 3</b></small>
-                <CSwitch className="float-right" shape="pill" variant="opposite" color="success" size="sm" labelOn="on" labelOff="off" />
-              </div>
-            </div>
-            <div>
-              <div className="clearfix mt-3"><small><b>Option 4</b></small>
-                <CSwitch className="float-right" shape="pill" variant="opposite" color="success" size="sm" labelOn="on" labelOff="off" defaultChecked />
-              </div>
-            </div>
-            <hr />
-            <h6>System Utilization</h6>
-            <div className="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div>
-            <CProgress size="xs" color="info" value={25} />
-            <small className="text-muted">348 Processes. 1/4 Cores.</small>
-            <div className="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div>
-            <CProgress size="xs" color="warning" value={70} />
-            <small className="text-muted">11444GB/16384MB</small>
-            <div className="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div>
-            <CProgress size="xs" color="danger" value={95} />
-            <small className="text-muted">243GB/256GB</small>
-            <div className="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div>
-            <CProgress size="xs" color="success" value={10} />
-            <small className="text-muted">25GB/256GB</small>
-          </CTabPane>
-
-        </CTabContent>
-      </CTabs>
-    </CSidebar>
-  )
-}
-
-export default React.memo(TheAside)
diff --git a/src/containers/TheHeader.js b/src/containers/TheHeader.js
index ca21694..5299b73 100644
--- a/src/containers/TheHeader.js
+++ b/src/containers/TheHeader.js
@@ -26,7 +26,6 @@ import logo from '../assets/img/brand/coreui-react-neg.svg'
 
 const TheHeader = () => {
   const dispatch = useDispatch()
-  const asideShow = useSelector(state => state.asideShow)
   const sidebarShow = useSelector(state => state.sidebarShow)
 
   const toggleSidebar = () => {
@@ -72,17 +71,13 @@ const TheHeader = () => {
         <TheHeaderDropdownTasks/>
         <TheHeaderDropdownMssg/>
         <TheHeaderDropdown/>
-        <CToggler
-          inHeader
-          className="d-md-down-none"
-          onClick={() => dispatch({type: 'set', asideShow: !asideShow})}
-        >
-          <CIcon className="mr-2" size="lg" name="cil-applications-settings" />
-        </CToggler>
       </CHeaderNav>
 
       <CSubheader className="px-3 justify-content-between">
-        <CBreadcrumbRouter className="border-0 c-subheader-nav m-0 px-0 px-md-3" routes={routes} />
+        <CBreadcrumbRouter 
+          className="border-0 c-subheader-nav m-0 px-0 px-md-3" 
+          routes={routes} 
+        />
           <div className="d-md-down-none mfe-2 c-subheader-nav">
             <CLink className="c-subheader-nav-link"href="#">
               <CIcon name="cil-speech" alt="Settings" />
diff --git a/src/store.js b/src/store.js
index 129b6ba..0267b34 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,8 +1,7 @@
 import { createStore } from 'redux'
 
 const initialState = {
-  sidebarShow: 'responsive',
-  asideShow: false
+  sidebarShow: 'responsive'
 }
 
 const changeState = (state = initialState, { type, ...rest }) => {
diff --git a/src/views/Base/Collapses/Collapses.js b/src/views/Base/Collapses/Collapses.js
index 35e09ff..18597ee 100644
--- a/src/views/Base/Collapses/Collapses.js
+++ b/src/views/Base/Collapses/Collapses.js
@@ -17,23 +17,6 @@ const Collapses = () => {
   const [collapseMulti, setCollapseMulti] = useState([false, false])
   const [accordion, setAccordion] = useState(1)
   const [fade, setFade] = useState(true)
-  const [status, setStatus] = useState('Closed')
-
-  const onEntering = () => {
-    setStatus('Opening...')
-  }
-
-  const onEntered = () => {
-    setStatus('Opened')
-  }
-
-  const onExiting = () => {
-    setStatus('Closing...')
-  }
-
-  const onExited = () => {
-    setStatus('Closed')
-  }
 
   const toggle = (e) => {
     setCollapse(!collapse)
@@ -74,13 +57,7 @@ const Collapses = () => {
               </a>
             </div>
           </CCardHeader>
-          <CCollapse
-            show={collapse}
-            onEntering={onEntering}
-            onEntered={onEntered}
-            onExiting={onExiting}
-            onExited={onExited}
-          >
+          <CCollapse show={collapse}>
             <CCardBody>
               <p>
                 Anim pariatur cliche reprehenderit,
@@ -107,8 +84,6 @@ const Collapses = () => {
               onClick={toggle}
               className={'mb-1'}
             >Toggling button</CButton>
-            <hr/>
-            <h5>Current state: {status}</h5>
           </CCardFooter>
         </CCard>
 
@@ -180,7 +155,12 @@ const Collapses = () => {
             <div id="accordion">
               <CCard className="mb-0">
                 <CCardHeader id="headingOne">
-                  <CButton block color="link" className="text-left m-0 p-0" onClick={() => setAccordion(0)}>
+                  <CButton 
+                    block 
+                    color="link" 
+                    className="text-left m-0 p-0" 
+                    onClick={() => setAccordion(accordion === 0 ? null : 0)}
+                  >
                     <h5 className="m-0 p-0">Collapsible Group Item #1</h5>
                   </CButton>
                 </CCardHeader>
@@ -196,7 +176,12 @@ const Collapses = () => {
               </CCard>
               <CCard className="mb-0">
                 <CCardHeader id="headingTwo">
-                  <CButton block color="link" className="text-left m-0 p-0" onClick={() => setAccordion(1)}>
+                  <CButton 
+                    block 
+                    color="link" 
+                    className="text-left m-0 p-0" 
+                    onClick={() => setAccordion(accordion === 1 ? null : 1)}
+                  >
                     <h5 className="m-0 p-0">Collapsible Group Item #2</h5>
                   </CButton>
                 </CCardHeader>
@@ -212,7 +197,12 @@ const Collapses = () => {
               </CCard>
               <CCard className="mb-0">
                 <CCardHeader id="headingThree">
-                  <CButton block color="link" className="text-left m-0 p-0" onClick={() => setAccordion(2)}>
+                  <CButton 
+                    block 
+                    color="link" 
+                    className="text-left m-0 p-0" 
+                    onClick={() => setAccordion(accordion === 2 ? null : 2)}
+                  >
                     <h5 className="m-0 p-0">Collapsible Group Item #3</h5>
                   </CButton>
                 </CCardHeader>