anephenix/ui

@import '../../../design-system/spacing.scss';
@import '../../../design-system/colours.scss';

/* TODO items

- see if shadow can be extracted into a class/variable as well, seems more like styling choice
- decide how/where to store and reference them 
- apply grid base to padding, dimensions
- Extract links into a sub-component for styling
- Make use of viewports to define media query behaviour

*/
$navbar-background-color: rgba(255, 255, 255, 0.8);
$navbar-border-bottom-color: rgba(255, 255, 255, 0.75);
$navbar-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.0375);
$foreground: rgb(17, 17, 17);

#nav-bar {
    background: $navbar-background-color;
    border-bottom: solid 1px $navbar-border-bottom-color;
    -webkit-backdrop-filter: blur(8px);
    color: $foreground;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    padding: $spacer-one 0px;
    top: 0px;
    left: 0px;
    position: fixed;
    z-index: 2;

    @media screen and (max-width: 767px) {
        width: 100%;
        padding: $spacer-one 0px;

        .container #links {
            display: none;
        }
    }

    .container {
        .withSidePadding {
            width: 100%;
            padding: 0px $spacer-one;
            // display: flex;
            // align-items: center;
            // flex-direction: row;
            // justify-content: space-between;
            display: grid;
            grid-template-columns: 40% 20% 40%;
            align-items: center;

            #logo {
                justify-self: start;
            }

            form {
                justify-self: center;
            }

            ul {
                margin: 0;
            }

            #links {
                justify-self: end;
                a {
                    text-decoration: none;
                    font-size: 10pt;
                    margin: 0px $spacer-one;
                    transition: all 0.3s linear;
                    cursor: pointer;
                    color: $foreground;
                    &:hover {
                        color: lighten($foreground, 25);
                    }
                }
            }
        }
    }
}

@media screen and (prefers-color-scheme: dark) {
    #nav-bar {
        background: $dark;
        border-bottom: solid 1px $dark;
        color: $light;

        .container {
            .withSidePadding {
                ul#desktop-menu {
                    li {
                        a {
                            color: $light;
                            &:hover {
                                color: darken($light, 25);
                            }
                        }
                    }
                }
            }
        }
    }
}