@dexteel/mesf-core 7.15.3 → 7.16.1

package/.github/workflows/publish-to-npm.yaml

@@ -7,28 +7,39 @@ on:
       - next
       - next-ng
       - v7
+  workflow_dispatch: # Allow manual trigger from any branch
+
+permissions:
+  contents: read
+  id-token: write # Required for npm Trusted Publishing (OIDC)
+
 jobs:
   publish:
-    if: github.event.pull_request.merged == true && startsWith(github.event.pull_request.head.ref, 'release-please')
+    if: >-
+      github.event_name == 'workflow_dispatch' ||
+      (github.event.pull_request.merged == true && startsWith(github.event.pull_request.head.ref, 'release-please'))
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 'lts/hydrogen'  # Adjust this to your Node.js version
-          registry-url: 'https://registry.npmjs.org'
+          node-version: 'lts/jod' # Node 22 LTS
+      - name: Upgrade npm for Trusted Publishing
+        run: |
+          npm install -g npm@latest
+          npm --version
+          npm config set registry https://registry.npmjs.org/
       - name: Install dependencies
         run: npm install
       - name: Build
         run: npm run build
       - name: Publish to npm
         run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        # No NODE_AUTH_TOKEN needed — uses OIDC Trusted Publishing
       - name: Read package.json version
         id: package-version
