fixing navbar on mobiles

Author: RafaelGB

src/components/NavBar.tsx

@@ -15,12 +15,12 @@ import MenuItem from "@mui/material/MenuItem";
 
 import Toolbar from "@mui/material/Toolbar";
 import { c } from "helpers/StylesHelper";
-import Typography from "@mui/material/Typography";
 import DataviewFilters from "components/reducers/DataviewFilters";
 import { MenuButtonStyle } from "components/styles/NavBarStyles";
 import { SettingsModal } from "Settings";
 import CsvReader from "./navbar/CsvReader";
 import { t } from "lang/helpers";
+import Grid from "@mui/material/Grid";
 
 export function NavBar(navBarProps: NavBarProps) {
   const { table } = navBarProps;
@@ -72,59 +72,68 @@ export function NavBar(navBarProps: NavBarProps) {
         }}
       >
         <Toolbar>
-          <IconButton
-            size="large"
-            edge="start"
-            color="inherit"
-            aria-label={t("toolbar_menu_aria_label")}
-            sx={{ mr: 2 }}
-            id="long-button"
-            aria-controls={open ? "long-menu" : undefined}
-            aria-expanded={open ? "true" : undefined}
-            aria-haspopup="true"
-            onClick={handleClick}
-          >
-            <MenuIcon />
-          </IconButton>
-          <Menu
-            anchorEl={anchorEl}
-            open={open}
-            onClose={handleMenuClose}
-            PaperProps={{
-              style: {
-                maxHeight: NavBarConfig.ITEM_HEIGHT * 4.5,
-              },
-            }}
-            MenuListProps={{
-              "aria-labelledby": "long-button",
-              style: {
-                backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
-                color: StyleVariables.TEXT_NORMAL,
-              },
-            }}
-          >
-            <MenuItem onClick={handleSettingsClick} disableRipple>
-              <SettingsIcon {...MenuButtonStyle} />
-              {t("menu_pane_open_db_settings_action")}
-            </MenuItem>
-            <MenuItem onClick={handleOpenAsMarkdownClick} disableRipple>
-              <InsertDriveFileIcon {...MenuButtonStyle} />
-              {t("menu_pane_open_as_md_action")}
-            </MenuItem>
-            <MenuItem disableRipple>
-              {/* CSV buttton download */}
-              <CsvWriter
-                columns={columnsInfo.getAllColumns()}
-                rows={table.getRowModel().rows}
-                name={view.diskConfig.yaml.name}
-              />
-            </MenuItem>
-            <CsvReader {...navBarProps} />
-          </Menu>
-          {/** Global filter */}
-          <GlobalFilter {...navBarProps.globalFilterRows} />
-          <DataviewFilters table={table} />
-          <PaginationTable table={table} />
+          <Grid container spacing={3}>
+            <Grid item xs="auto">
+              <IconButton
+                size="large"
+                edge="start"
+                color="inherit"
+                aria-label={t("toolbar_menu_aria_label")}
+                id="long-button"
+                aria-controls={open ? "long-menu" : undefined}
+                aria-expanded={open ? "true" : undefined}
+                aria-haspopup="true"
+                onClick={handleClick}
+              >
+                <MenuIcon />
+              </IconButton>
+            </Grid>
+            <Menu
+              anchorEl={anchorEl}
+              open={open}
+              onClose={handleMenuClose}
+              PaperProps={{
+                style: {
+                  maxHeight: NavBarConfig.ITEM_HEIGHT * 4.5,
+                },
+              }}
+              MenuListProps={{
+                "aria-labelledby": "long-button",
+                style: {
+                  backgroundColor: StyleVariables.BACKGROUND_PRIMARY,
+                  color: StyleVariables.TEXT_NORMAL,
+                },
+              }}
+            >
+              <MenuItem onClick={handleSettingsClick} disableRipple>
+                <SettingsIcon {...MenuButtonStyle} />
+                {t("menu_pane_open_db_settings_action")}
+              </MenuItem>
+              <MenuItem onClick={handleOpenAsMarkdownClick} disableRipple>
+                <InsertDriveFileIcon {...MenuButtonStyle} />
+                {t("menu_pane_open_as_md_action")}
+              </MenuItem>
+              <MenuItem disableRipple>
+                {/* CSV buttton download */}
+                <CsvWriter
+                  columns={columnsInfo.getAllColumns()}
+                  rows={table.getRowModel().rows}
+                  name={view.diskConfig.yaml.name}
+                />
+              </MenuItem>
+              <CsvReader {...navBarProps} />
+            </Menu>
+            <Grid item xs="auto">
+              {/** Global filter */}
+              <GlobalFilter {...navBarProps.globalFilterRows} />
+            </Grid>
+            <Grid item xs="auto">
+              <DataviewFilters table={table} />
+            </Grid>
+            <Grid item xs="auto">
+              <PaginationTable table={table} />
+            </Grid>
+          </Grid>
         </Toolbar>
       </AppBar>
       {/** Hacky to stick the bar without move one row before the header*/}