Sidebar toggle on mobile
This commit is contained in:
parent
33ff812aec
commit
2d6b15ea4f
@ -3,25 +3,41 @@
|
|||||||
*/
|
*/
|
||||||
.info-container {
|
.info-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 85px;
|
top: 75px;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
overflow-y: auto;
|
|
||||||
width: 95%;
|
width: 95%;
|
||||||
padding: 0 0 2em;
|
width: calc(100% - 40px);
|
||||||
background: #fff;
|
z-index: 1001;
|
||||||
z-index: 1000;
|
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
.info-container.offscreen {
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
.info-container.onscreen {
|
.info-container-collapse {
|
||||||
transform: translateX(0);
|
position: absolute;
|
||||||
|
right: -32px;
|
||||||
|
top: 2rem;
|
||||||
|
padding: 2.5rem 0rem;
|
||||||
|
border-radius: 0 .25rem .25rem 0;
|
||||||
}
|
}
|
||||||
@media (min-width: 768px){
|
@media (min-width: 768px){
|
||||||
.info-container {
|
.info-container {
|
||||||
width: 480px; /* to match .main-header menu width */
|
width: 480px; /* to match .main-header menu width */
|
||||||
transform: translateX(0);
|
|
||||||
}
|
}
|
||||||
|
.info-container.offscreen {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
.info-container-collapse {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info-container-inner {
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 0 2em;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,11 +1,29 @@
|
|||||||
import React from 'react';
|
import React, { useState, Fragment } from 'react';
|
||||||
|
|
||||||
import './sidebar.css';
|
import './sidebar.css';
|
||||||
|
import { BackIcon, ForwardIcon } from '../components/icons';
|
||||||
|
|
||||||
const Sidebar: React.FC<{}> = (props) => (
|
const Sidebar: React.FC<{}> = (props) => {
|
||||||
<div id="sidebar" className="info-container">
|
const [collapsed, setCollapsed] = useState(true);
|
||||||
{ props.children }
|
|
||||||
</div>
|
return (
|
||||||
);
|
<Fragment>
|
||||||
|
<div id="sidebar" className={"info-container " + (collapsed? "offscreen": "")}>
|
||||||
|
<button className="info-container-collapse btn btn-light"
|
||||||
|
onClick={() => setCollapsed(!collapsed)}
|
||||||
|
>
|
||||||
|
{
|
||||||
|
collapsed?
|
||||||
|
<ForwardIcon />
|
||||||
|
: <BackIcon />
|
||||||
|
}
|
||||||
|
</button>
|
||||||
|
<div className="info-container-inner">
|
||||||
|
{ props.children }
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default Sidebar;
|
export default Sidebar;
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* Mini-library of icons
|
* Mini-library of icons
|
||||||
*/
|
*/
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core';
|
import { library } from '@fortawesome/fontawesome-svg-core';
|
||||||
import { faAngleLeft, faCaretDown, faCaretRight, faCaretUp, faCheck, faCheckDouble,
|
import { faAngleLeft, faAngleRight, faCaretDown, faCaretRight, faCaretUp, faCheck, faCheckDouble,
|
||||||
faEye, faInfoCircle, faPaintBrush, faQuestionCircle, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
|
faEye, faInfoCircle, faPaintBrush, faQuestionCircle, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
@ -15,6 +15,7 @@ library.add(
|
|||||||
faCheck,
|
faCheck,
|
||||||
faCheckDouble,
|
faCheckDouble,
|
||||||
faAngleLeft,
|
faAngleLeft,
|
||||||
|
faAngleRight,
|
||||||
faCaretDown,
|
faCaretDown,
|
||||||
faCaretUp,
|
faCaretUp,
|
||||||
faCaretRight,
|
faCaretRight,
|
||||||
@ -54,6 +55,10 @@ const BackIcon = () => (
|
|||||||
<FontAwesomeIcon icon="angle-left" />
|
<FontAwesomeIcon icon="angle-left" />
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const ForwardIcon = () => (
|
||||||
|
<FontAwesomeIcon icon="angle-right" />
|
||||||
|
);
|
||||||
|
|
||||||
const DownIcon = () => (
|
const DownIcon = () => (
|
||||||
<FontAwesomeIcon icon="caret-down" />
|
<FontAwesomeIcon icon="caret-down" />
|
||||||
);
|
);
|
||||||
@ -79,6 +84,7 @@ export {
|
|||||||
SaveIcon,
|
SaveIcon,
|
||||||
SaveDoneIcon,
|
SaveDoneIcon,
|
||||||
BackIcon,
|
BackIcon,
|
||||||
|
ForwardIcon,
|
||||||
DownIcon,
|
DownIcon,
|
||||||
UpIcon,
|
UpIcon,
|
||||||
RightIcon,
|
RightIcon,
|
||||||
|
Loading…
Reference in New Issue
Block a user