index-website-static/assets/css/partials/_site-menu.scss

#site-menu{
    position: fixed;
    width: var(--menu-w);
    height: calc(100dvh - var(--header-h));
    height: calc(100vh - var(--header-h));
    top: var(--header-h);
    right: calc(var(--menu-w)*-1);
    transition: right .3s ease-in;
    background-color: var(--color-bg);
    border-left: var(--border-light);
    padding: var(--padding-body);
    z-index: 1000;

    display: flex;
    flex-direction: column;
    // display: none;

    // .baseline{
    //     font-size: var(--fs-medium);
    // }

    form{
        margin-top: calc(var(--spacing)*1);
        margin-bottom: calc(var(--spacing)*1);
        --icon: 40px;
        display: grid;
        grid-template-columns: var(--icon) 1fr;
        input{
            grid-column: 1/3;
            grid-row: 1;
            height: calc(var(--h-block) * 1.5);
            width: 100%;
            background: var(--color-bg);
            border: 1px solid var(--color-txt);
            padding-left: var(--icon);
            font-family: var(--font);
            font-size: var(--fs-normal);
            color: var(--color-txt);
            padding-top: 3px;
            &::placeholder{
                font-family: var(--font);
                font-size: var(--fs-normal);
                color: var(--color-txt);
            }
            &:focus{
                border-color: var(--color-accent);
                outline: none;
            }
        }

        .icon{
            grid-column: 1;
            grid-row: 1;
            z-index: 10;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            svg{
                width: 20px;
            }
        }
    }


    nav{
        flex-grow: 1;
        ul{ 
            list-style-type: none;
            text-transform: uppercase;
            li{
                font-size: var(--fs-normal);
                a{
                    display: block;
                    text-decoration: none;
                    padding: 0.5em 0;
                    &:hover{
                        text-decoration: underline;
                        // color: var(--grey-200);
                    }
                }
            }

            .highlight{
                text-transform: uppercase;
            }
        }
    }
}

body.menu-open{
    overflow: hidden;
    main, footer, #nav-highlight{
        transition: opacity .3s ease-in;
        opacity: 0.1;
    }
    #site-menu{
        right: 0;
    }

    #menu-toggle{
        .open{ display: none; }
        .close{ display: block!important; }
    }
  
}