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