<template>
    <div class="menu-bar menu-bar--colored">
        <div class="menu-bar__contents">
            <i class="icon-menu menu-bar__hamburger-btn"
               @click="showDrawer" />
            <logo-link class="menu-bar__logo" />
            <menu-drawer :is-drawer-active="isDrawerActive"
                         @close="hideDrawer" />
            <a class="menu-bar__language-link menu-bar__language-link--en"
               href="/en/">
                En
            </a>
            <a class="menu-bar__language-link menu-bar__language-link--fa"
               href="/">
                فارسی
            </a>
        </div>
    </div>
</template>
<script>
import menuDrawer from "./navigation_menu_drawer";
import logoLink from "./navigation_logo_link";

export default {
    name: "MenuBar",
    components: {
        menuDrawer,
        logoLink
    },
    data() {
        return {
            isDrawerActive: false
        };
    },
    methods: {
        hideDrawer() {
            this.isDrawerActive = false;
        },
        showDrawer() {
            this.isDrawerActive = true;
        }
    },
    watch: {
        $route: {
            handler: "hideDrawer"
        }
    }
};
</script>
<style lang="scss" scoped>
.menu-bar {
    height: $menu-bar-height;
    line-height: $menu-bar-height;

    &--colored {
        background: $color-white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    }

    &__contents {
        padding: 0 $padding-default;
        margin: 0 auto;
        max-width: $app-max-width;

        @media (min-width: $desktop) {
            padding: 0 $padding-default;
            padding-left: 0;
        }
    }

    &__hamburger-btn {
        display: inline-block;
        font-size: 32px;
        margin-left: $padding-default/2;
        vertical-align: middle;

        @media (min-width: $desktop) {
            display: none;
        }
    }

    &__language-link {
        color: $color-text;
        cursor: pointer;
        height: $menu-bar-height;
        line-height: $menu-bar-height;
        float: left;
        overflow: hidden;
        text-decoration: none;
        width: 52px;

        &:hover {
            color: $color-primary;
        }

        &--fa {
            display: none;
            font-family: $font-family;
            text-align: right;

            @media (min-width: $desktop) {
                margin-right: 15px;
            }
        }

        &--en {
            display: block;
            text-align: left;

            @media (min-width: $desktop) {
                margin-left: 15px;
            }
        }
    }

}

[data-lang="en"] {
    .menu-bar {
        &__hamburger-btn {
            margin-left: 0;
            margin-right: $padding-default/2;
        }

        &__contents {
            @media (min-width: $desktop) {
                padding: 0 $padding-default;
                padding-right: 0;
            }
        }

        &__language-link {
            float: right;

            &--fa {
                display: block;
            }

            &--en {
                display: none;
            }
        }
    }
}
</style>