un collapse menu on each interaction with it

This commit is contained in:
Sebastian Sdorra
2020-03-31 11:00:07 +02:00
parent 2821005d8c
commit 13633fb57e
11 changed files with 154 additions and 418 deletions

View File

@@ -21,13 +21,9 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { ReactNode } from "react";
import React, { FC } from "react";
import styled from "styled-components";
type Props = {
children?: ReactNode;
collapsed: boolean;
};
import useMenuContext from "../navigation/MenuContext";
const PrimaryColumn = styled.div<{ collapsed: boolean }>`
/* This is the counterpart to the specific column in SecondaryNavigationColumn. */
@@ -39,18 +35,13 @@ const PrimaryColumn = styled.div<{ collapsed: boolean }>`
}
`;
export default class PrimaryContentColumn extends React.Component<Props> {
static defaultProps = {
collapsed: false
};
const PrimaryContentColumn: FC = ({ children }) => {
const context = useMenuContext();
return (
<PrimaryColumn className="column" collapsed={context.isCollapsed()}>
{children}
</PrimaryColumn>
);
};
render() {
const { children, collapsed } = this.props;
return (
<PrimaryColumn className="column" collapsed={collapsed}>
{children}
</PrimaryColumn>
);
}
}
export default PrimaryContentColumn;

View File

@@ -21,13 +21,9 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import React, { ReactNode } from "react";
import React, { FC } from "react";
import styled from "styled-components";
type Props = {
children?: ReactNode;
collapsed: boolean;
};
import useMenuContext from "../navigation/MenuContext";
const SecondaryColumn = styled.div<{ collapsed: boolean }>`
/* In Bulma there is unfortunately no intermediate step between .is-1 and .is-2, hence the size.
@@ -42,18 +38,13 @@ const SecondaryColumn = styled.div<{ collapsed: boolean }>`
}
`;
export default class SecondaryNavigationColumn extends React.Component<Props> {
static defaultProps = {
collapsed: false
};
const SecondaryNavigationColumn: FC = ({ children }) => {
const context = useMenuContext();
return (
<SecondaryColumn className="column" collapsed={context.isCollapsed()}>
{children}
</SecondaryColumn>
);
};
render() {
const { children, collapsed } = this.props;
return (
<SecondaryColumn className="column" collapsed={collapsed}>
{children}
</SecondaryColumn>
);
}
}
export default SecondaryNavigationColumn;