_detached_menu.scss

/* Start Detached-Menu Styles */
[data-vertical-style="detached"] {
  @media screen and (min-width: 992px) {
    .header {
      @apply z-[50] px-0 shadow-none #{!important};
    }
    .main-header {
      @apply w-[92%] my-0 mx-auto basis-auto p-0 #{!important};
    }
    .page {
      @apply w-[92%] mx-auto my-0;
    }
    .responsive-logo {
      @apply block -order-1;
    }
    footer {
      @apply bg-transparent;
    }
    .app-sidebar {
      @apply top-[calc(64px_+_1.5rem)] rounded-md bottom-6 h-auto overflow-hidden border border-gray-200;
      .main-sidebar-header {
        @apply hidden;
      }
      .main-sidebar {
        @apply mt-0 h-full #{!important};
      }
    }
    &[toggled="detached-close"] {
      &:not([icon-overlay="open"]) {
        .app-sidebar {
          @apply w-36;
          .slide__category,
          .side-menu__angle {
            @apply hidden;
          }
          .side-menu__item {
            @apply block text-center text-xs;
            .side-menu__icon {
              @apply mx-auto mb-2 w-full block;
            }
          }
          .slide.has-sub {
            .slide-menu {
              @apply hidden #{!important};
            }
          }
          .main-sidebar-header {
            .header-logo {
              .desktop-logo,
              .desktop-dark {
                @apply hidden;
              }
              .toggle-logo {
                @apply block;
              }
              .toggle-dark {
                @apply hidden;
              }
            }
          }
          .main-menu {
            @apply px-4;
          }
        }
        &.dark {
          .app-sidebar {
            .main-sidebar-header {
              .header-logo {
                .toggle-logo {
                  @apply hidden;
                }
                .toggle-dark {
                  @apply block;
                }
              }
            }
          }
        }
      }
      &[dir="ltr"] {
        .content {
          @apply ml-36;
        }
      }
      &[dir="rtl"] {
        .content {
          @apply mr-36;
        }
      }
    }
    &.dark {
      .app-sidebar {
        @apply border-white/10;
      }
    }
    &[dir="ltr"] {
      .app-sidebar {
        @apply left-[inherit];
      }
    }
    &[dir="rtl"] {
      .app-sidebar {
        @apply right-[inherit];
      }
    }
  }
}

/* End Detached-Menu Styles */