-        run: echo "::set-output name=version::$(node -p "require('./package.json').version")"
+        run: echo "version=$(node -p "require('./package.json').version")" >> "$GITHUB_OUTPUT"
       - name: Push Notification to Google Workspace
         run: |
           curl -X POST "https://chat.googleapis.com/v1/spaces/AAAA4hvxkZc/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=_DSEU_3n-CC5ZDK2nKNfabm2X_M_IcIAqQxenkYgDZk" \

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "7.15.3"
+  ".": "7.16.1"
 }

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [7.16.1](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.16.0...@dexteel/mesf-core-v7.16.1) (2026-03-24)
+
+
+### Bug Fixes
+
+* migrate npm publish to OIDC Trusted Publishing and update docs ([e759e41](https://github.com/dexteel/mesf-core-frontend/commit/e759e41ed5ccaa535fc79a92f162e934b46a60ad))
+
+## [7.16.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.15.4...@dexteel/mesf-core-v7.16.0) (2026-03-24)
+
+
+### Features
+
+* enhance navbar experience ([06626e9](https://github.com/dexteel/mesf-core-frontend/commit/06626e9b2fe1b93127771af2eb1dc74b1c2c6cf3))
+
+## [7.15.4](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.15.3...@dexteel/mesf-core-v7.15.4) (2026-03-24)
+
+
+### Bug Fixes
+
+* share reusable navbar menubar behavior ([#628](https://github.com/dexteel/mesf-core-frontend/issues/628)) ([3156cf2](https://github.com/dexteel/mesf-core-frontend/commit/3156cf28acfa9d2dc0cffde9ab779b14c59d6c4f))
+
 ## [7.15.3](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.15.2...@dexteel/mesf-core-v7.15.3) (2026-03-10)
 
 

package/CLAUDE.md

@@ -11,7 +11,8 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ### Code Quality
 - `npx @biomejs/biome check --write ./src` - Format and organize imports with Biome
-- Pre-commit hook automatically runs Biome formatting on staged files
+- `npm run type-check` - Run TypeScript type checking without emitting
+- Pre-commit hook (via Husky) automatically runs Biome formatting on staged files
 
 ## Architecture Overview
 
@@ -40,7 +41,7 @@ This is `@dexteel/mesf-core`, a React component library built as an NPM package
 
 - **src/components/** - Reusable UI components organized by domain
   - `navigation/` - Header, menu components
-  - `modals/` - Dialog components  
+  - `modals/` - Dialog components
   - `shared/` - Common utility components
 
 - **src/configuration/** - Admin and configuration modules
@@ -57,30 +58,41 @@ This is `@dexteel/mesf-core`, a React component library built as an NPM package
 - **src/services/** - API communication layer
 - **src/utils/** - Utility functions and helpers
 - **src/controls/** - Form controls and input components
+- **src/models/** - TypeScript type definitions and interfaces
+- **src/pages/** - Page-level components
+- **src/routes/** - Route configuration
+- **src/reducers/** - Redux reducers
+- **src/account/** - Account-related components
+- **src/helmet/** - React Helmet (meta tag) management
+- **src/css/** - Stylesheets and theme configuration
 
 ### Technology Stack
 
-**Core Framework**: React 17 with TypeScript
-**Build Tool**: Rollup with TypeScript plugin
-**Styling**: Material-UI v4 with custom theme support
+**Core Framework**: React 18 with TypeScript 5
+**Build Tool**: Rollup 2 with rollup-plugin-typescript2
+**Styling**: MUI v6 (`@mui/material`, `@mui/lab`, `@mui/styles`) with Emotion
 **State**: Redux Toolkit for complex state, React Context for simpler state
-**Authentication**: Azure MSAL for Microsoft authentication
-**Data Visualization**: Nivo charts, Chart.js with react-chartjs-2
-**Grid Component**: AG Grid (Enterprise features available)
-**Date Handling**: Moment.js with timezone support
+**Authentication**: Azure MSAL (`@azure/msal-browser`, `@azure/msal-react`)
+**Data Visualization**: Chart.js 4 with react-chartjs-2, ECharts 6
+**Grid Component**: AG Grid 33 (Community + Enterprise), MUI X Data Grid v7
+**Date Handling**: Moment.js with moment-timezone, date-fns-tz
+**Routing**: React Router DOM v6
+**Real-time**: SignalR 8 (`@microsoft/signalr`)
 
 ### Key Dependencies
 
 The library has extensive peer dependencies that consuming applications must provide:
-- Material-UI components and theming
-- AG Grid for data tables
-- Chart libraries (Nivo, Chart.js)
-- React Router DOM for navigation
-- Redux Toolkit for state management
+- MUI v6 components, icons, lab, styles, and Emotion styling
+- MUI X v7 (Data Grid, Date Pickers, Tree View)
+- AG Grid 33 (Community + Enterprise + React bindings)
+- React 18 and React DOM 18
+- React Router DOM v6
+- Redux Toolkit
+- date-fns (v3 or v4)
 
 ### Development Notes
 
-**Styling**: Uses Material-UI v4 theming system. Custom theme exports available via `src/css/themeMESF`.
+**Styling**: Uses MUI v6 theming system with Emotion. Custom theme exports available via `src/css/themeMESF`.
 
 **Internationalization**: Components support timezone handling via `moment-timezone` and `date-fns-tz`.
 

package/README.md

@@ -1,19 +1,76 @@
-# For Changing passwords, mesf-core is needed:
-https://github.com/dexteel/mesf-core/commit/02877a88ab283f2a64cd1a0bc85bdb7c099935f2
+# @dexteel/mesf-core
 
-# How to install project in subfolders
+A React component library for Dexteel Manufacturing Execution Systems (MES). Provides shared UI components, context providers, services, hooks, and utilities used across Dexteel frontend applications.
+
+## Installation
+
+```bash
+npm install @dexteel/mesf-core
+```
+
+### Peer Dependencies
+
+This library requires the consuming application to provide the following:
+
+```json
+{
+  "@emotion/react": "^11.14.0",
+  "@emotion/styled": "^11.14.1",
+  "@mui/icons-material": "latest-v6",
+  "@mui/lab": "latest-v6",
+  "@mui/material": "latest-v6",
+  "@mui/styles": "latest-v6",
+  "@mui/x-data-grid": "latest-v7",
+  "@mui/x-date-pickers": "latest-v7",
+  "@mui/x-tree-view": "latest-v7",
+  "@react-spring/web": "^9.7.5",
+  "@reduxjs/toolkit": "^1.6.2",
+  "ag-grid-community": "^33.3.1",
+  "ag-grid-enterprise": "^33.3.1",
+  "ag-grid-react": "^33.3.1",
+  "date-fns": "^3.0.0 || ^4.0.0",
+  "moment": "^2.29.1",
+  "react": "^18.3.1",
+  "react-dom": "^18.3.1",
+  "react-router-dom": "^6.30.1"
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build for production
+npm run build
+
+# Build in watch mode
+npm run watch
+# or
+npm start
+
+# Type checking
+npm run type-check
+
+# Format and organize imports
+npx @biomejs/biome check --write ./src
+```
+
+## Deploying in Subfolders
+
+When deploying a consuming application into a subfolder, edit the following file in the deployed build:
 
-In deployed version, edit the following file:
 ```
 DEPLOY_FOLDER/ClientApp/dist/index.html
 ```
-Change the ``<base />`` tag to the desired base url
 
-![img.png](img.png)
-## DON'T FORGET THE TRAILING SLASH
-## EXAMPLES:
-- ``<base href="/" />`` (default)
-- ``<base href="/old/" />`` 
-- ``<base href="/testing/" />``
-- ``<base href="/old/testing/" />``
+Change the `<base />` tag to the desired base URL.
+
+**Important:** Always include a trailing slash.
 
+Examples:
+- `<base href="/" />` (default)
+- `<base href="/old/" />`
+- `<base href="/testing/" />`
+- `<base href="/old/testing/" />`

package/dist/MESFMain.d.ts

@@ -1,10 +1,11 @@
 import React, { type ReactNode } from "react";
+import type { NavbarRendererProps } from "./components/navigation/NavbarMenuBar";
 import { ConfigurationsType } from "./configurationMenu";
 import type { LogbookSettingsState } from "./reducers/LogbookSettingsReducer";
 interface Props {
     authentication: any;
     routes: () => ReactNode;
-    navbar: () => ReactNode;
+    navbar: React.ComponentType<NavbarRendererProps>;
     navbarTitle?: string;
     configurations: ConfigurationsType;
     showAreaSelector?: boolean;

package/dist/components/navigation/NavbarMenuBar.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { type LinkProps } from "react-router-dom";
+type To = LinkProps["to"];
+export interface NavbarMenuItemConfig {
+    label: string;
+    to: To;
+    permission?: string;
+}
+export interface NavbarMenuConfig {
+    id: string;
+    label: string;
+    to?: To;
+    items: NavbarMenuItemConfig[];
+    permission?: string;
+}
+export interface NavbarRendererProps {
+    isMobile?: boolean;
+    closeDrawer?: () => void;
+}
+interface NavbarMenuBarProps extends NavbarRendererProps {
+    menus: NavbarMenuConfig[];
+    hoverSwitchDelayMs?: number;
+}
+export declare function NavbarMenuBar({ menus, isMobile, closeDrawer, hoverSwitchDelayMs, }: NavbarMenuBarProps): React.JSX.Element;
+export {};

package/dist/globalContext.d.ts

@@ -1,6 +1,7 @@
 import React, { type ReactNode } from "react";
+import type { NavbarRendererProps } from "./components/navigation/NavbarMenuBar";
 import { ConfigurationsType } from "./configurationMenu";
 declare const RouterContext: React.Context<() => ReactNode>;
 declare const ConfigurationContext: React.Context<ConfigurationsType>;
-declare const NavbarContext: React.Context<() => ReactNode>;
+declare const NavbarContext: React.Context<React.ComponentType<NavbarRendererProps>>;
 export { RouterContext, ConfigurationContext, NavbarContext };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { LicenseManager } from "ag-grid-enterprise";
 export * from "./account";
 export * from "./components/modals/error-modal";
 export * from "./components/modals/modal.mesf";
+export * from "./components/navigation/NavbarMenuBar";
 export * from "./components/navigation/TimeAndUserMenu";
 export * from "./components/shared/buttons/button-with-loading";
 export { ExcelIcon } from "./components/shared/icons/ExcelIcon";

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 export * from '@microsoft/signalr';
 export { LicenseManager } from 'ag-grid-enterprise';
-import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, Box, MenuItem, ListItemIcon, createTheme, TextField, Alert as Alert$2, useTheme, InputAdornment, Popover, MenuList, ListItemText, alpha, Dialog as Dialog$1, Paper, List, ListItem, Chip, SvgIcon, Typography as Typography$1, Checkbox, IconButton as IconButton$1, CircularProgress, FormControl, FormHelperText, FormControlLabel, Snackbar, DialogContentText, Badge, InputLabel, Select, Input, Divider, Card, CardContent, CardActions, Collapse, Tooltip, CssBaseline, AppBar, Toolbar, Container, Menu, Switch, Autocomplete, Hidden, Drawer, Grid, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, useMediaQuery, ListSubheader, ListItemButton, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
+import { styled, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Grid2, Button, Box, MenuItem, ListItemIcon, createTheme, TextField, Alert as Alert$2, useTheme, InputAdornment, Popover, MenuList, ListItemText, alpha, Dialog as Dialog$1, Paper, List, ListItem, Chip, SvgIcon, Typography as Typography$1, Checkbox, IconButton as IconButton$1, CircularProgress, FormControl, FormHelperText, FormControlLabel, Snackbar, DialogContentText, Badge, InputLabel, Select, Input, Divider, Card, CardContent, CardActions, Collapse, Tooltip, CssBaseline, AppBar, Toolbar, Container, Menu, Switch, Autocomplete, useMediaQuery, Drawer, Grid, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, ListSubheader, ListItemButton, StyledEngineProvider, ThemeProvider, ListItemSecondaryAction } from '@mui/material';
 import { useMutation, useQuery, useQueryClient, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import * as React from 'react';
 import React__default, { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, Component, lazy, Suspense } from 'react';
@@ -25,7 +25,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import FindInPageIcon from '@mui/icons-material/FindInPage';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
-import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, Cloud, Square as Square$1, Timeline, Send, Menu as Menu$1, People, Storage, Group, Assignment, Chat, ViewList, Build, Settings as Settings$2, Code as Code$1, FastRewind, FastForward, ZoomIn, Restore, Lock, Create, Delete, Folder, InsertChart, Search, PlaylistAdd, DragIndicator, Save, AttachFile, CloudUpload, GetApp } from '@mui/icons-material';
+import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight, Cloud, ExpandLess, ExpandMore, Square as Square$1, Timeline, Send, Menu as Menu$1, People, Storage, Group, Assignment, Chat, ViewList, Build, Settings as Settings$2, Code as Code$1, FastRewind, FastForward, ZoomIn, Restore, Lock, Create, Delete, Folder, InsertChart, Search, PlaylistAdd, DragIndicator, Save, AttachFile, CloudUpload, GetApp } from '@mui/icons-material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import FormatListBulletedSharpIcon from '@mui/icons-material/FormatListBulletedSharp';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
@@ -6687,6 +6687,175 @@ function Logout() {
             React__default.createElement(Typography$1, { variant: "h6" }, "Logging out..."))));
 }
 
+function NavbarMenuBar({ menus, isMobile = false, closeDrawer, hoverSwitchDelayMs = 100, }) {
+    const hasPermissionTo = useHasPermission();
+    const [openMenuId, setOpenMenuId] = useState(null);
+    const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+    const triggerRefs = useRef({});
+    const hoverTimeoutRef = useRef(null);
+    const visibleMenus = useMemo(() => {
+        return menus
+            .filter((menu) => !menu.permission || hasPermissionTo(menu.permission))
+            .map((menu) => (Object.assign(Object.assign({}, menu), { items: menu.items.filter((item) => !item.permission || hasPermissionTo(item.permission)) })))
+            .filter((menu) => menu.items.length > 0 || Boolean(menu.to));
+    }, [hasPermissionTo, menus]);
+    const clearHoverTimeout = () => {
+        if (hoverTimeoutRef.current !== null) {
+            window.clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+    };
+    const focusTrigger = (menuId) => {
+        var _a;
+        (_a = triggerRefs.current[menuId]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const getAdjacentMenu = (menuId, direction) => {
+        var _a;
+        const currentIndex = visibleMenus.findIndex((menu) => menu.id === menuId);
+        if (currentIndex === -1) {
+            return null;
+        }
+        const nextIndex = (currentIndex + direction + visibleMenus.length) % visibleMenus.length;
+        return (_a = visibleMenus[nextIndex]) !== null && _a !== void 0 ? _a : null;
+    };
+    const openMenu = (menuId, anchorEl) => {
+        var _a;
+        clearHoverTimeout();
+        setOpenMenuId(menuId);
+        setMenuAnchorEl((_a = anchorEl !== null && anchorEl !== void 0 ? anchorEl : triggerRefs.current[menuId]) !== null && _a !== void 0 ? _a : null);
+    };
+    const closeMenu = () => {
+        clearHoverTimeout();
+        setOpenMenuId(null);
+        setMenuAnchorEl(null);
+    };
+    useEffect(() => () => clearHoverTimeout(), []);
+    useEffect(() => {
+        if (!openMenuId) {
+            return;
+        }
+        const handlePointerDown = (event) => {
+            const target = event.target;
+            const trigger = triggerRefs.current[openMenuId];
+            const menuPaper = document.querySelector(`#${openMenuId}-menu .MuiPaper-root`);
+            if (target &&
+                ((trigger && trigger.contains(target)) ||
+                    (menuPaper && menuPaper.contains(target)))) {
+                return;
+            }
+            closeMenu();
+        };
+        document.addEventListener("mousedown", handlePointerDown, true);
+        document.addEventListener("touchstart", handlePointerDown, true);
+        return () => {
+            document.removeEventListener("mousedown", handlePointerDown, true);
+            document.removeEventListener("touchstart", handlePointerDown, true);
+        };
+    }, [openMenuId]);
+    const handleMenuOpen = (event, menuId) => {
+        if (openMenuId === menuId) {
+            closeMenu();
+            return;
+        }
+        openMenu(menuId, event.currentTarget);
+    };
+    const handleMenuHover = (event, menuId) => {
+        if (isMobile || !openMenuId || openMenuId === menuId) {
+            return;
+        }
+        clearHoverTimeout();
+        hoverTimeoutRef.current = window.setTimeout(() => {
+            openMenu(menuId, event.currentTarget);
+        }, hoverSwitchDelayMs);
+    };
+    const handleMenuKeyDown = (event, menu) => {
+        switch (event.key) {
+            case "Enter":
+            case " ":
+            case "ArrowDown": {
+                if (!menu.items.length) {
+                    return;
+                }
+                event.preventDefault();
+                openMenu(menu.id, event.currentTarget);
+                break;
+            }
+            case "ArrowRight":
+            case "ArrowLeft": {
+                event.preventDefault();
+                const adjacentMenu = getAdjacentMenu(menu.id, event.key === "ArrowRight" ? 1 : -1);
+                if (!adjacentMenu) {
+                    return;
+                }
+                focusTrigger(adjacentMenu.id);
+                if (openMenuId && adjacentMenu.items.length) {
+                    openMenu(adjacentMenu.id);
+                }
+                break;
+            }
+            case "Escape": {
+                if (!openMenuId) {
+                    return;
+                }
+                event.preventDefault();
+                closeMenu();
+                focusTrigger(menu.id);
+                break;
+            }
+        }
+    };
+    return (React__default.createElement(React__default.Fragment, null, visibleMenus.map((menu) => {
+        var _a;
+        const isMenuOpen = openMenuId === menu.id;
+        const buttonId = `${menu.id}-trigger`;
+        return menu.items.length > 0 ? (React__default.createElement(React__default.Fragment, { key: menu.id },
+            React__default.createElement(Button, { ref: (node) => {
+                    triggerRefs.current[menu.id] = node;
+                }, id: buttonId, "aria-controls": `${menu.id}-menu`, "aria-haspopup": "true", "aria-expanded": isMenuOpen ? "true" : undefined, onClick: (event) => handleMenuOpen(event, menu.id), onMouseEnter: (event) => handleMenuHover(event, menu.id), onMouseLeave: clearHoverTimeout, onKeyDown: (event) => handleMenuKeyDown(event, menu), sx: {
+                    marginRight: (theme) => theme.spacing(2),
+                    color: "white",
+                    display: "flex",
+                    alignItems: "center",
+                    whiteSpace: "nowrap",
+                } },
+                menu.label,
+                isMenuOpen ? (React__default.createElement(ExpandLess, { sx: { marginLeft: (theme) => theme.spacing(0.5) } })) : (React__default.createElement(ExpandMore, { sx: { marginLeft: (theme) => theme.spacing(0.5) } }))),
+            React__default.createElement(Menu, { id: `${menu.id}-menu`, anchorEl: isMenuOpen ? menuAnchorEl : null, hideBackdrop: true, disableScrollLock: true, keepMounted: true, open: isMenuOpen, onClose: closeMenu, sx: {
+                    pointerEvents: "none",
+                    "& .MuiPaper-root": {
+                        pointerEvents: "auto",
+                    },
+                }, MenuListProps: {
+                    "aria-labelledby": buttonId,
+                    autoFocusItem: isMenuOpen,
+                }, anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "center",
+                }, transformOrigin: {
+                    vertical: "top",
+                    horizontal: "center",
+                } }, menu.items.map((item, index) => (React__default.createElement(MenuItem, { key: `${menu.id}-item-${item.label}-${index}`, component: Link, to: item.to, onClick: () => {
+                    closeMenu();
+                    closeDrawer === null || closeDrawer === void 0 ? void 0 : closeDrawer();
+                }, sx: {
+                    textDecoration: "none",
+                    color: "inherit",
+                } },
+                React__default.createElement(Typography$1, null, item.label))))))) : (React__default.createElement(Button, { key: menu.id, ref: (node) => {
+                triggerRefs.current[menu.id] = node;
+            }, id: buttonId, component: Link, to: (_a = menu.to) !== null && _a !== void 0 ? _a : "#", onClick: () => {
+                closeMenu();
+                closeDrawer === null || closeDrawer === void 0 ? void 0 : closeDrawer();
+            }, onKeyDown: (event) => handleMenuKeyDown(event, menu), sx: {
+                marginRight: (theme) => theme.spacing(2),
+                color: "white",
+                display: "flex",
+                alignItems: "center",
+                whiteSpace: "nowrap",
+            } }, menu.label));
+    })));
+}
+
 const TimeAndUserMenu = () => {
     const { getUserName } = useToken();
     const [userName, setUserName] = useState(getUserName());
@@ -9667,7 +9836,7 @@ const ConfigurationContext = createContext([
     [],
     () => React__default.createElement(React__default.Fragment, null),
 ]);
-const NavbarContext = createContext(() => React__default.createElement(React__default.Fragment, null));
+const NavbarContext = createContext(() => (React__default.createElement(React__default.Fragment, null)));
 
 const AreaSelector$1 = lazy(() => Promise.resolve().then(function () { return areaSelector; }).then((mod) => ({
     default: mod.AreaSelector,
@@ -9677,7 +9846,8 @@ function Header({ showAreaSelector = false, showTrendingsV2Icon = true, navbarTi
     const CustomNavbar = useContext(NavbarContext);
     const [drawerOpen, setDrawerOpen] = useState(false);
     const hasPermissionTo = useHasPermission();
-    useUserContext();
+    const theme = useTheme();
+    const isCompactNavigation = useMediaQuery(theme.breakpoints.down("lg"));
     const handleDrawerToggle = () => {
         setDrawerOpen(!drawerOpen);
     };
@@ -9701,19 +9871,23 @@ function Header({ showAreaSelector = false, showTrendingsV2Icon = true, navbarTi
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(AppBar, { position: "static", sx: {
                 backgroundColor: (theme) => theme.palette.primary.main,
+                zIndex: (theme) => theme.zIndex.modal + 1,
             } },
-            React__default.createElement(Toolbar, { sx: { backgroundColor: (theme) => theme.palette.primary.main } },
-                React__default.createElement(Hidden, { mdUp: true },
-                    React__default.createElement(IconButton$1, { edge: "start", sx: {
-                            flexGrow: 0,
-                            marginRight: (theme) => theme.spacing(2),
-                            textDecoration: "none",
-                            color: "white",
-                            textWrap: "nowrap",
-                        }, color: "inherit", "aria-label": "menu", onClick: handleDrawerToggle },
-                        React__default.createElement(MenuIcon, null))),
+            React__default.createElement(Toolbar, { sx: {
+                    backgroundColor: (theme) => theme.palette.primary.main,
+                    minWidth: 0,
+                    overflowX: "hidden",
+                } },
+                isCompactNavigation && (React__default.createElement(IconButton$1, { edge: "start", sx: {
+                        flexShrink: 0,
+                        marginRight: (theme) => theme.spacing(2),
+                        textDecoration: "none",
+                        color: "white",
+                        textWrap: "nowrap",
+                    }, color: "inherit", "aria-label": "menu", onClick: handleDrawerToggle },
+                    React__default.createElement(MenuIcon, null))),
                 React__default.createElement(Typography$1, { variant: "h6", component: Link, to: "/home", sx: {
-                        flexGrow: 0,
+                        flexShrink: 0,
                         marginRight: (theme) => theme.spacing(2),
                         textDecoration: "none",
                         color: "white",
@@ -9722,16 +9896,21 @@ function Header({ showAreaSelector = false, showTrendingsV2Icon = true, navbarTi
                 React__default.createElement(Box, { sx: {
                         display: "flex",
                         flexGrow: 1,
+                        minWidth: 0,
+                        overflow: "hidden",
                         "& a": {
                             color: "white",
                         },
-                    } },
-                    React__default.createElement(Hidden, { smDown: true },
-                        React__default.createElement(CustomNavbar, { closeDrawer: handleDrawerToggle }))),
+                        "& > *": {
+                            minWidth: 0,
+                            maxWidth: "100%",
+                        },
+                    } }, !isCompactNavigation && (React__default.createElement(CustomNavbar, { closeDrawer: handleDrawerToggle }))),
                 React__default.createElement(Box, { sx: {
                         display: "flex",
                         alignItems: "center",
                         color: "white",
+                        flexShrink: 0,
                     } },
                     showTrendingsV2Icon && (React__default.createElement(Tooltip, { title: "Trendings V2 (ECharts)", placement: "bottom", arrow: true, enterDelay: 1500 },
                         React__default.createElement(IconButton$1, { color: "inherit", component: Link, to: "/trendings-v2" },
@@ -9746,8 +9925,11 @@ function Header({ showAreaSelector = false, showTrendingsV2Icon = true, navbarTi
                 width: 250,
                 "& .MuiDrawer-paper": {
                     width: 250,
-                    marginTop: 56, // Height of AppBar on mobile
-                    height: `calc(100% - 56px)`,
+                    top: { xs: 56, sm: 64 },
+                    height: {
+                        xs: "calc(100% - 56px)",
+                        sm: "calc(100% - 64px)",
+                    },
                     backgroundColor: (theme) => theme.palette.grey[100], // Light grey background
                     // Alternatively, you can use a specific color:
                     // backgroundColor: '#f5f5f5',
@@ -20267,5 +20449,5 @@ var areaSelector = /*#__PURE__*/Object.freeze({
     AreaSelector: AreaSelector
 });
 
-export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CreateNewAssetDialog, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ENTRY_INITIAL_VALUES$1 as ENTRY_INITIAL_VALUES, EditAssetDialog, ErrorModal, ExcelIcon, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HelmetDexteel, IntegerFormatter, LogbookSettingsInitialState, LogbookSettingsProvider, Login, Logout, LongFilterPanel, MESApiService, MESFLogbookEntry$1 as MESFLogbookEntry, MESFLogbookReport$1 as MESFLogbookReport, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NumberFormatter, RemoveAssetDialog, SPExecutorPage, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getEntries$1 as getEntries, getError, getMomentTz, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, logbookNavbar, logbookRoutesMESF, renewToken, routeLogbookEntry$1 as routeLogbookEntry, routeLogbookReport, useSearchAssets as searchAssets, sectionLogbookNavbar, sectionLogbookRoutesMESF, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useEntries$1 as useEntries, useFrontendVersionCheck, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useToken, useUTLSettingsContext, useUserContext };
+export { Account, AssetProvider, AssetTreePicker, AuthContext, AuthProvider, ButtonWithLoading, ChangePassword, CheckBoxControl, Configuration$1 as Configuration, ContextMenu$1 as ContextMenu, ContextMenuMESFProvider, CreateNewAssetDialog, CurrencyFormatter, DataGridControl, DateFormatter, DateTimeFormatter, ENTRY_INITIAL_VALUES$1 as ENTRY_INITIAL_VALUES, EditAssetDialog, ErrorModal, ExcelIcon, FetchError, FilterPanel, GenericPanel, GenericTable, GetCrewColor, GetShiftColor, HelmetDexteel, IntegerFormatter, LogbookSettingsInitialState, LogbookSettingsProvider, Login, Logout, LongFilterPanel, MESApiService, MESFLogbookEntry$1 as MESFLogbookEntry, MESFLogbookReport$1 as MESFLogbookReport, MESFMain, MESSAGE_API, MESSAGE_ERRORS, MasterDetailPanel, MesfModal, ModalTreeFilterControl, MultipleSelectorControl, NavbarMenuBar, NumberFormatter, RemoveAssetDialog, SPExecutorPage, ShiftDayNavigatorControl, ShiftNavigatorProvider, ShiftPeriodNavigatorControl, SimplePasswordControl, SimpleSelectorControl, TimeAndUserMenu, TimeFormatter, TimeService, TreePickerControl, TreePickerControlV2, USER_LABELS, UTLSettingsProvider, UserProvider, axiosInstance, deleteUser, dxtServerTimeZone, dxtToLocalServerTime, dxtToUTC, formatNumber, getAuthTypes, getCrewStyle, getDataUser, getEntries$1 as getEntries, getError, getMomentTz, getShiftByParameters, getShiftStyle, getShiftsRangeByParameters, getTokenFromLS, getUserPermissionsFromAPI, getUsers, logbookNavbar, logbookRoutesMESF, renewToken, routeLogbookEntry$1 as routeLogbookEntry, routeLogbookReport, useSearchAssets as searchAssets, sectionLogbookNavbar, sectionLogbookRoutesMESF, setPassword, setProfilesToUser, themeDXT, themeMESF, upsertUser, useAssetContext, useContextMenuMESF, useEntries$1 as useEntries, useFrontendVersionCheck, useHasPermission, useHasProfile, useLogbookSettings, useMesfRealtime, useShiftNavigator, useShiftNavigatorManager, useToken, useUTLSettingsContext, useUserContext };
 //# sourceMappingURL=index.esm.js.map