<template>
    <div class="hy-navigation-sidebar">
        <div id="visual" class="hy-hide-scrollbars hy-remove-leading-trailing-margins" :class="{ transitionsEnabled }">
            <slot />
        </div>
    </div>
</template>

<script>
/**
 * Note: This component is not responsible for showing/hiding the sidebar. That is the responsibility of
 * the HyNavigationContainer component. There one can find the open/close mechanism and the logic for
 * disabling body scroll when the sidebar is open.
 */

export default {
    name: "HyNavigationSidebar",
    props: {
        width: {
            type: String,
            default: "300px",
        },
        height: {
            type: String,
            default: "100dvh",
        },
        topInset: {
            type: String,
            default: "0px",
        },
        leftInset: {
            type: String,
            default: "0px",
        },
    },
    watch: {
        width: "emitDimensions",
        height: "emitDimensions",
    },
    methods: {
        emitDimensions() {
            this.$parent.receiveSidebarDimensions({
                width: this.width,
                height: this.height,
            });
        },
    },
    data() {
        return {
            transitionsEnabled: false,
        };
    },
    mounted() {
        this.emitDimensions();

        requestAnimationFrame(() => (this.transitionsEnabled = true));
    },
};
</script>

<style lang="scss">
.hy-navigation-sidebar {
    --width: v-bind(width);
    --height: v-bind(height);

    width: var(--width);
    max-width: var(--width);
    height: max(100%, 100vh);
    z-index: 101;

    display: flex;
    position: relative;

    & > #visual {
        --safe-area: calc(env(safe-area-inset-bottom) + env(safe-area-inset-top));

        width: var(--width);
        height: var(--height);
        position: sticky;
        top: v-bind(topInset);
        left: v-bind(leftInset);
        padding: var(--hy-element-padding);
        padding-bottom: calc(var(--hy-element-padding) + env(safe-area-inset-bottom));
        margin: 0;
        overflow-y: scroll;
        background-color: var(--hy-section-bg-color);

        &.transitionsEnabled {
            .hy-navigation-option {
                transition: var(--hy-element-transition);
                transition-property: background-color, color, border-color, box-shadow;

                &::before {
                    transition: var(--hy-element-transition);
                    transition-property: opacity, transform;
                }
            }
        }
    }

    .hy-navigation-option {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;

        position: relative;
        border: none;
        font-size: var(--hy-font-size);
        font-family: var(--hy-font-family);
        align-items: center;
        text-align: left;
        cursor: pointer;
        width: 100%;
        padding: var(--hy-element-padding-md);
        margin: 5px 0;
        color: var(--hy-font-color-contrast);
        border-radius: var(--hy-element-border-radius);
        background-color: transparent;
        box-shadow: none;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-50%, -50%) scaleY(0);
            height: calc(100% - 20px);
            width: 5px;
            border-radius: 999px;
            background-color: var(--hy-accent-color);
            opacity: 0;
        }

        &:hover {
            background-color: var(--hy-color-gray-3);
        }

        &.selected {
            background-color: var(--hy-color-gray-3);
            color: var(--hy-accent-color);

            &::before {
                opacity: 1;
                transform: translate(-50%, -50%) scaleY(1);
            }
        }

        display: flex;
        gap: var(--hy-flex-gap);

        span {
            margin: 0;
        }
    }
}
</style>
