fix: fix accordion, delete aside
This commit is contained in:
woothu
parent
e236aad4ab
commit
0e6506ea33
@ -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)
|
|
||||||
@ -26,7 +26,6 @@ import logo from '../assets/img/brand/coreui-react-neg.svg'
|
|||||||
|
|
||||||
const TheHeader = () => {
|
const TheHeader = () => {
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
const asideShow = useSelector(state => state.asideShow)
|
|
||||||
const sidebarShow = useSelector(state => state.sidebarShow)
|
const sidebarShow = useSelector(state => state.sidebarShow)
|
||||||
|
|
||||||
const toggleSidebar = () => {
|
const toggleSidebar = () => {
|
||||||
@ -72,17 +71,13 @@ const TheHeader = () => {
|
|||||||
<TheHeaderDropdownTasks/>
|
<TheHeaderDropdownTasks/>
|
||||||
<TheHeaderDropdownMssg/>
|
<TheHeaderDropdownMssg/>
|
||||||
<TheHeaderDropdown/>
|
<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>
|
</CHeaderNav>
|
||||||
|
|
||||||
<CSubheader className="px-3 justify-content-between">
|
<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">
|
<div className="d-md-down-none mfe-2 c-subheader-nav">
|
||||||
<CLink className="c-subheader-nav-link"href="#">
|
<CLink className="c-subheader-nav-link"href="#">
|
||||||
<CIcon name="cil-speech" alt="Settings" />
|
<CIcon name="cil-speech" alt="Settings" />
|
||||||
|
|||||||
@ -1,8 +1,7 @@
|
|||||||
import { createStore } from 'redux'
|
import { createStore } from 'redux'
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
sidebarShow: 'responsive',
|
sidebarShow: 'responsive'
|
||||||
asideShow: false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const changeState = (state = initialState, { type, ...rest }) => {
|
const changeState = (state = initialState, { type, ...rest }) => {
|
||||||
|
|||||||
@ -17,23 +17,6 @@ const Collapses = () => {
|
|||||||
const [collapseMulti, setCollapseMulti] = useState([false, false])
|
const [collapseMulti, setCollapseMulti] = useState([false, false])
|
||||||
const [accordion, setAccordion] = useState(1)
|
const [accordion, setAccordion] = useState(1)
|
||||||
const [fade, setFade] = useState(true)
|
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) => {
|
const toggle = (e) => {
|
||||||
setCollapse(!collapse)
|
setCollapse(!collapse)
|
||||||
@ -74,13 +57,7 @@ const Collapses = () => {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
<CCollapse
|
<CCollapse show={collapse}>
|
||||||
show={collapse}
|
|
||||||
onEntering={onEntering}
|
|
||||||
onEntered={onEntered}
|
|
||||||
onExiting={onExiting}
|
|
||||||
onExited={onExited}
|
|
||||||
>
|
|
||||||
<CCardBody>
|
<CCardBody>
|
||||||
<p>
|
<p>
|
||||||
Anim pariatur cliche reprehenderit,
|
Anim pariatur cliche reprehenderit,
|
||||||
@ -107,8 +84,6 @@ const Collapses = () => {
|
|||||||
onClick={toggle}
|
onClick={toggle}
|
||||||
className={'mb-1'}
|
className={'mb-1'}
|
||||||
>Toggling button</CButton>
|
>Toggling button</CButton>
|
||||||
<hr/>
|
|
||||||
<h5>Current state: {status}</h5>
|
|
||||||
</CCardFooter>
|
</CCardFooter>
|
||||||
</CCard>
|
</CCard>
|
||||||
|
|
||||||
@ -180,7 +155,12 @@ const Collapses = () => {
|
|||||||
<div id="accordion">
|
<div id="accordion">
|
||||||
<CCard className="mb-0">
|
<CCard className="mb-0">
|
||||||
<CCardHeader id="headingOne">
|
<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>
|
<h5 className="m-0 p-0">Collapsible Group Item #1</h5>
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
@ -196,7 +176,12 @@ const Collapses = () => {
|
|||||||
</CCard>
|
</CCard>
|
||||||
<CCard className="mb-0">
|
<CCard className="mb-0">
|
||||||
<CCardHeader id="headingTwo">
|
<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>
|
<h5 className="m-0 p-0">Collapsible Group Item #2</h5>
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
@ -212,7 +197,12 @@ const Collapses = () => {
|
|||||||
</CCard>
|
</CCard>
|
||||||
<CCard className="mb-0">
|
<CCard className="mb-0">
|
||||||
<CCardHeader id="headingThree">
|
<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>
|
<h5 className="m-0 p-0">Collapsible Group Item #3</h5>
|
||||||
</CButton>
|
</CButton>
|
||||||
</CCardHeader>
|
</CCardHeader>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user