.sts-sidebar-menu-item { @apply pt-1; & a.focus { background: rgba(1, 1, 1, 0.1); .dark & { background: rgba(255, 255, 255, 0.3); } } &.active > [data-satis-sidebar-menu-item-target="link"] [data-satis-sidebar-menu-item-target="indicator"] { @apply rotate-90; } &__link { @apply text-gray-800 dark:text-gray-300 hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 } &__icon { @apply mr-3 flex-shrink-0 h-6 w-6 text-gray-400 dark:text-gray-100 group-hover:text-gray-500; } &__no-icon { @apply mr-3 flex-shrink-0 h-6; } &__label { @apply flex-1; } &__menu-icon { @apply text-gray-300 ml-3 flex-shrink-0 h-5 w-5 transform group-hover:text-gray-400 transition-colors ease-in-out duration-150; } } .page_bg .sidebar.close .sts-sidebar-menu-item__menu-icon { display: none; } .page_bg .sidebar.close .sts-sidebar-menu-item > [data-satis-sidebar-menu-item-target="submenu"] { display: none; visibility: hidden; opacity: 0; transition: visibility 0s linear 1s, opacity 1s linear; /* Ensures it stays visible for 1 second after mouse leaves */ } .page_bg .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"] { @apply rounded-md bg-white dark:bg-gray-900; display: block; visibility: visible; opacity: 1; position: absolute; margin-left: 35px; overflow-y: scroll; margin-top: -60px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; z-index: 1000; overflow: visible; box-shadow: -0.5px 0px 3px 0.3px #aaaaaa; transition: visibility 0s linear 0s, opacity 0.5s linear; } .sidebar.close .sts-sidebar-menu-item:hover > [data-satis-sidebar-menu-item-target="submenu"]::-webkit-scrollbar { display: none; }