@underpostnet/underpost 2.7.83 → 2.7.92

package/src/client/components/core/Docs.js

@@ -1,11 +1,13 @@
+import { Badge } from './Badge.js';
 import { BtnIcon } from './BtnIcon.js';
 import { rgbToHex } from './CommonJs.js';
 import { Css, darkTheme, dynamicCol, renderCssAttr, ThemeEvents, Themes } from './Css.js';
 import { DropDown } from './DropDown.js';
-import { Modal, renderMenuLabel, renderViewTitle } from './Modal.js';
+import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from './Modal.js';
 import { listenQueryPathInstance, setQueryPath } from './Router.js';
 import { Translate } from './Translate.js';
 import { getProxyPath, getQueryParams, htmls, s } from './VanillaJs.js';
+import Sortable from 'sortablejs';
 
 // https://mintlify.com/docs/quickstart
 
@@ -55,7 +57,21 @@ const Docs = {
       icon: html`<i class="fab fa-github"></i>`,
       text: `Last Release`,
       url: function () {
-        return `https://github.com/underpostnet/engine/`;
+        return `https://github.com/underpostnet/pwa-microservices-template-ghpkg/`;
+      },
+    },
+    {
+      type: 'demo',
+      icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
+        <path fill="currentColor" d="M20 2v12l10-6z" />
+        <path
+          fill="currentColor"
+          d="M28 14v8H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-8zM18 28h-4v-4h4z"
+        />
+      </svg>`,
+      text: html`Demo`,
+      url: function () {
+        return `https://underpostnet.github.io/pwa-microservices-template-ghpkg/`;
       },
     },
     {
@@ -63,7 +79,7 @@ const Docs = {
       icon: html`<i class="fa-brands fa-osi"></i>`,
       text: 'Source Docs',
       url: function () {
-        return `${getProxyPath()}docs/engine/2.7.83`;
+        return `${getProxyPath()}docs/engine/2.7.92`;
       },
     },
     {
@@ -109,6 +125,9 @@ const Docs = {
         type: umlId,
         icon: html`<i class="fas fa-sitemap"></i>`,
         text: Translate.Render(`${umlType} config uml`),
+        url: function () {
+          return `/docs/?cid=${umlId}`;
+        },
         renderHtml: function () {
           return html` <div class="in section-mp">
               <div class="in sub-title-modal"><i class="fas fa-project-diagram"></i> Schema</div>
@@ -130,19 +149,36 @@ const Docs = {
       };
     }),
   ),
+  Tokens: {},
   Init: async function (options) {
     const { idModal } = options;
+    this.Tokens[idModal] = options;
     setTimeout(() => {
+      const cleanActive = () => {
+        s(`.btn-docs-src`).classList.remove('main-btn-menu-active');
+        s(`.btn-docs-api`).classList.remove('main-btn-menu-active');
+        s(`.btn-docs-coverage`).classList.remove('main-btn-menu-active');
+        for (const umlType of umlTypes) {
+          const umlId = `uml-${umlType}`;
+          s(`.btn-docs-${umlId}`).classList.remove('main-btn-menu-active');
+        }
+      };
       s(`.btn-docs-src`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'src' });
+        cleanActive();
+        s(`.btn-docs-src`).classList.add('main-btn-menu-active');
         await this.RenderModal('src', options.modalOptions);
       };
       s(`.btn-docs-api`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'api' });
+        cleanActive();
+        s(`.btn-docs-api`).classList.add('main-btn-menu-active');
         await this.RenderModal('api', options.modalOptions);
       };
       s(`.btn-docs-coverage`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'coverage' });
+        cleanActive();
+        s(`.btn-docs-coverage`).classList.add('main-btn-menu-active');
         await this.RenderModal('coverage', options.modalOptions);
       };
 
@@ -154,10 +190,16 @@ const Docs = {
         const docData = this.Data.find((d) => d.type === 'repo');
         location.href = docData.url();
       };
+      s(`.btn-docs-demo`).onclick = () => {
+        const docData = this.Data.find((d) => d.type === 'demo');
+        location.href = docData.url();
+      };
 
       for (const umlType of umlTypes) {
         const umlId = `uml-${umlType}`;
         s(`.btn-docs-${umlId}`).onclick = async () => {
+          cleanActive();
+          s(`.btn-docs-${umlId}`).classList.add('main-btn-menu-active');
           setQueryPath({ path: 'docs', queryPath: umlId });
           await this.RenderModal(umlId, { ...options.modalOptions, handleType: 'bar' });
         };
@@ -181,7 +223,6 @@ const Docs = {
       switch (docData.type) {
         case 'repo':
         case 'coverage-link':
-          tabHref = docData.url();
           style = renderCssAttr({ style: { height: '45px' } });
           labelStyle = renderCssAttr({ style: { top: '8px', left: '9px' } });
           break;
@@ -189,16 +230,75 @@ const Docs = {
         default:
           break;
       }
-      docMenuRender += html` <div class="in">
+      tabHref = docData.url();
+      docMenuRender += html`
         ${await BtnIcon.Render({
-          class: `inl section-mp btn-custom btn-docs-${docData.type}`,
-          label: html`${docData.icon} ${docData.text}`,
+          class: `in wfa main-btn-menu btn-docs-${docData.type}`,
+          label: html`<span class="menu-btn-icon">${docData.icon}</span
+            ><span class="menu-label-text"> ${docData.text} </span>`,
           tabHref,
-          style,
-          labelStyle,
+          handleContainerClass: 'handle-btn-container',
+          tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption(docData.text, 'right')),
+          attrs: `data-id="${docData.type}"`,
+          handleContainerClass: 'handle-btn-container',
         })}
-      </div>`;
+      `;
     }
+
+    htmls('.menu-btn-container-children', html` <div class="fl menu-btn-container-docs">${docMenuRender}</div>`);
+    if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.add('hide');
+    htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);
+
+    this.Tokens[idModal] = new Sortable(s(`.menu-btn-container-docs`), {
+      animation: 150,
+      group: `docs-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
+      },
+    });
+
+    return '';
     return html` <div class="in section-mp">${docMenuRender}</div>`;
     return html` <div class="in section-mp">
       ${await DropDown.Render({

package/src/client/components/core/LoadingAnimation.js

@@ -3,7 +3,7 @@ import { BtnIcon } from './BtnIcon.js';
 import { s4 } from './CommonJs.js';
 import { darkTheme, renderCssAttr } from './Css.js';
 import { loggerFactory } from './Logger.js';
-import { append, getAllChildNodes, getProxyPath, htmls, s } from './VanillaJs.js';
+import { append, getAllChildNodes, getProxyPath, htmls, s, sa } from './VanillaJs.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -129,6 +129,7 @@ const LoadingAnimation = {
   },
   barLevel: {
     append: () => {
+      if (Array.from(sa('.ssr-loading-bar-block')).length >= 5) return;
       s(`.ssr-blink-bar`).classList.remove('ssr-blink-bar');
       append('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
     },
@@ -136,7 +137,7 @@ const LoadingAnimation = {
       htmls('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
     },
   },
-  removeSplashScreen: function (backgroundContainer) {
+  removeSplashScreen: function (backgroundContainer, callBack) {
     if (s(`.clean-cache-container`)) s(`.clean-cache-container`).style.display = 'none';
     if (!backgroundContainer) backgroundContainer = '.ssr-background';
     if (s(backgroundContainer))
@@ -144,6 +145,7 @@ const LoadingAnimation = {
         s(backgroundContainer).style.opacity = 0;
         setTimeout(async () => {
           s(backgroundContainer).style.display = 'none';
+          if (callBack) callBack();
         }, 300);
       });
   },

package/src/client/components/core/Modal.js

@@ -86,6 +86,7 @@ const Modal = {
       onDragEndListener: {},
       onObserverListener: {},
       onClickListener: {},
+      onExpandUiListener: {},
       query: options.query ? `${window.location.search}` : undefined,
     };
     if (options && 'mode' in options) {
@@ -191,11 +192,20 @@ const Modal = {
               s(`.${idModal}`).style.width = `${this.Data[idModal][options.mode].width}px`;
               s(`.html-${idModal}`).style.display = 'block';
               // s(`.title-modal-${idModal}`).style.display = 'block';
-              if (s(`.main-body-top`)) {
-                s(`.btn-bar-center-icon-close`).classList.remove('hide');
-                s(`.btn-bar-center-icon-menu`).classList.add('hide');
-              }
+              setTimeout(() => {
+                s(`.main-body-btn-ui-menu-menu`).classList.add('hide');
+                s(`.main-body-btn-ui-menu-close`).classList.remove('hide');
+                if (s(`.btn-bar-center-icon-menu`)) {
+                  s(`.btn-bar-center-icon-close`).classList.remove('hide');
+                  s(`.btn-bar-center-icon-menu`).classList.add('hide');
+                }
+              });
 
+              setTimeout(() => {
+                s(`.main-body-btn-container`).style[
+                  true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
+                ] = options.mode && options.mode.match('right') ? `${slideMenuWidth}px` : '0px';
+              });
               Responsive.Event[`slide-menu-${idModal}`]();
             };
             barConfig.buttons.close.onClick = () => {
@@ -204,15 +214,106 @@ const Modal = {
               s(`.btn-menu-${idModal}`).classList.remove('hide');
               s(`.${idModal}`).style.width = `${this.Data[idModal][options.mode].width}px`;
               s(`.html-${idModal}`).style.display = 'none';
-              if (s(`.main-body-top`)) {
-                s(`.btn-bar-center-icon-menu`).classList.remove('hide');
-                s(`.btn-bar-center-icon-close`).classList.add('hide');
-              }
+              setTimeout(() => {
+                s(`.main-body-btn-ui-menu-close`).classList.add('hide');
+                s(`.main-body-btn-ui-menu-menu`).classList.remove('hide');
+                if (s(`.btn-bar-center-icon-menu`)) {
+                  s(`.btn-bar-center-icon-menu`).classList.remove('hide');
+                  s(`.btn-bar-center-icon-close`).classList.add('hide');
+                }
+              });
               // s(`.title-modal-${idModal}`).style.display = 'none';
+              setTimeout(() => {
+                s(`.main-body-btn-container`).style[
+                  true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
+                ] = `${0}px`;
+              });
               Responsive.Event[`slide-menu-${idModal}`]();
             };
             transition += `, width 0.3s`;
 
+            setTimeout(() => {
+              append(
+                'body',
+                html`
+                  <div
+                    class="abs main-body-btn-container"
+                    style="top: ${options.heightTopBar + 50}px; z-index: 9; ${true ||
+                    (options.mode && options.mode.match('right'))
+                      ? 'right'
+                      : 'left'}: 50px; width: 50px; height: 100px; transition: .3s"
+                  >
+                    <div
+                      class="abs main-body-btn main-body-btn-menu"
+                      style="top: 50px; ${true || (options.mode && options.mode.match('right'))
+                        ? 'right'
+                        : 'left'}: 0px"
+                    >
+                      <div class="abs center">
+                        <i class="fa-solid fa-xmark hide main-body-btn-ui-menu-close"></i>
+                        <i class="fa-solid fa-bars main-body-btn-ui-menu-menu"></i>
+                      </div>
+                    </div>
+                    <div
+                      class="abs main-body-btn main-body-btn-ui"
+                      style="top: 0px; ${true || (options.mode && options.mode.match('right')) ? 'right' : 'left'}: 0px"
+                    >
+                      <div class="abs center">
+                        <i class="fas fa-caret-down main-body-btn-ui-open hide"></i>
+                        <i class="fas fa-caret-up main-body-btn-ui-close"></i>
+                      </div>
+                    </div>
+                  </div>
+                `,
+              );
+
+              s(`.main-body-btn-menu`).onclick = () => {
+                Modal.actionBtnCenter();
+              };
+
+              let _heightTopBar, _heightBottomBar, _topMenu;
+              s(`.main-body-btn-ui`).onclick = () => {
+                if (s(`.main-body-btn-ui-open`).classList.contains('hide')) {
+                  s(`.main-body-btn-ui-open`).classList.remove('hide');
+                  s(`.main-body-btn-ui-close`).classList.add('hide');
+                  _heightTopBar = newInstance(options.heightTopBar);
+                  _heightBottomBar = newInstance(options.heightBottomBar);
+                  _topMenu = newInstance(s(`.modal-menu`).style.top);
+                  options.heightTopBar = 0;
+                  options.heightBottomBar = 0;
+                  s(`.slide-menu-top-bar`).classList.add('hide');
+                  s(`.bottom-bar`).classList.add('hide');
+                  s(`.modal-menu`).style.top = '0px';
+                  s(`.main-body-btn-container`).style.top = '50px';
+                  s(`.main-body`).style.top = '0px';
+                } else {
+                  s(`.main-body-btn-ui-close`).classList.remove('hide');
+                  s(`.main-body-btn-ui-open`).classList.add('hide');
+                  options.heightTopBar = _heightTopBar;
+                  options.heightBottomBar = _heightBottomBar;
+                  s(`.modal-menu`).style.top = _topMenu;
+                  s(`.main-body-btn-container`).style.top = `${options.heightTopBar + 50}px`;
+                  s(`.slide-menu-top-bar`).classList.remove('hide');
+                  s(`.bottom-bar`).classList.remove('hide');
+                  s(`.main-body`).style.top = `${options.heightTopBar}px`;
+                }
+                Responsive.Event[`slide-menu-modal-menu`]();
+                Object.keys(this.Data).map((_idModal) => {
+                  if (this.Data[_idModal].slideMenu) {
+                    if (s(`.btn-maximize-${_idModal}`)) s(`.btn-maximize-${_idModal}`).click();
+                  }
+                });
+                Responsive.Event[`view-${'main-body'}`]();
+                if (Responsive.Event[`view-${'bottom-bar'}`]) Responsive.Event[`view-${'bottom-bar'}`]();
+                if (Responsive.Event[`view-${'main-body-top'}`]) Responsive.Event[`view-${'main-body-top'}`]();
+                for (const keyEvent of Object.keys(this.Data[idModal].onExpandUiListener)) {
+                  this.Data[idModal].onExpandUiListener[keyEvent](
+                    !s(`.main-body-btn-ui-open`).classList.contains('hide'),
+                  );
+                }
+              };
+            });
+
             const inputSearchBoxId = `top-bar-search-box`;
             append(
               'body',
@@ -726,6 +827,7 @@ const Modal = {
                   heightTopBar: originHeightTopBar,
                   heightBottomBar: originHeightBottomBar,
                   barMode: options.barMode,
+                  observer: true,
                 });
                 const maxWidthInputSearchBox = 450;
                 const paddingInputSearchBox = 5;
@@ -970,11 +1072,24 @@ const Modal = {
 
                 Responsive.Event[`view-${id}`] = () => {
                   if (!this.Data[id] || !s(`.${id}`)) return delete Responsive.Event[`view-${id}`];
-                  s(`.${id}`).style.height = `${
-                    window.innerHeight -
-                    (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-                    (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-                  }px`;
+                  s(`.${id}`).style.height =
+                    s(`.main-body-btn-ui-close`).classList.contains('hide') &&
+                    s(`.btn-restore-${id}`).style.display !== 'none'
+                      ? `${window.innerHeight}px`
+                      : `${
+                          window.innerHeight -
+                          (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
+                          (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
+                        }px`;
+
+                  if (
+                    s(`.main-body-btn-ui-close`).classList.contains('hide') &&
+                    s(`.btn-restore-${id}`).style.display !== 'none'
+                  ) {
+                    s(`.${id}`).style.top = '0px';
+                  } else {
+                    s(`.${id}`).style.top = `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
+                  }
                 };
                 Responsive.Event[`view-${id}`]();
 
@@ -1049,6 +1164,28 @@ const Modal = {
           top: 5%;
           left: 5%;
         }
+        .sub-menu-title-container-${idModal},
+        .nav-path-container-${idModal} {
+          top: 0px;
+          left: 0px;
+          width: 200px;
+          height: 50px;
+          overflow: hidden;
+          font-size: 20px;
+          cursor: default;
+        }
+        .nav-path-display-${idModal} {
+          font-size: 11px;
+          width: 100%;
+          top: 35px;
+          left: 37px;
+        }
+        .nav-title-display-${idModal} {
+          font-size: 19px;
+          width: 100%;
+          top: 13px;
+          left: 13px;
+        }
       </style>
       ${renderStyleTag(`style-${idModal}`, `.${idModal}`, options)}
       <div class="fix ${options && options.class ? options.class : ''} modal box-shadow ${idModal}">
@@ -1117,7 +1254,10 @@ const Modal = {
 
           <div class="in html-${idModal}">
             ${options.mode && options.mode.match('slide-menu')
-              ? html`<div class="in" style="${renderCssAttr({ style: { height: '50px' } })}">
+              ? html`<div
+                  class="stq modal"
+                  style="${renderCssAttr({ style: { height: '50px', 'z-index': 1, top: '0px' } })}"
+                >
                   ${await BtnIcon.Render({
                     style: renderCssAttr({ style: { height: '100%', color: '#5f5f5f' } }),
                     class: `in flr main-btn-menu action-bar-box btn-icon-menu-mode`,
@@ -1134,6 +1274,19 @@ const Modal = {
                       ></i>
                     </div>`,
                   })}
+                  ${await BtnIcon.Render({
+                    style: renderCssAttr({ style: { height: '100%', color: '#5f5f5f' } }),
+                    class: `in flr main-btn-menu action-bar-box btn-icon-menu-back hide`,
+                    label: html`<div class="abs center"><i class="fas fa-undo-alt"></i></div>`,
+                  })}
+                  <div class="abs sub-menu-title-container-${idModal} ac">
+                    <div class="abs nav-title-display-${idModal}">
+                      <!-- <i class="fas fa-home"></i> ${Translate.Render('home')} -->
+                    </div>
+                  </div>
+                  <div class="abs nav-path-container-${idModal} ahc bold">
+                    <div class="abs nav-path-display-${idModal}"><!-- ${location.pathname} --></div>
+                  </div>
                 </div>`
               : ''}
             ${options && options.html ? (typeof options.html === 'function' ? await options.html() : options.html) : ''}
@@ -1167,6 +1320,15 @@ const Modal = {
       case 'slide-menu':
       case 'slide-menu-right':
       case 'slide-menu-left':
+        const backMenuButtonEvent = async () => {
+          if (location.pathname !== getProxyPath()) setPath(getProxyPath());
+          if (s(`.menu-btn-container-children`)) htmls(`.menu-btn-container-children`, '');
+          // htmls(`.nav-title-display-${'modal-menu'}`, html`<i class="fas fa-home"></i> ${Translate.Render('home')}`);
+          htmls(`.nav-title-display-${'modal-menu'}`, html``);
+          htmls(`.nav-path-display-${idModal}`, '');
+          s(`.btn-icon-menu-back`).classList.add('hide');
+          if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.remove('hide');
+        };
         s(`.main-btn-home`).onclick = () => {
           for (const keyModal of Object.keys(this.Data)) {
             if (
@@ -1175,9 +1337,11 @@ const Modal = {
                 .includes(keyModal)
             )
               s(`.btn-close-${keyModal}`).click();
+            backMenuButtonEvent();
           }
           s(`.btn-close-modal-menu`).click();
         };
+        EventsUI.onClick(`.btn-icon-menu-back`, backMenuButtonEvent);
         EventsUI.onClick(`.btn-icon-menu-mode`, () => {
           if (s(`.btn-icon-menu-mode-right`).classList.contains('hide')) {
             s(`.btn-icon-menu-mode-right`).classList.remove('hide');
@@ -1188,6 +1352,12 @@ const Modal = {
           }
           if (slideMenuWidth === originSlideMenuWidth) {
             slideMenuWidth = collapseSlideMenuWidth;
+            setTimeout(() => {
+              s(`.main-body-btn-container`).style[
+                true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
+              ] = options.mode && options.mode.match('right') ? `${slideMenuWidth}px` : '0px';
+            }, 1);
+
             if (!s(`.btn-bar-center-icon-close`).classList.contains('hide')) {
               sa(`.handle-btn-container`).forEach((el) => el.classList.add('hide'));
               sa(`.menu-label-text`).forEach((el) => el.classList.add('hide'));
@@ -1195,18 +1365,32 @@ const Modal = {
                 sa(`.tooltip-menu`).forEach((el) => el.classList.remove('hide'));
                 s(`.${idModal}`).style.overflow = 'visible';
               }
+              if (s(`.menu-btn-container-main`) && s(`.menu-btn-container-main`).classList.contains('hide'))
+                s(`.btn-icon-menu-back`).classList.add('hide');
             }
             if (options.onCollapseMenu) options.onCollapseMenu();
+            s(`.sub-menu-title-container-${'modal-menu'}`).classList.add('hide');
+            s(`.nav-path-container-${'modal-menu'}`).classList.add('hide');
           } else {
             slideMenuWidth = originSlideMenuWidth;
+            setTimeout(() => {
+              s(`.main-body-btn-container`).style[
+                true || (options.mode && options.mode.match('right')) ? 'right' : 'left'
+              ] = options.mode && options.mode.match('right') ? `${slideMenuWidth}px` : '0px';
+            }, 1);
+
             sa(`.handle-btn-container`).forEach((el) => el.classList.remove('hide'));
             sa(`.menu-label-text`).forEach((el) => el.classList.remove('hide'));
             if (!Modal.mobileModal()) {
               sa(`.tooltip-menu`).forEach((el) => el.classList.add('hide'));
               s(`.${idModal}`).style.overflow = null;
             }
+            if (s(`.menu-btn-container-main`) && s(`.menu-btn-container-main`).classList.contains('hide'))
+              s(`.btn-icon-menu-back`).classList.remove('hide');
 
             if (options.onExtendMenu) options.onExtendMenu();
+            s(`.sub-menu-title-container-${'modal-menu'}`).classList.remove('hide');
+            s(`.nav-path-container-${'modal-menu'}`).classList.remove('hide');
           }
           // btn-bar-center-icon-menu
           this.actionBtnCenter();
@@ -1345,13 +1529,26 @@ const Modal = {
           callBack,
           id: options.slideMenu,
         };
-        s(`.${idModal}`).style.height = `${
-          window.innerHeight -
-          (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
-          (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-        }px`;
-        s(`.${idModal}`).style.top = `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
+        Responsive.Event['h-ui-hide-' + idModal] = () => {
+          setTimeout(() => {
+            if (!s(`.${idModal}`) || !s(`.main-body-btn-ui-close`)) return;
+            if (s(`.btn-restore-${idModal}`).style.display !== 'none') {
+              s(`.${idModal}`).style.height = s(`.main-body-btn-ui-close`).classList.contains('hide')
+                ? `${window.innerHeight}px`
+                : `${
+                    window.innerHeight -
+                    (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) -
+                    (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
+                  }px`;
+              s(`.${idModal}`).style.top = s(`.main-body-btn-ui-close`).classList.contains('hide')
+                ? `0px`
+                : `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
+            }
+          });
+        };
+        Responsive.Event['h-ui-hide-' + idModal]();
       } else {
+        delete Responsive.Event['h-ui-hide-' + idModal];
         s(`.${idModal}`).style.width = '100%';
         s(`.${idModal}`).style.height = '100%';
         s(`.${idModal}`).style.top = `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
@@ -1547,8 +1744,12 @@ const Modal = {
   headerTitleHeight: 40,
   actionBtnCenter: function () {
     // if (!s(`.btn-close-modal-menu`).classList.contains('hide')) return s(`.main-btn-home`).click();
-    if (!s(`.btn-close-modal-menu`).classList.contains('hide')) return s(`.btn-close-modal-menu`).click();
-    if (!s(`.btn-menu-modal-menu`).classList.contains('hide')) return s(`.btn-menu-modal-menu`).click();
+    if (!s(`.btn-close-modal-menu`).classList.contains('hide')) {
+      return s(`.btn-close-modal-menu`).click();
+    }
+    if (!s(`.btn-menu-modal-menu`).classList.contains('hide')) {
+      return s(`.btn-menu-modal-menu`).click();
+    }
   },
   cleanUI: function () {
     s(`.top-bar`).classList.add('hide');

package/src/client/components/core/Panel.js

@@ -507,7 +507,7 @@ const Panel = {
           color: black;
           padding: 10px;
           cursor: pointer;
-          max-height: 400px;
+          min-height: 400px;
           overflow: hidden;
         }
         .${idPanel}:hover {

package/src/client/components/core/PanelForm.js

@@ -454,7 +454,8 @@ const PanelForm = {
         },
       });
 
-    if (options.route === 'home') setTimeout(this.Data[idPanel].updatePanel);
+    // if (options.route === 'home') setTimeout(this.Data[idPanel].updatePanel);
+    if (!Auth.getToken()) setTimeout(this.Data[idPanel].updatePanel);
 
     if (options.parentIdModal) {
       htmls(`.html-${options.parentIdModal}`, await renderSrrPanelData());