🔧 Move the delete and duplicate-menu buttons to the left sidebar

Author: Schneegans

src/settings-renderer/components/menu-list/MenuList.module.scss

@@ -96,8 +96,8 @@
 .floatingButton {
   position: absolute;
   bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
+  width: 100%;
+  text-align: center;
 }
 
 .message {

src/settings-renderer/components/menu-list/MenuList.tsx

@@ -12,7 +12,7 @@ import React from 'react';
 import i18next from 'i18next';
 import classNames from 'classnames/bind';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { TbPlus } from 'react-icons/tb';
+import { TbPlus, TbCopy, TbTrash } from 'react-icons/tb';
 
 import * as classes from './MenuList.module.scss';
 const cx = classNames.bind(classes);
@@ -69,6 +69,7 @@ export default function MenuList() {
   const selectMenu = useAppState((state) => state.selectMenu);
   const addMenu = useMenuSettings((state) => state.addMenu);
   const deleteMenu = useMenuSettings((state) => state.deleteMenu);
+  const duplicateMenu = useMenuSettings((state) => state.duplicateMenu);
   const moveMenu = useMenuSettings((state) => state.moveMenu);
   const moveMenuItem = useMenuSettings((state) => state.moveMenuItem);
 
@@ -302,14 +303,35 @@ export default function MenuList() {
         <div className={classes.floatingButton}>
           <Button
             icon={<TbPlus />}
-            label={i18next.t('settings.create-menu-button')}
+            tooltip={i18next.t('settings.create-menu-button')}
             variant="floating"
-            size="medium"
+            size="large"
+            grouped
             onClick={() => {
               addMenu(menuCollections[selectedCollection]?.tags || []);
               selectMenu(menus.length);
             }}
           />
+          <Button
+            icon={<TbCopy />}
+            tooltip={i18next.t('settings.duplicate-menu')}
+            variant="floating"
+            size="large"
+            grouped
+            onClick={() => {
+              duplicateMenu(selectedMenu);
+            }}
+          />
+          <Button
+            icon={<TbTrash />}
+            tooltip={i18next.t('settings.delete-menu')}
+            variant="floating"
+            size="large"
+            grouped
+            onClick={() => {
+              deleteMenu(selectedMenu);
+            }}
+          />
         </div>
       </div>
     </div>

src/settings-renderer/components/menu-properties/Properties.tsx

@@ -39,9 +39,7 @@ export default function Properties() {
   const selectedMenu = useAppState((state) => state.selectedMenu);
   const selectedChildPath = useAppState((state) => state.selectedChildPath);
   const selectParent = useAppState((state) => state.selectParent);
-  const duplicateMenu = useMenuSettings((state) => state.duplicateMenu);
   const duplicateMenuItem = useMenuSettings((state) => state.duplicateMenuItem);
-  const deleteMenu = useMenuSettings((state) => state.deleteMenu);
   const deleteMenuItem = useMenuSettings((state) => state.deleteMenuItem);
   const editMenu = useMenuSettings((state) => state.editMenu);
   const editMenuItem = useMenuSettings((state) => state.editMenuItem);
@@ -172,45 +170,31 @@ export default function Properties() {
             {!isRoot && selectedItem && getConfigComponent(selectedItem.type)}
           </div>
         </Scrollbox>
-        <div className={classes.floatingButton}>
-          <Button
-            icon={<TbCopy />}
-            tooltip={
-              isRoot
-                ? i18next.t('settings.duplicate-menu')
-                : i18next.t('settings.duplicate-menu-item')
-            }
-            variant="floating"
-            size="large"
-            grouped
-            onClick={() => {
-              if (isRoot) {
-                duplicateMenu(selectedMenu);
-              } else {
+        {!isRoot && (
+          <div className={classes.floatingButton}>
+            <Button
+              icon={<TbCopy />}
+              tooltip={i18next.t('settings.duplicate-menu-item')}
+              variant="floating"
+              size="large"
+              grouped
+              onClick={() => {
                 duplicateMenuItem(selectedMenu, selectedChildPath);
-              }
-            }}
-          />
-          <Button
-            icon={<TbTrash />}
-            tooltip={
-              isRoot
-                ? i18next.t('settings.delete-menu')
-                : i18next.t('settings.delete-menu-item')
-            }
-            variant="floating"
-            size="large"
-            grouped
-            onClick={() => {
-              if (isRoot) {
-                deleteMenu(selectedMenu);
-              } else {
+              }}
+            />
+            <Button
+              icon={<TbTrash />}
+              tooltip={i18next.t('settings.delete-menu-item')}
+              variant="floating"
+              size="large"
+              grouped
+              onClick={() => {
                 deleteMenuItem(selectedMenu, selectedChildPath);
                 selectParent();
-              }
-            }}
-          />
-        </div>
+              }}
+            />
+          </div>
+        )}
       </div>
     </>
   );