diff --git a/src/components/MainContainer/MainContainer.stories.tsx b/src/components/MainContainer/MainContainer.stories.tsx index d33e0515..07443502 100644 --- a/src/components/MainContainer/MainContainer.stories.tsx +++ b/src/components/MainContainer/MainContainer.stories.tsx @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { useState } from "react"; +import React from "react"; import { Meta, Story } from "@storybook/react"; import MainContainer from "./MainContainer"; @@ -22,6 +22,8 @@ import { MainContainerProps } from "./MainContainer.types"; import StoryThemeProvider from "../../utils/StoryThemeProvider"; import { GlobalStyles } from "../index"; import Box from "../Box/Box"; +import Menu from "../Menu/Menu"; +import TestIcon from "../../utils/TestIcon"; export default { title: "MDS/Layout/MainContainer", @@ -58,3 +60,40 @@ HorizontalMenu.args = { menu:
This is where menu goes
, horizontal: true, }; + +export const DisableMobileMode = Template.bind({}); + +DisableMobileMode.args = { + children: This is a Block simulating the content box, + menu: ( + , + path: "/testPath1", + name: "Test 1", + group: "Group 1", + id: "test1", + onClick: (path) => { + console.log("Custom Click Action", path); + }, + }, + ]} + applicationLogo={{ applicationName: "console", subVariant: "AGPL" }} + callPathAction={(path) => { + alert(`Called Path "${path}"`); + }} + signOutAction={() => { + alert("Sign Out!"); + }} + collapseAction={() => { + console.log("COLLAPSE!"); + }} + horizontal={false} + currentPath={"/testPath1"} + /> + ), + mobileModeAuto: false, +}; diff --git a/src/components/MainContainer/MainContainer.tsx b/src/components/MainContainer/MainContainer.tsx index 59df9616..fac9d5cc 100644 --- a/src/components/MainContainer/MainContainer.tsx +++ b/src/components/MainContainer/MainContainer.tsx @@ -14,7 +14,7 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import React, { FC } from "react"; +import React, { cloneElement, FC } from "react"; import get from "lodash/get"; import styled from "styled-components"; import { MainContainerProps, ParentBoxProps } from "./MainContainer.types"; @@ -31,22 +31,35 @@ const CustomMain = styled.main(({ theme }) => { }; }); -const ParentBox = styled.div(({ horizontal }) => ({ - display: "flex", - flexDirection: !!horizontal ? "column" : "row", - [`@media (max-width: ${get(breakPoints, "md", 0)}px)`]: { - flexDirection: "column", - }, -})); +const ParentBox = styled.div( + ({ horizontal, mobileModeAuto }) => { + let breakPoint = {}; + + if (mobileModeAuto) { + breakPoint = { + [`@media (max-width: ${get(breakPoints, "md", 0)}px)`]: { + flexDirection: "column", + }, + }; + } + + return { + display: "flex", + flexDirection: !!horizontal ? "column" : "row", + ...breakPoint, + }; + } +); const MainContainer: FC = ({ children, menu, horizontal, + mobileModeAuto = true, }) => { return ( - - {menu} + + {menu && cloneElement(menu, { mobileModeAuto })} {children} ); diff --git a/src/components/MainContainer/MainContainer.types.ts b/src/components/MainContainer/MainContainer.types.ts index 7890d9c9..71f78241 100644 --- a/src/components/MainContainer/MainContainer.types.ts +++ b/src/components/MainContainer/MainContainer.types.ts @@ -17,11 +17,13 @@ import React from "react"; export interface MainContainerProps { - menu?: React.ReactNode; - children: React.ReactNode; + menu?: React.ReactElement; + children: React.ReactElement; horizontal?: boolean; + mobileModeAuto?: boolean; } export interface ParentBoxProps { horizontal?: boolean; + mobileModeAuto: boolean; }