adds className prop to nav bar menus

webapp/packages/core-blocks/src/Menu/Menu.tsx

@@ -1,6 +1,6 @@
 /*
  * CloudBeaver - Cloud Database Manager
- * Copyright (C) 2020-2024 DBeaver Corp and others
+ * Copyright (C) 2020-2025 DBeaver Corp and others
  *
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
@@ -33,6 +33,7 @@ interface IMenuProps extends React.ButtonHTMLAttributes<any> {
   rtl?: boolean;
   hasBindings?: boolean;
   panelAvailable?: boolean;
+  menuPanelClassName?: string;
   getHasBindings?: () => boolean;
   onVisibleSwitch?: (visible: boolean) => void;
 }
@@ -54,6 +55,7 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
       onVisibleSwitch,
       modal,
       submenu,
+      menuPanelClassName,
       rtl,
       className,
       ...props
@@ -148,6 +150,7 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
               label={label}
               menu={menu}
               rtl={rtl}
+              className={menuPanelClassName}
               submenu={submenu}
               panelAvailable={panelAvailable}
               hasBindings={hasBindings}
@@ -179,6 +182,7 @@ export const Menu = observer<IMenuProps, HTMLButtonElement>(
           </MenuButton>
           <MenuPanel
             ref={menuPanelRef}
+            className={menuPanelClassName}
             label={label}
             menu={menu}
             rtl={rtl}

webapp/packages/core-ui/package.json

@@ -30,6 +30,7 @@
     "@cloudbeaver/core-utils": "workspace:*",
     "@cloudbeaver/core-view": "workspace:*",
     "@dbeaver/js-helpers": "workspace:^",
+    "@dbeaver/ui-kit": "workspace:*",
     "mobx": "^6",
     "mobx-react-lite": "^4",
     "react": "^19",

webapp/packages/core-ui/src/ContextMenu/ContextMenu.tsx

@@ -9,6 +9,7 @@ import { observer } from 'mobx-react-lite';
 import { forwardRef, useRef, useState } from 'react';
 
 import { getComputed, type IMenuState, Menu, useAutoLoad, useObjectRef, useTranslate } from '@cloudbeaver/core-blocks';
+import { clsx } from '@dbeaver/ui-kit';
 import { MenuActionItem } from '@cloudbeaver/core-view';
 
 import type { IContextMenuProps } from './IContextMenuProps.js';
@@ -17,7 +18,7 @@ import { MenuItemRenderer } from './MenuItemRenderer.js';
 // TODO the click doesn't work for React components as children
 export const ContextMenu = observer<IContextMenuProps, HTMLButtonElement>(
   forwardRef(function ContextMenu(
-    { contextMenuPosition, menu: menuData, disclosure, children, placement, visible, onVisibleSwitch, modal, rtl, ...props },
+    { contextMenuPosition, menu: menuData, disclosure, children, placement, visible, onVisibleSwitch, modal, rtl, className, ...props },
     ref,
   ) {
     const translate = useTranslate();
@@ -64,6 +65,7 @@ export const ContextMenu = observer<IContextMenuProps, HTMLButtonElement>(
       <Menu
         {...props}
         ref={ref}
+        className={clsx(menuData.menu.info.className, className)}
         label={translate(menuData.menu.info.label)}
         title={translate(menuData.menu.info.tooltip)}
         items={() =>
@@ -83,6 +85,7 @@ export const ContextMenu = observer<IContextMenuProps, HTMLButtonElement>(
         disabled={disabled}
         disclosure={disclosure}
         getHasBindings={handlers.hasBindings}
+        menuPanelClassName={menuData.menu.info.className}
         onVisibleSwitch={handlers.handleVisibleSwitch}
       >
         {renderingChildren}

webapp/packages/core-ui/src/ContextMenu/SubMenuElement.tsx

@@ -105,6 +105,7 @@ export const SubMenuElement = observer<ISubMenuElementProps, HTMLButtonElement>(
         panelAvailable={panelAvailable}
         disabled={disabled}
         getHasBindings={handlers.hasBindings}
+        menuPanelClassName={subMenuData.menu.info.className}
         submenu
         onVisibleSwitch={handlers.handleVisibleSwitch}
       >

webapp/packages/core-ui/tsconfig.json

@@ -7,6 +7,9 @@
     "composite": true
   },
   "references": [
+    {
+      "path": "../../../common-react/@dbeaver/ui-kit"
+    },
     {
       "path": "../../../common-typescript/@dbeaver/js-helpers"
     },

webapp/packages/core-view/src/Menu/IMenuInfo.ts

@@ -11,6 +11,7 @@ export interface IMenuInfo {
   label: string;
   icon?: string;
   tooltip?: string;
+  className?: string;
   /**
    * experimental, can be changed
    */

