[data-nav-layout="horizontal"] { @media (min-width: 992px) { .simplebar-track.simplebar-horizontal { @apply hidden; } .app-sidebar { @apply h-[3rem]; } .sidemenu-layout-styles { @apply hidden!; } .main-menu { @apply flex! transition-all ease-linear duration-[0.5s] flex-nowrap; &-container { @apply inline-flex; } } .side-menu__label .badge { @apply hidden!; } .mega-menu { @apply columns-3; } .app-header { @apply ps-0! z-[50]! shadow-none! ; } .content { @apply mx-auto! mt-28! start-0! min-h-[calc(100vh-10.5rem)]! w-full! ; > .container-fluid { @apply w-[94%] ms-auto me-auto; } .main-content { @apply w-[94%] mx-auto; } } .app-sidebar { .main-sidebar, .simplebar-mask { @apply overflow-visible; } .main-menu > .slide { @apply my-0 mx-[0.1875rem]; } .main-sidebar { @apply shadow-none; } } .main-sidebar .simplebar-vertical { @apply invisible! overflow-hidden! ; } .main-sidebar, .main-header-container { @apply w-[94%] my-0 mx-auto; } .horizontal-logo { @apply py-[0.85rem] px-0 block; .header-logo { img { @apply h-8 leading-8; } .desktop-logo { @apply block; } .desktop-dark, .toggle-logo, .toggle-dark, .desktop-white,.toggle-white { @apply hidden; } } } [data-header-styles="dark"] { .horizontal-logo { @apply py-[0.85rem] px-0 block; .header-logo { img { @apply h-8 leading-8; } .desktop-dark { @apply block!; } .desktop-logo, .toggle-logo, .toggle-dark, .desktop-white,.toggle-white { @apply hidden!; } } } } .main-header-container .sidemenu-toggle { @apply hidden; } .app-sidebar { @apply w-full! h-12! top-[3.75rem]! ; .slide-menu.child1, .slide-menu.child2, .slide-menu.child3 { li { @apply ps-2; } .side-menu__item:before { @apply top-[0.938rem]! start-3! ; } } .app-sidebar .slide-menu.child1 .side-menu__item, .app-sidebar .slide-menu.child2 .side-menu__item { @apply py-[0.45rem]! px-[1.6rem]! ; } .simplebar-content { @apply p-0! overflow-hidden! ; } .simplebar-content-wrapper { @apply overflow-hidden! h-auto! ; } .main-sidebar { @apply h-12! p-0! ; } .slide.has-sub .slide-menu { &.child1 { @apply start-6 p-0 rounded-b-sm shadow-[.063rem_.188rem_.5rem_rgba(0,0,0,0.1)] dark:shadow-[.063rem_.188rem_.5rem_rgba(255,255,255,0.1)] ; } &.child2, &.child3 { @apply end-[100%]! px-0! rounded-sm! ; } &.active { @apply start-auto! end-auto!; } } .slide-menu.child1 { @apply absolute!; } .side-menu__item { @apply w-full flex rounded-none p-[0.92rem]; } .side-menu__angle { @apply end-[0.45rem] block; } .side-menu__icon { @apply me-1 mb-0; } .slide.has-sub .slide-menu.child1 { @apply bg-white dark:bg-bodybg top-[100%] min-w-[12rem]; } .slide { @apply p-0; } .slide-menu { &.child1 { .slide.has-sub, .slide { @apply w-full flex py-0 px-[0.1875rem]; } } &.child2, &.child3 { @apply rounded-sm; } } .slide, .slide.has-sub { @apply static; } .main-menu { @apply mb-0; } } .main-sidebar-header { @apply hidden!; } .main-sidebar { @apply mt-0 pb-12; } .slide__category { @apply hidden; } /* horizontal arrows */ .main-menu-container .slide-left { @apply start-[1.438rem]; } .main-menu-container .slide-left, .main-menu-container .slide-right { @apply absolute top-[0.563rem] p-[0.375rem] flex items-center justify-center z-[1] cursor-pointer border border-solid border-defaultborder rounded-[3.125rem] text-white dark:text-bodybg; } .main-menu-container .slide-left, .main-menu-container .slide-right { @apply absolute top-[0.313rem] p-[0.375rem] flex items-center justify-center z-[1] cursor-pointer border border-solid border-defaultborder rounded-[3.125rem] text-white dark:text-bodybg bg-white dark:bg-bodybg; svg { @apply fill-black; } } .main-menu-container { .slide-right { @apply end-[-3%]; } .slide-left { @apply start-[-3%]; } } &[page-style="classic"] { .app-sidebar { @apply border-b border-b-defaultborder; } } &[dir="rtl"] { .main-menu-container { .slide-right, .slide-left { @apply rotate-180; } } } &.dark { .header-logo { .desktop-dark { @apply block; } .toggle-logo, .desktop-logo, .toggle-logo, .desktop-white,.toggle-white { @apply hidden; } } .app-sidebar { @apply border-white/10!; .slide.has-sub .slide-menu { &.child1, &.child2, &.child3 { @apply bg-bodybg! border-white/10!; } } .slide.side-menu__label1 { @apply border-white/10! text-white! ; } .main-menu-container { .slide-left, .slide-right { @apply bg-black/20 text-white border-white/10; svg { @apply fill-white; } } } } } } }