layout.css

/* ==========================================================================
   THE MAIN NAV (LEFT SIDEBAR)
   ========================================================================== */
.nav-main {
    @apply flex flex-col gap-6 py-6 px-2 sm:px-3 text-sm antialiased select-none;
    /* Same as the main element, accounting for the header with a class of h-14, which is the same as 3.5rem */
    @apply h-[calc(100vh-3.5rem)];
    @apply overflow-y-auto fixed top-14 start-0 w-48;
    @apply [&_svg]:text-gray-500 dark:[&_svg]:text-gray-500/85;
    /* Wait for the full page to load before allowing this transition otherwise you see the Sidebar animate in/out on load in Firefox (and sometimes Safari) */
    .page-fully-loaded & {
        /* Only certain properties because we don't want to inadvertently transition the color when we switch between light/dark mode */
        transition: inset 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    /* On mobile, hide by default and overlay on top */
    z-index: var(--z-index-draggable);
    @apply lg:flex;

    ul {
        @apply flex flex-col gap-0;
    }

    ul li a {
        @apply flex items-center gap-2 sm:gap-3 text-gray-700 hover:bg-gray-400/15 px-2 py-1 rounded-md dark:text-gray-400 hover:text-black dark:hover:text-gray-200 hover:[&_svg]:text-gray-700 dark:hover:[&_svg]:text-gray-200;
    }

    ul li a.active {
        @apply text-black bg-gray-400/15 [&_svg]:text-black dark:text-white [&_svg]:dark:text-gray-200 font-medium;
    }

    ul li ul {
        @apply ml-3.5 pl-3.5 translate-x-px my-1.5 text-[0.8125rem] min-w-0 flex-col gap-1.5 border-s border-gray-300 dark:border-gray-700;
    }

    ul li ul li a {
        @apply py-0 hover:bg-transparent;
    }

    ul li ul li a.active {
        @apply text-black dark:text-white font-medium bg-transparent;
    }
    ul li ul li {
        a.active {
            /* [1] Add a little vertical line to indicate the "active" subnav item */
            &::before {
                content: '';
                position: absolute;
                left: -1px;
                @apply h-4 border-s border-s-black;
            }
            :where(.dark) &::before {
                @apply border-s-gray-400;
            }
        }
        &:only-child a.active {
            /* [/2] Make the "active" subnav item less distracting for single-subnav items such as Assets/assets */
            &::before {
                @apply border-s-gray-400;
            }
            :where(.dark) &::before {
                @apply border-s-gray-500;
            }
        }
    }

    .section-title {
        @apply text-sm px-2 text-black font-medium mb-1 dark:text-gray-200;
    }
}


/* Mobile nav behavior */
@media (width < theme(--breakpoint-lg)) {
    .nav-main {
        /* Always visible but off-screen by default */
        @apply flex;
        @apply bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700;
    }

    .nav-open .nav-main {
        /* Slide in from the left */
        @apply start-0 shadow-2xl;
    }
}


main {
    @apply ps-0 lg:ps-46;
    /* Wait for the full page to load before allowing this transition otherwise you see the Sidebar animate in/out on load in Firefox (and sometimes Safari) */
    .page-fully-loaded & {
        /* Only padding because we don't wand to transition the color when we switch between light/dark mode */
        transition: padding 0.3s ease-in-out;
    }
}

.nav-closed .nav-main {
    /* Start off-screen to the left */
    @apply -start-50;
}

main.nav-closed {
    @apply ps-0;
    @apply lg:ps-0;
}

/* ==========================================================================
   DRAGGABLE MIRRORS
   ========================================================================== */

.draggable-mirror {
    position: relative;
    z-index: var(--z-index-modal);
}

.draggable-source--is-dragging {
    opacity: 0.5;
}

/* Mirrors that have been appended to the body should appear on top of everything. (Portals are 4) */
body > .draggable-mirror {
    z-index: var(--z-index-draggable);
}