Added mobile auto mode disabled option (#357)

src/components/MainContainer/MainContainer.stories.tsx

@@ -14,14 +14,16 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, { useState } from "react";
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import MainContainer from "./MainContainer";
 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: <div>This is where menu goes</div>,
   horizontal: true,
 };
+
+export const DisableMobileMode = Template.bind({});
+
+DisableMobileMode.args = {
+  children: <Box>This is a Block simulating the content box</Box>,
+  menu: (
+    <Menu
+      isOpen={true}
+      displayGroupTitles
+      options={[
+        {
+          icon: <TestIcon />,
+          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,
+};

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 <http://www.gnu.org/licenses/>.
 
-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<ParentBoxProps>(({ horizontal }) => ({
-  display: "flex",
-  flexDirection: !!horizontal ? "column" : "row",
-  [`@media (max-width: ${get(breakPoints, "md", 0)}px)`]: {
-    flexDirection: "column",
-  },
-}));
+const ParentBox = styled.div<ParentBoxProps>(
+  ({ 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<MainContainerProps> = ({
   children,
   menu,
   horizontal,
+  mobileModeAuto = true,
 }) => {
   return (
-    <ParentBox horizontal={horizontal}>
-      {menu}
+    <ParentBox horizontal={horizontal} mobileModeAuto={mobileModeAuto}>
+      {menu && cloneElement(menu, { mobileModeAuto })}
       <CustomMain>{children}</CustomMain>
     </ParentBox>
   );

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;
 }