webapp/packages/plugin-devtools/src/menu/MENU_DEVTOOLS.ts

@@ -7,4 +7,4 @@
  */
 import { createMenu } from '@cloudbeaver/core-view';
 
-export const MENU_DEVTOOLS = createMenu('devtools', { label: 'DevTools' });
+export const MENU_DEVTOOLS = createMenu('devtools', { label: 'DevTools', className: 'topNavBarMenu' });

webapp/packages/plugin-tools-panel/src/Menu/MENU_TOOLS.ts

@@ -11,4 +11,5 @@ export const MENU_TOOLS = createMenu('tools', {
   label: 'plugin_tools_panel_menu_title',
   icon: '/icons/plugin_tools_panel_m.svg',
   tooltip: 'plugin_tools_panel_menu_title',
+  className: 'topNavBarMenu',
 });

webapp/packages/plugin-top-app-bar/src/TopNavBar/TopNavBar.tsx

@@ -26,6 +26,7 @@ import { MenuBarItemStyles, MenuBarStyles } from '@cloudbeaver/core-ui';
 import TopMenuStyles from './shared/TopMenu.module.css';
 import TopMenuBarStyles from './shared/TopMenuBar.module.css';
 import TopMenuBarItemStyles from './shared/TopMenuBarItem.module.css';
+import './shared/TopMenuCheckbox.css';
 import TopMenuItemStyles from './shared/TopMenuItem.module.css';
 import TopMenuItemElementStyles from './shared/TopMenuItemElement.module.css';
 import TopMenuPanelStyles from './shared/TopMenuPanel.module.css';

webapp/packages/plugin-top-app-bar/src/TopNavBar/shared/TopMenuCheckbox.css

@@ -0,0 +1,10 @@
+@layer components {
+  .topNavBarMenu .checkboxMarkup {
+    --dbv-kit-checkbox-background-checked: var(--theme-on-primary);
+    --dbv-kit-checkbox-icon-color: var(--theme-primary);
+    --dbv-kit-checkbox-background: transparent;
+
+    --dbv-kit-checkbox-border-color: var(--theme-on-primary);
+    --dbv-kit-checkbox-border-color-checked: var(--theme-on-primary);
+  }
+}

webapp/yarn.lock

@@ -2172,6 +2172,7 @@ __metadata:
     "@cloudbeaver/core-view": "workspace:*"
     "@cloudbeaver/tsconfig": "workspace:*"
     "@dbeaver/js-helpers": "workspace:^"
+    "@dbeaver/ui-kit": "workspace:*"
     "@types/react": "npm:^19"
     mobx: "npm:^6"
     mobx-react-lite: "npm:^4"
@@ -4538,7 +4539,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@dbeaver/ui-kit@workspace:../common-react/@dbeaver/ui-kit, @dbeaver/ui-kit@workspace:^":
+"@dbeaver/ui-kit@workspace:*, @dbeaver/ui-kit@workspace:../common-react/@dbeaver/ui-kit, @dbeaver/ui-kit@workspace:^":
   version: 0.0.0-use.local
   resolution: "@dbeaver/ui-kit@workspace:../common-react/@dbeaver/ui-kit"
   dependencies: