.header {
    position: absolute;
    left: var(--app-shell-navbar-width);
    z-index: var(--app-header-z-index) - 1; /* No need in actual implementation */
    width: calc(100% - var(--app-shell-navbar-width));
    height: rem(80);
    border: 0;
    background-color: transparent;

    @media (max-width: $mantine-breakpoint-md) {
        width: 100%;
        left: 0;
        height: rem(60);
    }
}
.navbar {
    height: 100%;
    overflow-y: auto;
    position: absolute; /* No need in actual implementation */
    background-color: light-dark( var(--mantine-color-white), var(--mantine-color-dark-6) );
    z-index: var(--app-header-z-index) - 1; /* No need in actual implementation */

    border: 0;
    box-shadow: var(--mantine-shadow-xs);
    padding: var(--mantine-spacing-lg) var(--mantine-spacing-md);

    @media (max-width: $mantine-breakpoint-md) {
        z-index: 2; /* No need in actual implementation */
        top: var(--app-header-height);
    }

    transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
    &[data-collpased="true"]

{
    padding: var(--mantine-spacing-lg) var(--mantine-spacing-xs);
}
}