cirrus-ui/src/components/header.scss

A lightweight UI framework written in SCSS

@use '../src/internal' as *;

@mixin mobile-dropdown-menu-show {
    border-radius: 0;
    box-shadow: none;
    display: block;
    position: relative;
    top: 1rem;
    float: none;
    border: none;
    background-color: transparent;
    margin-bottom: 1rem;
}

/* These styles can also be used on menus in the body */
@mixin nav-bar-position($position) {
    align-items: stretch;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;

    justify-content: flex-#{$position};
    white-space: nowrap;
}

@if should-generate-classes($HEADER) {

    /* HEADER */
    .header {
        flex-grow: 1;
        width: 100%;
        z-index: 100;
        margin-bottom: 20px;
        box-shadow: 0 3px 15px rgba(57, 63, 72, 0.1);
        background-color: var(--cirrus-bg);
        max-height: 100vh;
        padding: 0 2rem;
        transition: all 0.3s;
        display: flex;
        --header-link-color: #{fill('gray', '700')};
        --header-link-color-hover: #{lighten(fill('gray', '700'), 10%)};

        /* Remove any padding set for headers in default.scss */
        @for $i from 1 through 6 {
            h#{$i} {
                margin: 0;
            }
        }

        a {
            color: var(--header-link-color);

            &:hover {
                color: var(--header-link-color-hover);
            }
        }

        /* Header dark theme */
        &.header-dark {
            background-color: rgba(0, 0, 0, 0.87);
            color: #fff;
            --header-link-color: #fff;
            --header-link-color-hover: #fff;

            /* Theme for dark menu */
            // .nav-item a {
            //     color: #fff;
            // }
        }

        &.header-clear {
            background-color: transparent;
            box-shadow: none;

            /* Add border radius to whole menu with clear header */
            .nav-item .dropdown-menu {
                border-radius: 4px;
            }
        }

        /* Add transition to nav menu when it drops down */
        &.header-animated .header-nav {
            transition: all 0.3s;
        }

        /* The container that contains all the header menu components. Child of header */
        .header-nav {
            /* Flex display 768px and higher */
            overflow: auto;
        }

        .header-brand {
            align-items: stretch;
            display: flex;
            flex-shrink: 0;
            max-width: 100vw;
            min-height: 3.25rem;
            overflow-x: auto;
            overflow-y: hidden;
        }

        /* Static header at the top of the screen */
        &.header-fixed {
            position: fixed;
            top: 0; /* Change this if you want to float the header somewhere else */
        }

        /* Hover effect for header elements when appropriate */
        &:not(.header-clear) .nav-item:not(.no-hover):hover,
        &:not(.header-clear) .nav-item:not(.no-hover).hovered {
            background-color: rgba(216, 216, 216, 0.15);
            transition: all 0.3s;
        }

        &:not(.header-clear) .nav-item.active, /* active:hover removes the transition effect when hovering over the dropdown menu */ 
    &:not(.header-clear) .nav-item.active:hover {
            background-color: rgba(216, 216, 216, 0.35);
        }

        .nav-btn {
            cursor: pointer;
            display: block;
            height: 3.5rem;
            position: relative;
            width: 3.5rem;
        }

        #{$button-selectors} {
            margin: 0;
        }
    }

    /* Styles for header menu (aka the nav bar) */
    .nav-menu {
        transition: all 0.3s;

        .has-sub {
            position: relative;
        }
    }

    /* Allow the user to scroll through navbar items if it exceeds nav-left, nav-center, or nav-right widths */
    .nav-overflow-x {
        justify-content: inherit;
        overflow-x: scroll;
    }

    /* Wrapper to vertically center header items */
    .nav-item {
        align-items: center;
        display: flex;
        position: relative;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: center;
        transition: all 0.3s;
        padding: 0 0.3rem;
        cursor: pointer;

        div {
            /* Cursor should be reset for children */
            cursor: default;
        }

        a {
            align-items: center;
            display: flex;
        }

        /* HEADER DROP DOWN MENU */
        .dropdown-menu {
            background-color: var(--cirrus-bg);
            position: absolute;
            top: 95%;
            /*right: 0; /* Unable to solve problem when we have multiple drop down menus */
            z-index: 1000;
            float: left;
            min-width: 160px;
            padding: 5px 0;
            margin: 2px 0 0;
            font-size: 14px;
            text-align: left;
            list-style: none;
            background-clip: padding-box;
            border: 1px solid fill('gray', '200');
            border-radius: 0 0 4px 4px;
            box-shadow: 0 0.5rem 1rem rgba(10, 10, 10, 0.1);

            /* Just add a transition in general */
            &.dropdown-animated {
                transition: all var(--animation-duration);
            }

            & > li > a {
                display: block;
                padding: 0.5rem 1rem;
                clear: both;
                line-height: 1.42857143;
                white-space: nowrap;
            }

            & > li {
                margin: 0;
                transition: all 0.3s;
            }

            & > li:hover {
                transition: all 0.3s;
                background-color: rgba(216, 216, 216, 0.15);
            }

            & > li:active {
                transition: all 0.3s;
                background-color: rgba(216, 216, 216, 0.25);
            }

            & > li:last-child {
                margin-bottom: 0;
            }

            .dropdown-menu-divider {
                border: none;
                background-color: rgba(216, 216, 216, 0.15);
                height: 1px;
                margin: 0.5rem 0;
            }
        }

        /* Add room for the dropdown chevron pseudoelement */
        &.has-sub .nav-dropdown-link {
            padding-right: 2.5rem;
            position: relative; /* Needed for hiding glyphs in mobile header */

            /* Dropdown menu location adjustment located below for sizes above phones */
            /* Dropdown menu indicator */
            &::after {
                border: 2px solid fill('primary'); /* Must be first to create the triangle shape */
                border-right: 0; /* Create the triangle effect */
                border-top: 0;
                display: block;
                height: 0.5em;
                width: 0.5em;
                content: ' ';
                transform: rotate(-45deg);
                pointer-events: none;
                margin-top: -0.435em;
                right: 1.125em;
                top: 50%;
                position: absolute;
            }
        }
    }

    /* Dark dropdown menu theme */
    .nav-item .dropdown-menu.dropdown-dark,
    .header.header-dark .dropdown-menu {
        background-color: rgba(0, 0, 0, 0.87);
        border: 1px solid fill('gray', '800');
        color: #fff;
    }

    .dropdown-menu.dropdown-shown,
    .nav-item.active {
        opacity: 1;
    }

    @include screen-above($sm) {
        .header {
            align-items: stretch;
            display: flex;

            .header-nav {
                flex-grow: 1;
                align-items: stretch; /* Make items fill up all available space regardless of width https://drafts.csswg.org/css-align/ */
                display: flex;
                position: relative;
                text-align: center;
                width: 100%;
                top: 0;
                overflow: visible; /* Only visible for showing dropdown menus, hidden for mobile */
            }

            /* Align items to the left */
            .nav-left {
                @include nav-bar-position('start');

                /* Align dropdown menu to the left side of the parent nav-item for header-left */
                .has-sub .dropdown-menu {
                    left: 0;
                    right: auto;
                }
            }

            /* Align items to the right */
            .nav-right {
                @include nav-bar-position('end');

                /* Align dropdown menu to the right side of the parent nav-item for header-right */
                .has-sub .dropdown-menu {
                    left: auto;
                    right: 0;
                }
            }

            /* Centering items, best used when nav-brand is not used to prevent offset */
            .nav-center {
                align-items: stretch;
                display: flex;
                flex-grow: 0;
                flex-shrink: 0;
                justify-content: center;
                margin-left: auto;
                margin-right: auto;
            }

            /* Hide hamburger button */
            .nav-btn {
                display: none;
            }

            .nav-item {
                /* Expand link area for desktop views so it is easier to click */
                a {
                    padding: 0.5rem 1rem;
                }

                .dropdown-menu {
                    opacity: 0;
                    pointer-events: none; /* Make cursor not respond to menu links when not displayed */
                }

                .dropdown-menu.dropdown-animated {
                    transform: translateY(-5px);
                }

                .dropdown-menu.dropdown-shown,
                &.toggle-hover:hover .dropdown-menu,
                .dropdown-menu.dropdown-animated.dropdown-shown {
                    opacity: 1;
                    transform: none;
                    pointer-events: auto;
                }
            }
        }
    }

    @include screen-below($sm) {
        /* Add scrolling support in header */
        .header {
            flex-direction: column;

            .header-brand .nav-item:first-child {
                padding: 0 1rem; /* Add padding to the first child, usually the logo */
            }

            /* Hide dropdown menu on mobile */
            .header-nav {
                height: 0;

                /* Show the dropdown */
                &.active {
                    height: 100vh;
                }

                /* Make the menu items larger in the dropdown menu */
                .nav-item {
                    padding: 1rem;
                }

                /* Get rid of extra spaces */
                .nav-item > a {
                    padding: 0;
                    width: 100%; /* Stretch the link to span the entire list item */
                }
            }
        }

        /* Remove flex for mobile devices */
        .nav-item.has-sub {
            display: block;

            .dropdown-menu {
                /* Hide the menu by default in mobile view (overflow on header-right can expose it) */
                display: none;

                &.dropdown-shown {
                    @include mobile-dropdown-menu-show();
                }

                &.dropdown-dark {
                    background-color: rgba(0, 0, 0, 0.17);
                    border: 0;
                }
            }
        }

        /* Hamburger button */
        .nav-btn {
            cursor: pointer;
            display: block;
            position: relative;
            margin-left: auto;

            span {
                background-color: var(--header-link-color);
                display: block;
                height: 2px;
                left: 50%;
                margin-left: -7px;
                position: absolute;
                top: 50%;
                transition: all 86ms ease-out;
                width: 15px;

                /* Line spacing in hamburger button */
                &:nth-child(1) {
                    margin-top: -6px;
                }

                &:nth-child(2) {
                    margin-top: -1px;
                }

                &:nth-child(3) {
                    margin-top: 4px;
                }
            }

            /* Hamburger button on active */
            &.active span:nth-child(1) {
                margin-left: -5px;
                transform: rotate(45deg);
                transform-origin: left top;
            }

            &.active span:nth-child(2) {
                opacity: 0;
            }

            &.active span:nth-child(3) {
                margin-left: -5px;
                transform: rotate(-45deg);
                transform-origin: left bottom;
            }
        }

        /* Hide drop down menu items */
        .nav-left,
        .nav-center,
        .nav-right {
            overflow: hidden;
        }

        /* No need for JS to show dropdown menu on mobile devices now */
        .header .nav-item.has-sub.toggle-hover:not(.no-hover):hover > .dropdown-menu {
            @include mobile-dropdown-menu-show();
        }
    }
}