adminforth 2.4.0-next.248 → 2.4.0-next.249

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -13,7 +13,7 @@
13
13
  }"
14
14
  aria-label="Sidebar"
15
15
  >
16
- <div class="h-full px-3 pb-4 bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder" :class="{'sidebar-scroll':!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)}">
16
+ <div class="h-full px-3 pb-20 md:pb-4 bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder" :class="{'sidebar-scroll':!isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)}">
17
17
  <div class="af-logo-title-wrapper flex relative transition-all duration-300 ease-in-out h-8 items-center" :class="{'my-4 ': isSidebarIconOnly && !isSidebarHovering, 'm-4': !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering)}">
18
18
  <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-logo h-8 me-3" :class="{ 'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && (!iconOnlySidebarEnabled || !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering))) }" />
19
19
  <img :src="loadFile(coreStore.config?.iconOnlySidebar?.logo || '')" :alt="`${ coreStore.config?.brandName } Logo`" class="af-sidebar-icon-only-logo h-8 me-3" :class="{ 'hidden': !(coreStore.config?.showBrandLogoInSidebar !== false && coreStore.config?.iconOnlySidebar?.logo && iconOnlySidebarEnabled && isSidebarIconOnly && !isSidebarHovering) }" />
@@ -430,6 +430,11 @@ onMounted(() => {
430
430
 
431
431
  onUnmounted(() => {
432
432
  smQuery.removeEventListener('change', handleBreakpointChange);
433
+ if (isMobile.value && props.sideBarOpen) {
434
+ document.body.style.overflow = '';
435
+ document.body.style.position = '';
436
+ document.body.style.width = '';
437
+ }
433
438
  })
434
439
 
435
440
  watch(() => props.forceIconOnly, (force) => {
@@ -445,4 +450,21 @@ watch(() => props.forceIconOnly, (force) => {
445
450
  isSidebarIconOnly.value = false;
446
451
  }
447
452
  }, { immediate: true })
453
+
454
+ watch(() => props.sideBarOpen, (isOpen) => {
455
+ if (isMobile.value) {
456
+ if (isOpen) {
457
+ // Lock body scroll
458
+ document.body.style.overflow = 'hidden';
459
+ document.body.style.position = 'fixed';
460
+ document.body.style.width = '100%';
461
+ } else {
462
+ // Unlock body scroll
463
+ document.body.style.overflow = '';
464
+ document.body.style.position = '';
465
+ document.body.style.width = '';
466
+ }
467
+ }
468
+ }, { immediate: true })
469
+
448
470
  </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "adminforth",
3
- "version": "2.4.0-next.248",
3
+ "version": "2.4.0-next.249",
4
4
  "description": "OpenSource Vue3 powered forth-generation admin panel",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",