.no-sidebar{
@apply py-3;
}
.has-sidebar{
@apply lg:z-100;
}
.has-sidebar .navbar{
@apply justify-stretch
}
.has-sidebar .search-bar{
@apply xl:w-[350px] mr-4 lg:mr-12
}
.has-sidebar .navbar-actions{
@apply ml-auto;
}
.has-sidebar .search-bar button[data-open-modal]{
@apply md:h-[2.7rem] h-[2rem] rounded-full p-1 md:p-1.5 md:px-2.5 md:rounded-lg
}
.has-sidebar .search-bar span {
@apply hidden md:inline-block
}
.has-sidebar .search-bar kbd {
@apply hidden md:inline-block
}
.navbar {
@apply relative flex flex-wrap items-center justify-between ;
}
.navbar-scrolled{
@apply bg-lightmode-body dark:bg-body;
}
.navbar-brand {
@apply text-xl font-semibold flex items-center select-none;
image {
@apply max-h-full max-w-full;
}
}
#nav-menu {
@apply list-none;
}
.navbar-nav {
@apply text-center lg:text-left select-none;
}
.nav-link {
@apply hover:text-lightmode-primary! dark:hover:text-primary block p-3 cursor-pointer font-medium transition lg:px-2 lg:py-3 no-underline;
color: color-mix(in srgb, var(--sl-color-white) 90%, transparent);
}
.nav-dropdown {
@apply mr-0;
}
.nav-dropdown > svg {
@apply pointer-events-none;
}
.nav-dropdown.active .nav-dropdown-list {
@apply block;
}
.nav-dropdown-list {
@apply list-none z-10 min-w-[180px] rounded p-4 shadow-sm hidden lg:absolute lg:block bg-lightmode-dark dark:bg-dark;
}
.nav-dropdown-item {
@apply [&:not(:last-child)]:mb-2;
}
.nav-dropdown-link {
@apply hover:text-lightmode-primary dark:hover:text-lightmode-primary block py-1 font-medium transition no-underline;
color: color-mix(in srgb, var(--sl-color-white) 90%, transparent);
}
.no-sidebar.hamburger-menu {
@apply lg:hidden;
}
.has-sidebar .hamburger-menu {
@apply hidden;
}
input#nav-toggle:checked + label #show-button {
@apply hidden;
}
input#nav-toggle:checked + label #hide-button {
@apply block;
}
input#nav-toggle:checked ~ #nav-menu {
@apply block;
}
.theme-switcher {
@apply inline-flex border border-lightmode-light/10! dark:border-light/10! rounded-full py-2 px-1 bg-lightmode-dark dark:bg-dark;
label {
@apply relative h-4 w-6 cursor-pointer rounded-2xl lg:w-13 bg-transparent flex justify-between items-center;
}
input {
@apply absolute opacity-0;
}
span {
@apply bg-dark absolute -top-1 left-0 flex h-6 w-6 items-center justify-center rounded-full transition-all duration-300 dark:bg-white;
}
input:checked + label {
span {
@apply lg:left-7;
}
}
}