refactor: toolbar item and dropdown menu

src/component/elements/DropdownMenu.tsx

@@ -0,0 +1,39 @@
+import {
+  Menu,
+  MenuItem,
+  MenuItemProps,
+  Popover,
+  PopoverProps,
+} from '@blueprintjs/core';
+
+export interface DropdownMenuItem extends MenuItemProps {
+  data?: object;
+}
+
+export interface DropdownMenuProps
+  extends Omit<PopoverProps, 'onSelect' | 'content'> {
+  options: DropdownMenuItem[];
+  onSelect: (data?: object) => void;
+}
+
+export function DropdownMenu(props: DropdownMenuProps) {
+  const { options, onSelect, children, ...other } = props;
+
+  const content = (
+    <Menu>
+      {options.map((option) => (
+        <MenuItem
+          key={JSON.stringify(option)}
+          {...option}
+          onClick={() => onSelect(option?.data)}
+        />
+      ))}
+    </Menu>
+  );
+
+  return (
+    <Popover {...other} content={content}>
+      {children}
+    </Popover>
+  );
+}

src/component/header/Header.tsx

@@ -154,7 +154,7 @@ function HeaderInner(props: HeaderInnerProps) {
           }}
         >
           <div>
-            <Toolbar orientation="horizontal">
+            <Toolbar>
               <AboutUsModal />
             </Toolbar>
           </div>
@@ -179,15 +179,14 @@ function HeaderInner(props: HeaderInnerProps) {
           {!general?.hideLogs && <LogsHistoryModal />}
 
           <div>
-            <Toolbar orientation="horizontal">
+            <Toolbar>
               {!general?.hideHelp && (
                 <Toolbar.Item
                   id="user-manual"
                   title="User manual"
                   onClick={() => window.open(docsBaseUrl, '_blank')}
-                >
-                  <FaQuestionCircle />
-                </Toolbar.Item>
+                  icon={<FaQuestionCircle />}
+                />
               )}
               {!hideGeneralSettings && (
                 <GeneralSettingsModal height={height / 2} />
@@ -199,9 +198,8 @@ function HeaderInner(props: HeaderInnerProps) {
                   onClick={onEnableFullscreen}
                   title="Full Screen"
                   className="windowButton"
-                >
-                  <FaRegWindowMaximize />
-                </Toolbar.Item>
+                  icon={<FaRegWindowMaximize />}
+                />
               )}
             </Toolbar>
           </div>

src/component/modal/aboutUs/AboutUsModal.tsx

@@ -96,20 +96,20 @@ function AboutUsModal() {
     <>
       <Toolbar.Item
         onClick={openDialog}
-        titleOrientation="horizontal"
         id="logo"
         title="About NMRium"
-      >
-        <div
+        icon={<SvgLogoNmrium />}
+      />
+      {/* <div
           style={{
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
           }}
         >
           <SvgLogoNmrium />
-        </div>
-      </Toolbar.Item>
+        </div> */}
+      {/* </Toolbar.Item> */}
       <Modal
         hasCloseButton
         isOpen={isOpenDialog}

src/component/modal/setting/GeneralSettings.tsx

@@ -288,9 +288,9 @@ function GeneralSettingsModal({ height }: GeneralSettingsModalProps) {
         id="general-settings"
         onClick={openDialog}
         title="General settings"
-      >
-        <FaWrench />
-      </Toolbar.Item>
+        icon={<FaWrench />}
+      />
+
       <Modal
         hasCloseButton
         isOpen={isOpenDialog}

src/component/panels/MoleculesPanel/MoleculePanelHeader.tsx

@@ -11,7 +11,6 @@ import {
   FaRegTrashAlt,
 } from 'react-icons/fa';
 import { IoOpenOutline } from 'react-icons/io5';
-import { DropdownMenuProps, DropdownMenu } from 'react-science/ui';
 
 import {
   MoleculesView,
@@ -25,6 +24,7 @@ import { useDispatch } from '../../context/DispatchContext';
 import { useGlobal } from '../../context/GlobalContext';
 import ActiveButton from '../../elements/ActiveButton';
 import Button from '../../elements/Button';
+import { DropdownMenu, DropdownMenuProps } from '../../elements/DropdownMenu';
 import { useAlert } from '../../elements/popup/Alert';
 import AboutPredictionModal from '../../modal/AboutPredictionModal';
 import PredictSpectraModal from '../../modal/PredictSpectraModal';
@@ -49,39 +49,31 @@ const styles: Record<'counter' | 'atomLabel', CSSProperties> = {
   },
 };
 
-const LabelWrapper = ({ children }) => {
-  return <p style={{ padding: '0.4em' }}>{children}</p>;
-};
-
-const MOL_EXPORT_MENU: DropdownMenuProps<{ id: string }, void>['options'] = [
+const MOL_EXPORT_MENU: DropdownMenuProps['options'] = [
   {
-    type: 'option',
     icon: <FaCopy />,
-    label: <LabelWrapper>Copy as molfile V3</LabelWrapper>,
+    text: 'Copy as molfile V3',
     data: {
       id: 'molfileV3',
     },
   },
   {
-    type: 'option',
     icon: <FaCopy />,
-    label: <LabelWrapper>Copy as molfile V2</LabelWrapper>,
+    text: 'Copy as molfile V2',
     data: {
       id: 'molfileV2',
     },
   },
   {
-    type: 'option',
     icon: <FaFileImage />,
-    label: <LabelWrapper>Copy as PNG</LabelWrapper>,
+    text: 'Copy as PNG',
     data: {
       id: 'png',
     },
   },
   {
-    type: 'option',
     icon: <FaDownload />,
-    label: <LabelWrapper>Export as SVG</LabelWrapper>,
+    text: 'Export as SVG',
     data: {
       id: 'svg',
     },
@@ -145,7 +137,7 @@ export default function MoleculePanelHeader({
     (selected) => {
       const molecule = molecules?.[currentIndex];
       if (molecule) {
-        switch (selected?.data.id) {
+        switch (selected?.id) {
           case 'molfileV3':
             saveAsMolHandler(molecule.molfile);
             break;
@@ -222,11 +214,7 @@ export default function MoleculePanelHeader({
     <PanelHeader>
       {renderSource === 'predictionPanel' && <AboutPredictionModal />}
       {renderSource === 'moleculePanel' && (
-        <DropdownMenu
-          trigger="click"
-          options={MOL_EXPORT_MENU}
-          onSelect={exportHandler}
-        >
+        <DropdownMenu options={MOL_EXPORT_MENU} onSelect={exportHandler}>
           <Button.BarButton
             as="div"
             disabled={!hasMolecules}