GlobalAppBar content now positions and resizes correctly

README.md

@@ -3,7 +3,11 @@
 
 ## How to install this module in your app
 
-You can install `ce-ui-common` in a dependent directly from this git repository:
+### Prerequisites
+First, make sure you have installed all of `ce-ui-common`'s peer dependencies into your app. You can find the list of peer dependencies in this repository's `package.json`.
+
+### Installation
+You can install `ce-ui-common` in a dependent app directly from this git repository:
 
 ```
 npm install git+https://gitlab.esss.lu.se/ccce/dev/ce-ui-common.git

src/components/navigation/ButtonAppBar.js

 import { AppBar, Box, styled, Toolbar, Typography } from "@mui/material";
 
 const defaultStyle = ({ theme }) => ({
-  "& > .AppBar > .Toolbar": {
+  "& > .Toolbar": {
     "& > .HomeBox": {
       "margin-right": theme.spacing(2)
     },
@@ -14,21 +14,19 @@ const defaultStyle = ({ theme }) => ({
 
 export function CeuiButtonAppBar({ title, actionButton, homeButton, className, ...delegated }) {
   return (
-    <Box className={`${className} ButtonAppBar`} {...delegated}>
-      <AppBar className="AppBar" position="fixed">
-        <Toolbar className="Toolbar">
-          <div className="HomeBox">
-            {homeButton}
-          </div>
-          <Typography variant="title" className="Title" noWrap>
-            {title}
-          </Typography>
-          <div className="ActionBox">
-            {actionButton}
-          </div>
-        </Toolbar>
-      </AppBar>
-    </Box>
+    <AppBar className={`${className} ButtonAppBar`} position="fixed" {...delegated}>
+      <Toolbar className="Toolbar">
+        <div className="HomeBox">
+          {homeButton}
+        </div>
+        <Typography variant="title" className="Title" noWrap>
+          {title}
+        </Typography>
+        <div className="ActionBox">
+          {actionButton}
+        </div>
+      </Toolbar>
+    </AppBar>
   );
 }
 

src/components/navigation/GlobalAppBar.js

-import { Box, styled } from "@mui/material";
+import { Box, CssBaseline, styled, Toolbar, Typography } from "@mui/material";
 import { createContext, useCallback, useState } from "react";
 import { ButtonAppBar } from "./ButtonAppBar";
 import { MenuDrawer } from "./MenuDrawer";
 
 const defaultStyle = ({ theme, ...props }) => ({
-  "& > .ButtonAppBar > .AppBar": {  
-      "z-index": theme.zIndex.drawer + 1
+  display: "flex",
+  "& > .ButtonAppBar": {
+    "z-index": theme.zIndex.drawer + 1
   },
-  "& > .MenuDrawer > .Drawer > .MuiDrawer-paper > .Spacer": {
-    "padding": 0,
-    ...theme.mixins.toolbar
+  "& > .ContentBox": {
+    padding: theme.spacing(3),
   },
-  "& > .Spacer": {
-    "padding": 0,
-    ...theme.mixins.toolbar
+  "& > .MenuDrawer": {
+    boxSizing: "border-box",
+    "& > .MuiDrawer-paper > .Spacer": {
+      ...theme.mixins.toolbar
+    },
   },
-  "& .GlobalAppBar-Content": {
-    "margin-left": props.widthOpen,
-  }
 })
 
 export const GlobalAppBarContext = createContext({
@@ -46,8 +45,10 @@ export function CeuiGlobalAppBar({ defaultHomeButton, defaultActionButton, defau
           {menuItems}
         </MenuDrawer>
         <GlobalAppBarContext.Provider value={value}>
-          <div className="Spacer" />
-          <div className="GlobalAppBar-Content" >Some Dev Content</div>
+          <Box component="main" className="ContentBox">
+            <Toolbar />
+            {children}
+          </Box>
         </GlobalAppBarContext.Provider>
       </Box>
     </>

src/components/navigation/GlobalAppBar.stories.js

 import { ThemeProvider } from "@emotion/react";
 import { Home } from "@mui/icons-material";
-import { Button, IconButton } from "@mui/material";
+import { Button, IconButton, Typography } from "@mui/material";
 import { theme } from "../../style/Theme";
 import { GlobalAppBar } from "./GlobalAppBar";
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: "Navigation/GlobalAppBar",
-  component: GlobalAppBar
+  component: GlobalAppBar,
+  parameters: {
+    layout: 'fullscreen',
+  },
 }
 
 const Harness = (args) => {
@@ -20,7 +23,33 @@ const Harness = (args) => {
 
   return (
     <GlobalAppBar {...{menuItems, ...args}}>
-      <div>Here is some content!</div>
+      <Typography paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
+          enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
+          imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
+          Convallis convallis tellus id interdum velit laoreet id donec ultrices.
+          Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
+          adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
+          nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
+          leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
+          feugiat vivamus at augue. At augue eget arcu dictum varius duis at
+          consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
+          sapien faucibus et molestie ac.
+        </Typography>
+        <Typography paragraph>
+          Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
+          eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
+          neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
+          tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
+          sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
+          tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
+          gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
+          et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
+          tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
+          eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
+          posuere sollicitudin aliquam ultrices sagittis orci a.
+        </Typography>
     </GlobalAppBar>
   )
 }
@@ -32,5 +61,5 @@ Default.args = {
   defaultHomeButton: <IconButton color="inherit"><Home /></IconButton>,
   defaultTitle: "Example title",
   defaultActionButton: <Button variant="filled">Login</Button>,
-  widthOpen: "241px"
+  widthOpen: "241px",
 }

src/components/navigation/MenuDrawer.js

@@ -3,15 +3,17 @@ import { Box, IconButton, Stack, styled, Typography } from "@mui/material";
 import { Drawer, DrawerFooter } from "./Drawer";
 
 const defaultStyle = ({ theme, ...props }) => {
+  const width = props.open ? (props.widthOpen ?? 240) : (props.widthClosed ?? 80)
   return ({
+    width,
     "& > .Spacer": {
       "padding": theme.spacing(2),
       ...(props.toolbar && theme.mixins.toolbar)
     },
-    "& > .Drawer,.MuiDrawer-paper": {
-      "width": props.open ? (props.widthOpen ?? 240) : (props.widthClosed ?? 80)
+    "& > .MuiDrawer-paper": {
+      width,
     },
-    "& > .Drawer > .MuiDrawer-paper > .Footer": {
+    "& > .MuiDrawer-paper > .Footer": {
       "& > .ToggleBox": {
         "display": "flex",
         "padding": theme.spacing(1),
@@ -26,26 +28,25 @@ const defaultStyle = ({ theme, ...props }) => {
 
 export function CeuiMenuDrawer({ open, toggleDrawer, toolbar = true, children, className, ...delegated }) {
   return (
-    <Box className={`${className} MenuDrawer`} {...delegated}>
-      <Drawer
-        className="Drawer"
-        variant="permanent"
-        open={open}
-        onClose={toggleDrawer}
-        ModalProps={{ keepMounted: true }} // better performance on mobile
-      >
-        <div className="Spacer" />
-        {children}
-        <DrawerFooter className="Footer">
-          <Box className="ToggleBox">
-            <IconButton className="ToggleButton" onClick={toggleDrawer}>
-              {open ? <ChevronLeft /> : <ChevronRight />}
-            </IconButton>
-            {open ? <Stack direction="column" justifyContent="center"><Typography>Collapse sidebar</Typography></Stack> : <></>}
-          </Box>
-        </DrawerFooter>
-      </Drawer>
-    </Box>
+    <Drawer
+      className={`${className} MenuDrawer`}
+      variant="permanent"
+      open={open}
+      onClose={toggleDrawer}
+      ModalProps={{ keepMounted: true }} // better performance on mobile
+      {...delegated}
+    >
+      <Box className="Spacer" />
+      {children}
+      <DrawerFooter className="Footer">
+        <Box className="ToggleBox">
+          <IconButton className="ToggleButton" onClick={toggleDrawer}>
+            {open ? <ChevronLeft /> : <ChevronRight />}
+          </IconButton>
+          {open ? <Stack direction="column" justifyContent="center"><Typography>Collapse sidebar</Typography></Stack> : <></>}
+        </Box>
+      </DrawerFooter>
+    </Drawer>
   );
 }
 

src/style/Theme.js

@@ -26,15 +26,14 @@ export const theme = createTheme({
           props: { variant: 'themeExample' },
           style: (props) => {
             return ({
-            "& .AppBar": {
               "background-color": "black",
-            },
-            "& .HomeBox,.ActionBox": {
-              "border-style": "dashed",
-              "border-color": props.theme.palette.primary.main,
-              "border-width": props.theme.spacing(.5) 
-            }
-          })},
+              "& > .Toolbar > .HomeBox,.ActionBox": {
+                "border-style": "dashed",
+                "border-color": props.theme.palette.primary.main,
+                "border-width": props.theme.spacing(.5)
+              }
+            })
+          },
         }
       ]
     }