Asymmetrik/ngx-starter

@import '../../../styles/shared';

$nav-icon-size: 1.25rem !default;
$nav-icon-margin-left: -2px;

$nav-element-active-indicator-width: 4px !default;

$nav-logo-img-margin: 4px !default;
$nav-logo-text-font-size: 1.75rem !default;

$nav-popover-width: 192px !default;

:host {
    display: flex;
    height: 100%;

}

.navbar {
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: hidden;

    width: $nav-closed-width;

    @include transition(width 0.2s ease-in-out);

    &.navbar-open {
        width: $nav-open-width;

        .nav-link {
            .nav-label {
                display: inline-block;
            }
        }
    }

    .navbar-logo {
        img {

            height: auto;
            width: $nav-closed-width - 2 * $nav-logo-img-margin;
        }
        .nav-label {
            font-size: $nav-logo-text-font-size;
            font-weight: bold;
            color: var(--bs-nav-link-color);
        }
    }

    .nav-inner-scroll {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        flex-grow: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .nav-link {
        --bs-nav-pills-border-radius: 0;
        display: flex;
        align-items: center;
        justify-items: start;
        white-space: nowrap;

        &:not(.active):hover {
            background-color: var(--bs-secondary-bg);
        }

        .nav-icon {
            font-size: $nav-icon-size;
            margin: 2px 0 2px -2px;
            flex-shrink: 0;

            &.fa-stack {
                font-size: $nav-icon-size * 0.5;
                > span.fa-solid,
                > span.fa-brands {
                    vertical-align: middle;
                }
            }

            // new messages number badge
            &.messages-icon[data-new-messages-count]::after {
                content: attr(data-new-messages-count);
                position: absolute;
                left: .75rem;
                border-radius: 50%;
                height: 1rem;
                min-width: 1rem;
                line-height: 1rem;
                font-size: .75rem;
                font-weight: 500;
                background-color: var(--bs-primary-bg-subtle);
                font-family: Roboto, sans-serif;
            }
        }

        .nav-label {
            display: none;
            margin-left: .5rem;
        }

    }
}

.navbar-content {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: auto;
}

.messages-menu {
    width: min(calc(100vw - #{$nav-open-width} - 1rem), #{$nav-messages-popover-max-width});
}

.nav-menu {
    width: $nav-popover-width;
}