underpost 2.7.1 → 2.7.3

package/src/client/components/default/MenuDefault.js

@@ -1,389 +1,389 @@
-import { Account } from '../core/Account.js';
-import { BtnIcon } from '../core/BtnIcon.js';
-import { getId, newInstance } from '../core/CommonJs.js';
-import { Css, Themes } from '../core/Css.js';
-import { EventsUI } from '../core/EventsUI.js';
-import { LogIn } from '../core/LogIn.js';
-import { LogOut } from '../core/LogOut.js';
-import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from '../core/Modal.js';
-import { SignUp } from '../core/SignUp.js';
-import { Translate } from '../core/Translate.js';
-import { getProxyPath, htmls, s } from '../core/VanillaJs.js';
-import { ElementsDefault } from './ElementsDefault.js';
-import Sortable from 'sortablejs';
-import { RouterDefault } from './RoutesDefault.js';
-import { SettingsDefault } from './SettingsDefault.js';
-import { Badge } from '../core/Badge.js';
-import { Docs } from '../core/Docs.js';
-import { Recover } from '../core/Recover.js';
-import { DefaultManagement } from '../../services/default/default.management.js';
-
-const MenuDefault = {
-  Data: {},
-  Render: async function (options = { htmlMainBody: () => html`` }) {
-    const id = getId(this.Data, 'menu-');
-    this.Data[id] = {};
-    const RouterInstance = RouterDefault();
-    const { NameApp } = RouterInstance;
-    const { barConfig } = await Themes[Css.currentTheme]();
-    const heightTopBar = 50;
-    const heightBottomBar = 50;
-    const badgeNotificationMenuStyle = { top: '-33px', left: '24px' };
-    const barMode = undefined; // 'top-bottom-bar';
-    await Modal.Render({
-      id: 'modal-menu',
-      html: html`
-        <div class="fl menu-btn-container">
-          ${await BtnIcon.Render({
-            class: 'in wfa main-btn-menu main-btn-home main-btn-menu-active',
-            label: renderMenuLabel({
-              icon: html`<i class="fas fa-home"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('home')}</span>`,
-            }),
-            // style: 'display: none',
-            attrs: `data-id="home"`,
-            tabHref: `${getProxyPath()}`,
-            handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('home')),
-          })}
-          ${await BtnIcon.Render({
-            class: 'in wfa main-btn-menu main-btn-log-in',
-            label: renderMenuLabel({
-              icon: html`<i class="fas fa-sign-in-alt"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('log-in')}</span>`,
-            }),
-            attrs: `data-id="log-in"`,
-            tabHref: `${getProxyPath()}log-in`,
-            handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('log-in')),
-          })}
-          ${await BtnIcon.Render({
-            class: 'in wfa main-btn-menu main-btn-sign-up',
-            label: renderMenuLabel({
-              icon: html`<i class="fas fa-user-plus"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('sign-up')}</span>`,
-            }),
-            attrs: `data-id="sign-up"`,
-            tabHref: `${getProxyPath()}sign-up`,
-            handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('sign-up')),
-          })}
-          ${await BtnIcon.Render({
-            class: 'in wfa main-btn-menu main-btn-log-out',
-            label: renderMenuLabel({
-              icon: html`<i class="fas fa-sign-out-alt"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('log-out')}</span>`,
-            }),
-            attrs: `data-id="log-out"`,
-            style: 'display: none',
-            tabHref: `${getProxyPath()}log-out`,
-            handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('log-out')),
-          })}
-          ${await BtnIcon.Render({
-            class: 'in wfa main-btn-menu main-btn-account',
-            label: renderMenuLabel({
-              icon: html`<i class="fas fa-user-circle"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('account')}</span>`,
-            }),
-            style: 'display: none',
-            attrs: `data-id="account"`,
-            tabHref: `${getProxyPath()}account`,
-            handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('account')),
-          })}
-          ${await BtnIcon.Render({
-            class: 'in wfa main-btn-menu main-btn-settings',
-            label: renderMenuLabel({
-              icon: html`<i class="fas fa-sliders-h"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('settings')}</span>`,
-            }),
-            attrs: `data-id="settings"`,
-            tabHref: `${getProxyPath()}settings`,
-            handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('settings')),
-          })}
-          ${await BtnIcon.Render({
-            class: 'in wfa main-btn-menu main-btn-docs hide',
-            label: renderMenuLabel({
-              icon: html`<i class="fas fa-book"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('docs')}</span>`,
-            }),
-            attrs: `data-id="docs"`,
-            tabHref: `${getProxyPath()}docs`,
-            handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('docs')),
-          })}
-          ${await BtnIcon.Render({
-            class: 'in wfa main-btn-menu main-btn-recover hide',
-            label: renderMenuLabel({
-              icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('recover')}</span>`,
-            }),
-            attrs: `data-id="recover"`,
-            tabHref: `${getProxyPath()}recover`,
-            handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('recover')),
-          })}
-          ${await BtnIcon.Render({
-            class: 'in wfa main-btn-menu main-btn-default-management',
-            label: renderMenuLabel({
-              icon: html`<i class="fa-solid fa-rectangle-list"></i>`,
-              text: html`<span class="menu-label-text">${Translate.Render('default-management')}</span>`,
-            }),
-            attrs: `data-id="default-management"`,
-            tabHref: `${getProxyPath()}default-management`,
-            handleContainerClass: 'handle-btn-container',
-            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('default-management')),
-          })}
-        </div>
-      `,
-      barConfig: newInstance(barConfig),
-      title: NameApp,
-      // titleClass: 'hide',
-      titleRender: () => {
-        setTimeout(() => {
-          htmls(`.action-btn-app-icon-render`, html`APP`);
-        });
-        return '';
-      },
-      mode: 'slide-menu',
-      heightTopBar,
-      heightBottomBar,
-      htmlMainBody: options?.htmlMainBody ? options.htmlMainBody : undefined,
-    });
-
-    this.Data[id].sortable = new Sortable(s(`.menu-btn-container`), {
-      animation: 150,
-      group: `menu-sortable`,
-      forceFallback: true,
-      fallbackOnBody: true,
-      handle: '.handle-btn-container',
-      store: {
-        /**
-         * Get the order of elements. Called once during initialization.
-         * @param   {Sortable}  sortable
-         * @returns {Array}
-         */
-        get: function (sortable) {
-          const order = localStorage.getItem(sortable.options.group.name);
-          return order ? order.split('|') : [];
-        },
-
-        /**
-         * Save the order of elements. Called onEnd (when the item is dropped).
-         * @param {Sortable}  sortable
-         */
-        set: function (sortable) {
-          const order = sortable.toArray();
-          localStorage.setItem(sortable.options.group.name, order.join('|'));
-        },
-      },
-      // chosenClass: 'css-class',
-      // ghostClass: 'css-class',
-      // Element dragging ended
-      onEnd: function (/**Event*/ evt) {
-        // console.log('Sortable onEnd', evt);
-        // console.log('evt.oldIndex', evt.oldIndex);
-        // console.log('evt.newIndex', evt.newIndex);
-        const slotId = Array.from(evt.item.classList).pop();
-        // console.log('slotId', slotId);
-        if (evt.oldIndex === evt.newIndex) s(`.${slotId}`).click();
-
-        // var itemEl = evt.item; // dragged HTMLElement
-        // evt.to; // target list
-        // evt.from; // previous list
-        // evt.oldIndex; // element's old index within old parent
-        // evt.newIndex; // element's new index within new parent
-        // evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
-        // evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
-        // evt.clone; // the clone element
-        // evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
-      },
-    });
-
-    EventsUI.onClick(`.main-btn-sign-up`, async () => {
-      const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
-        id: 'modal-sign-up',
-        route: 'sign-up',
-        barConfig,
-        title: renderViewTitle({
-          icon: html`<i class="fas fa-user-plus"></i>`,
-          text: Translate.Render('sign-up'),
-        }),
-        html: async () => await SignUp.Render({ idModal: 'modal-sign-up' }),
-        handleType: 'bar',
-        maximize: true,
-        mode: 'view',
-        slideMenu: 'modal-menu',
-        RouterInstance,
-        heightTopBar,
-        heightBottomBar,
-      });
-    });
-
-    EventsUI.onClick(`.main-btn-log-out`, async () => {
-      const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
-        id: 'modal-log-out',
-        route: 'log-out',
-        barConfig,
-        title: renderViewTitle({
-          icon: html`<i class="fas fa-sign-out-alt"></i>`,
-          text: Translate.Render('log-out'),
-        }),
-        html: async () => await LogOut.Render(),
-        handleType: 'bar',
-        maximize: true,
-        mode: 'view',
-        slideMenu: 'modal-menu',
-        RouterInstance,
-        heightTopBar,
-        heightBottomBar,
-      });
-    });
-
-    EventsUI.onClick(`.main-btn-log-in`, async () => {
-      const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
-        id: 'modal-log-in',
-        route: 'log-in',
-        barConfig,
-        title: renderViewTitle({
-          icon: html`<i class="fas fa-sign-in-alt"></i>`,
-          text: Translate.Render('log-in'),
-        }),
-        html: async () => await LogIn.Render(),
-        handleType: 'bar',
-        maximize: true,
-        mode: 'view',
-        slideMenu: 'modal-menu',
-        RouterInstance,
-        heightTopBar,
-        heightBottomBar,
-      });
-    });
-
-    EventsUI.onClick(`.main-btn-account`, async () => {
-      const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
-        id: 'modal-account',
-        route: 'account',
-        barConfig,
-        title: renderViewTitle({
-          icon: html`<i class="fas fa-user-circle"></i>`,
-          text: Translate.Render('account'),
-        }),
-        html: async () =>
-          await Account.Render({
-            idModal: 'modal-account',
-            user: ElementsDefault.Data.user.main.model.user,
-            disabled: [],
-          }),
-        handleType: 'bar',
-        maximize: true,
-        mode: 'view',
-        slideMenu: 'modal-menu',
-        RouterInstance,
-        heightTopBar,
-        heightBottomBar,
-      });
-    });
-
-    EventsUI.onClick(`.main-btn-settings`, async () => {
-      const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
-        id: 'modal-settings',
-        route: 'settings',
-        barConfig,
-        title: renderViewTitle({
-          icon: html` <i class="fas fa-sliders-h"></i>`,
-          text: Translate.Render('settings'),
-        }),
-        html: async () => await SettingsDefault.Render({ idModal: 'modal-settings' }),
-        handleType: 'bar',
-        maximize: true,
-        mode: 'view',
-        slideMenu: 'modal-menu',
-        RouterInstance,
-        heightTopBar,
-        heightBottomBar,
-      });
-    });
-
-    EventsUI.onClick(`.main-btn-docs`, async () => {
-      const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
-        id: 'modal-docs',
-        route: 'docs',
-        barConfig,
-        title: renderViewTitle({
-          icon: html`<i class="fas fa-book"></i>`,
-          text: Translate.Render('docs'),
-        }),
-        html: async () =>
-          await Docs.Init({
-            idModal: 'modal-docs',
-            modalOptions: {
-              barMode: undefined,
-            },
-          }),
-        handleType: 'bar',
-        observer: true,
-        maximize: true,
-        mode: 'view',
-        slideMenu: 'modal-menu',
-        RouterInstance,
-        heightTopBar,
-        heightBottomBar,
-        barMode,
-      });
-    });
-
-    EventsUI.onClick(`.main-btn-recover`, async () => {
-      const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
-        id: 'modal-recover',
-        route: 'recover',
-        barConfig,
-        title: renderViewTitle({
-          icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
-          text: Translate.Render('recover'),
-        }),
-        html: async () =>
-          await Recover.Render({ idModal: 'modal-recover', user: ElementsDefault.Data.user.main.model.user }),
-        handleType: 'bar',
-        maximize: true,
-        mode: 'view',
-        slideMenu: 'modal-menu',
-        RouterInstance,
-        heightTopBar,
-        heightBottomBar,
-      });
-    });
-
-    EventsUI.onClick(`.main-btn-default-management`, async () => {
-      const { barConfig } = await Themes[Css.currentTheme]();
-      await Modal.Render({
-        id: 'modal-default-management',
-        route: 'default-management',
-        barConfig,
-        title: renderViewTitle({
-          icon: html`<i class="fa-solid fa-rectangle-list"></i>`,
-          text: Translate.Render('default-management'),
-        }),
-        html: async () => await DefaultManagement.RenderTable(),
-        handleType: 'bar',
-        maximize: true,
-        mode: 'view',
-        slideMenu: 'modal-menu',
-        RouterInstance,
-        heightTopBar,
-        heightBottomBar,
-      });
-    });
-  },
-};
-
-export { MenuDefault };
+import { Account } from '../core/Account.js';
+import { BtnIcon } from '../core/BtnIcon.js';
+import { getId, newInstance } from '../core/CommonJs.js';
+import { Css, Themes } from '../core/Css.js';
+import { EventsUI } from '../core/EventsUI.js';
+import { LogIn } from '../core/LogIn.js';
+import { LogOut } from '../core/LogOut.js';
+import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from '../core/Modal.js';
+import { SignUp } from '../core/SignUp.js';
+import { Translate } from '../core/Translate.js';
+import { getProxyPath, htmls, s } from '../core/VanillaJs.js';
+import { ElementsDefault } from './ElementsDefault.js';
+import Sortable from 'sortablejs';
+import { RouterDefault } from './RoutesDefault.js';
+import { SettingsDefault } from './SettingsDefault.js';
+import { Badge } from '../core/Badge.js';
+import { Docs } from '../core/Docs.js';
+import { Recover } from '../core/Recover.js';
+import { DefaultManagement } from '../../services/default/default.management.js';
+
+const MenuDefault = {
+  Data: {},
+  Render: async function (options = { htmlMainBody: () => html`` }) {
+    const id = getId(this.Data, 'menu-');
+    this.Data[id] = {};
+    const RouterInstance = RouterDefault();
+    const { NameApp } = RouterInstance;
+    const { barConfig } = await Themes[Css.currentTheme]();
+    const heightTopBar = 50;
+    const heightBottomBar = 50;
+    const badgeNotificationMenuStyle = { top: '-33px', left: '24px' };
+    const barMode = undefined; // 'top-bottom-bar';
+    await Modal.Render({
+      id: 'modal-menu',
+      html: html`
+        <div class="fl menu-btn-container">
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-home main-btn-menu-active',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-home"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('home')}</span>`,
+            }),
+            // style: 'display: none',
+            attrs: `data-id="home"`,
+            tabHref: `${getProxyPath()}`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('home')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-log-in',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-sign-in-alt"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('log-in')}</span>`,
+            }),
+            attrs: `data-id="log-in"`,
+            tabHref: `${getProxyPath()}log-in`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('log-in')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-sign-up',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-user-plus"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('sign-up')}</span>`,
+            }),
+            attrs: `data-id="sign-up"`,
+            tabHref: `${getProxyPath()}sign-up`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('sign-up')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-log-out',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-sign-out-alt"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('log-out')}</span>`,
+            }),
+            attrs: `data-id="log-out"`,
+            style: 'display: none',
+            tabHref: `${getProxyPath()}log-out`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('log-out')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-account',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-user-circle"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('account')}</span>`,
+            }),
+            style: 'display: none',
+            attrs: `data-id="account"`,
+            tabHref: `${getProxyPath()}account`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('account')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-settings',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-sliders-h"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('settings')}</span>`,
+            }),
+            attrs: `data-id="settings"`,
+            tabHref: `${getProxyPath()}settings`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('settings')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-docs hide',
+            label: renderMenuLabel({
+              icon: html`<i class="fas fa-book"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('docs')}</span>`,
+            }),
+            attrs: `data-id="docs"`,
+            tabHref: `${getProxyPath()}docs`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('docs')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-recover hide',
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('recover')}</span>`,
+            }),
+            attrs: `data-id="recover"`,
+            tabHref: `${getProxyPath()}recover`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('recover')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-default-management',
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-rectangle-list"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('default-management')}</span>`,
+            }),
+            attrs: `data-id="default-management"`,
+            tabHref: `${getProxyPath()}default-management`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('default-management')),
+          })}
+        </div>
+      `,
+      barConfig: newInstance(barConfig),
+      title: NameApp,
+      // titleClass: 'hide',
+      titleRender: () => {
+        setTimeout(() => {
+          htmls(`.action-btn-app-icon-render`, html`APP`);
+        });
+        return '';
+      },
+      mode: 'slide-menu',
+      heightTopBar,
+      heightBottomBar,
+      htmlMainBody: options?.htmlMainBody ? options.htmlMainBody : undefined,
+    });
+
+    this.Data[id].sortable = new Sortable(s(`.menu-btn-container`), {
+      animation: 150,
+      group: `menu-sortable`,
+      forceFallback: true,
+      fallbackOnBody: true,
+      handle: '.handle-btn-container',
+      store: {
+        /**
+         * Get the order of elements. Called once during initialization.
+         * @param   {Sortable}  sortable
+         * @returns {Array}
+         */
+        get: function (sortable) {
+          const order = localStorage.getItem(sortable.options.group.name);
+          return order ? order.split('|') : [];
+        },
+
+        /**
+         * Save the order of elements. Called onEnd (when the item is dropped).
+         * @param {Sortable}  sortable
+         */
+        set: function (sortable) {
+          const order = sortable.toArray();
+          localStorage.setItem(sortable.options.group.name, order.join('|'));
+        },
+      },
+      // chosenClass: 'css-class',
+      // ghostClass: 'css-class',
+      // Element dragging ended
+      onEnd: function (/**Event*/ evt) {
+        // console.log('Sortable onEnd', evt);
+        // console.log('evt.oldIndex', evt.oldIndex);
+        // console.log('evt.newIndex', evt.newIndex);
+        const slotId = Array.from(evt.item.classList).pop();
+        // console.log('slotId', slotId);
+        if (evt.oldIndex === evt.newIndex) s(`.${slotId}`).click();
+
+        // var itemEl = evt.item; // dragged HTMLElement
+        // evt.to; // target list
+        // evt.from; // previous list
+        // evt.oldIndex; // element's old index within old parent
+        // evt.newIndex; // element's new index within new parent
+        // evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
+        // evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
+        // evt.clone; // the clone element
+        // evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
+      },
+    });
+
+    EventsUI.onClick(`.main-btn-sign-up`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-sign-up',
+        route: 'sign-up',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fas fa-user-plus"></i>`,
+          text: Translate.Render('sign-up'),
+        }),
+        html: async () => await SignUp.Render({ idModal: 'modal-sign-up' }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-log-out`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-log-out',
+        route: 'log-out',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fas fa-sign-out-alt"></i>`,
+          text: Translate.Render('log-out'),
+        }),
+        html: async () => await LogOut.Render(),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-log-in`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-log-in',
+        route: 'log-in',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fas fa-sign-in-alt"></i>`,
+          text: Translate.Render('log-in'),
+        }),
+        html: async () => await LogIn.Render(),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-account`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-account',
+        route: 'account',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fas fa-user-circle"></i>`,
+          text: Translate.Render('account'),
+        }),
+        html: async () =>
+          await Account.Render({
+            idModal: 'modal-account',
+            user: ElementsDefault.Data.user.main.model.user,
+            disabled: [],
+          }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-settings`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-settings',
+        route: 'settings',
+        barConfig,
+        title: renderViewTitle({
+          icon: html` <i class="fas fa-sliders-h"></i>`,
+          text: Translate.Render('settings'),
+        }),
+        html: async () => await SettingsDefault.Render({ idModal: 'modal-settings' }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-docs`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-docs',
+        route: 'docs',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fas fa-book"></i>`,
+          text: Translate.Render('docs'),
+        }),
+        html: async () =>
+          await Docs.Init({
+            idModal: 'modal-docs',
+            modalOptions: {
+              barMode: undefined,
+            },
+          }),
+        handleType: 'bar',
+        observer: true,
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        barMode,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-recover`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-recover',
+        route: 'recover',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-arrow-rotate-left"></i>`,
+          text: Translate.Render('recover'),
+        }),
+        html: async () =>
+          await Recover.Render({ idModal: 'modal-recover', user: ElementsDefault.Data.user.main.model.user }),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-default-management`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-default-management',
+        route: 'default-management',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-rectangle-list"></i>`,
+          text: Translate.Render('default-management'),
+        }),
+        html: async () => await DefaultManagement.RenderTable(),
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+      });
+    });
+  },
+};
+
+export { MenuDefault };