diff --git a/src/App.vue b/src/App.vue index af09408b2e3ebd0d516dbe4a0b23bd1836698e8d..718885e423b29f34cd03112f84f45ab0ad7c5120 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,15 +1,14 @@ <template> <div v-frag> <header class="header-menu"> - <div class="ui container"> + <div class="menu container"> <div class="ui inverted icon menu"> <router-link to="/" class="header item"> <img class="ui mini right spaced image" src="@/assets/img/logo-neogeo-circle.png" /> - <!-- :src="LOGO_PATH" --> - {{ getApplicationName() }} + {{ APPLICATION_NAME }} </router-link> <div @@ -156,8 +155,9 @@ export default { "configuration", ]), ...mapGetters(["project"]), - //LOGO_PATH: () => require(`${configuration.VUE_APP_LOGO_PATH}`), - //APPLICATION_NAME: () => this.configuration.VUE_APP_APPLICATION_NAME, + APPLICATION_NAME: function () { + return this.configuration.VUE_APP_APPLICATION_NAME; + }, PACKAGE_VERSION: () => process.env.PACKAGE_VERSION || "0", userFullname: function () { if (this.user.first_name || this.user.last_name) @@ -165,17 +165,17 @@ export default { return null; }, }, + methods: { logout() { this.$store.dispatch("LOGOUT"); }, - getApplicationName() { - return this.configuration.VUE_APP_APPLICATION_NAME; - }, + clickOutsideMenu(e) { if (!e.target.closest("#menu-dropdown")) this.menuIsOpen = false; }, }, + created() { window.addEventListener("mousedown", this.clickOutsideMenu); }, @@ -190,8 +190,18 @@ export default { @import "./assets/styles/base.css"; @import "./assets/resources/semantic-ui-2.4.2/semantic.min.css"; -.header-menu { - min-width: 560px; +@media screen and (min-width: 560px) { + .header-menu { + min-width: 560px; + } +} + +@media screen and (min-width: 560px) { + .menu.container { + width: auto !important; + margin-left: 1em !important; + margin-right: 1em !important; + } } body {