diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css
index 3b7066a0..13bbb657 100644
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@@ -1734,3 +1734,7 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
border: 1px solid #000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
+
+.no-navigation-labels.ant-menu-horizontal .ant-menu-item {
+ padding: 0 5px;
+}
diff --git a/src/components/Dashboard/Management/Settings.jsx b/src/components/Dashboard/Management/Settings.jsx
index ecb918b1..a521cc3b 100644
--- a/src/components/Dashboard/Management/Settings.jsx
+++ b/src/components/Dashboard/Management/Settings.jsx
@@ -28,8 +28,15 @@ const engineLabel = (engine) => {
}
const Settings = () => {
- const { isDarkMode, isCompact, isSystem, setThemeMode, setDensityMode } =
- useThemeContext()
+ const {
+ isDarkMode,
+ isCompact,
+ isSystem,
+ setThemeMode,
+ setDensityMode,
+ showNavigationLabels,
+ setShowNavigationLabels
+ } = useThemeContext()
const { fetchAppUpdateBranches } = useContext(ApiServerContext)
const { isElectron, getAppSettings, setAppSettings, getAppEngine } =
useContext(ElectronContext)
@@ -77,11 +84,16 @@ const Settings = () => {
if (settingsLoading || isEditing) return
if (appSettings.theme) setThemeMode(appSettings.theme)
if (appSettings.density) setDensityMode(appSettings.density)
+ if (appSettings.showNavigationLabels !== undefined) {
+ setShowNavigationLabels(appSettings.showNavigationLabels)
+ }
}, [
appSettings.density,
+ appSettings.showNavigationLabels,
appSettings.theme,
isEditing,
setDensityMode,
+ setShowNavigationLabels,
setThemeMode,
settingsLoading
])
@@ -137,6 +149,8 @@ const Settings = () => {
const currentThemeValue = getCurrentThemeValue()
const currentDensityValue = isCompact ? 'compact' : 'comfortable'
+ const currentShowNavigationLabels =
+ appSettings.showNavigationLabels ?? showNavigationLabels ?? false
const currentBranch =
appSettings.appUpdateBranch ||
(branches.includes(DEFAULT_UPDATE_BRANCH) ? DEFAULT_UPDATE_BRANCH : null) ||
@@ -154,7 +168,8 @@ const Settings = () => {
currentBranch === 'Not configured' ? undefined : currentBranch,
appUpdateEngine: currentEngine,
theme: currentThemeValue,
- density: currentDensityValue
+ density: currentDensityValue,
+ showNavigationLabels: currentShowNavigationLabels
})
setIsEditing(true)
}
@@ -175,6 +190,7 @@ const Settings = () => {
...appSettings,
theme: draftSettings.theme,
density: draftSettings.density,
+ showNavigationLabels: Boolean(draftSettings.showNavigationLabels),
...(isElectron
? {
appUpdateBranch: draftSettings.appUpdateBranch,
@@ -197,13 +213,15 @@ const Settings = () => {
settings: {
...(previous?.settings || {}),
theme: draftSettings.theme,
- density: draftSettings.density
+ density: draftSettings.density,
+ showNavigationLabels: Boolean(draftSettings.showNavigationLabels)
}
}))
}
setThemeMode(draftSettings.theme)
setDensityMode(draftSettings.density)
+ setShowNavigationLabels(draftSettings.showNavigationLabels)
setAppSettingsState(nextSettings)
setDraftSettings(nextSettings)
setIsEditing(false)
@@ -311,6 +329,29 @@ const Settings = () => {
{isCompact ? 'Compact' : 'Comfortable'}
)}
+
+ {isEditing ? (
+
+ ) : (
+
+ {currentShowNavigationLabels ? 'Show' : 'Hide'}
+
+ )}
+
{isElectron && (
diff --git a/src/components/Dashboard/common/DashboardNavigation.jsx b/src/components/Dashboard/common/DashboardNavigation.jsx
index 7a1e5636..ee8940e7 100644
--- a/src/components/Dashboard/common/DashboardNavigation.jsx
+++ b/src/components/Dashboard/common/DashboardNavigation.jsx
@@ -48,6 +48,7 @@ import {
} from '../../../database/Sidebars'
import { useAppUpdateContext } from '../context/AppUpdateContext'
+import { useThemeContext } from '../context/ThemeContext'
const { Text } = Typography
@@ -56,6 +57,7 @@ const DashboardNavigation = () => {
const { showSpotlight } = useContext(SpotlightContext)
const { connecting, connected } = useContext(ApiServerContext)
const { authenticated } = useContext(AuthContext)
+ const { showNavigationLabels, setShowNavigationLabels } = useThemeContext()
const { toggleNotificationCenter, unreadCount } =
useContext(NotificationContext)
const [apiServerState, setApiServerState] = useState('disconnected')
@@ -71,50 +73,81 @@ const DashboardNavigation = () => {
const {
platform,
isElectron,
+ getAppSettings,
setSidebarViewMenu,
isFullScreen,
isMaximized
} = useContext(ElectronContext)
const { availableUpdate, checkForUpdates } = useAppUpdateContext()
+
+ useEffect(() => {
+ const hydrateNavigationLabels = async () => {
+ const settings = isElectron
+ ? await getAppSettings()
+ : userProfile?.settings || {}
+ if (settings?.showNavigationLabels !== undefined) {
+ setShowNavigationLabels(settings.showNavigationLabels)
+ }
+ }
+
+ void hydrateNavigationLabels()
+ }, [
+ getAppSettings,
+ isElectron,
+ setShowNavigationLabels,
+ userProfile?.settings
+ ])
+
const includeDev = import.meta.env.DEV
- const mainMenuItems = useMemo(
- () =>
- [
- {
- key: 'production',
- label: 'Production',
- className: 'electrobun-webkit-app-region-no-drag',
- icon:
- },
- {
- key: 'inventory',
- label: 'Inventory',
- className: 'electrobun-webkit-app-region-no-drag',
- icon:
- },
- {
- key: 'sales',
- label: 'Sales',
- className: 'electrobun-webkit-app-region-no-drag',
- icon:
- },
- {
- key: 'finance',
- label: 'Finance',
- className: 'electrobun-webkit-app-region-no-drag',
- icon:
- },
- {
- key: 'management',
- label: 'Management',
- className: 'electrobun-webkit-app-region-no-drag',
- icon:
- }
- ].filter((item) =>
- isSidebarSectionVisible(item.key, { includeDev, userProfile })
- ),
- [includeDev, userProfile]
- )
+ const mainMenuItems = useMemo(() => {
+ const iconStyles = {
+ fontSize: !showNavigationLabels ? '16px' : undefined,
+ marginLeft: !showNavigationLabels ? '10px' : undefined
+ }
+ const navigationIcon = (icon, label) =>
+ showNavigationLabels ? (
+ icon
+ ) : (
+
+ {icon}
+
+ )
+
+ return [
+ {
+ key: 'production',
+ label: 'Production',
+ className: 'electrobun-webkit-app-region-no-drag',
+ icon: navigationIcon(, 'Production')
+ },
+ {
+ key: 'inventory',
+ label: 'Inventory',
+ className: 'electrobun-webkit-app-region-no-drag',
+ icon: navigationIcon(, 'Inventory')
+ },
+ {
+ key: 'sales',
+ label: 'Sales',
+ className: 'electrobun-webkit-app-region-no-drag',
+ icon: navigationIcon(, 'Sales')
+ },
+ {
+ key: 'finance',
+ label: 'Finance',
+ className: 'electrobun-webkit-app-region-no-drag',
+ icon: navigationIcon(, 'Finance')
+ },
+ {
+ key: 'management',
+ label: 'Management',
+ className: 'electrobun-webkit-app-region-no-drag',
+ icon: navigationIcon(, 'Management')
+ }
+ ].filter((item) =>
+ isSidebarSectionVisible(item.key, { includeDev, userProfile })
+ )
+ }, [includeDev, showNavigationLabels, userProfile])
const [userPopoverOpen, setUserPopoverOpen] = useState(false)
@@ -219,8 +252,12 @@ const DashboardNavigation = () => {
{showControls && (