Commit 46ea0a8d authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf Committed by Nicolas Frandeboeuf
Browse files

New approach for menu (fix #576)

parent 243c216d
Pipeline #18585 passed with stage
in 2 minutes and 26 seconds
......@@ -25,7 +25,7 @@ const Menu = props => {
const settingsSubsection = determineSubsection('settings', 'accounts');
return (
<nav className={ props.isHidden ? 'menu-hidden' : '' }>
<nav>
<div className="banks-accounts-list">
<BankList
currentAccountId={ currentAccountId }
......@@ -104,9 +104,7 @@ const Menu = props => {
Menu.propTypes = {
// The kind of chart to display: by categories, balance, or in and outs for all accounts.
defaultChart: PropTypes.string.isRequired,
// Tells whether the menu shall be shown or not
isHidden: PropTypes.bool.isRequired
defaultChart: PropTypes.string.isRequired
};
const Export = connect(state => {
......
......@@ -94,6 +94,23 @@ main {
height: calc(100vh - 40px);
display: flex;
flex-direction: row;
width: calc(100% + 320px);
transform: translateX(-320px);
}
main::before {
content: "";
display: block;
width: 320px;
padding-left: 0;
padding-right: 0;
transition: width 0.5s ease-in-out;
flex-shrink: 0;
flex-grow: 0;
}
main.menu-hidden::before {
width: 0;
}
main > * {
......@@ -115,19 +132,10 @@ main nav {
z-index: 1000;
display: flex;
flex-direction: column;
transition: width 0.5s ease-in-out;
}
main nav.menu-hidden {
width: 0;
padding-left: 0;
padding-right: 0;
}
main nav > * {
box-sizing: border-box;
width: 320px;
}
main nav > :first-child {
......@@ -157,8 +165,8 @@ main nav > :last-child {
@media (max-width: 620px) {
#content {
min-width: 100%;
width: 100%;
min-width: calc(100% - 320px);
width: calc(100% - 320px);
overflow-x: hidden;
padding: 7px;
}
......@@ -530,7 +538,7 @@ header .locale-selector.form-control {
}
@media (max-width: 1024px) {
nav:not(.menu-hidden) + #content .operation-wells .well {
main:not(.menu-hidden) #content .operation-wells .well {
width: 48.5%;
}
}
......
......@@ -82,12 +82,7 @@ class BaseApp extends React.Component {
};
}
const menu = props => (
<Menu
{ ...props }
isHidden={ this.state.isMenuHidden }
/>
);
const menu = props => <Menu { ...props } />;
if (this.props.processingReason) {
return <Loading message={ $t(this.props.processingReason) } />;
......@@ -161,7 +156,7 @@ class BaseApp extends React.Component {
<LocaleSelector />
</header>
<main>
<main className={ this.state.isMenuHidden ? 'menu-hidden' : '' }>
<Route
path='/:section/:subsection?/:currentAccountId'
render={ menu }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment