<commit_before><template>
    <div id="dumonda-me-header">
        <div id="header-container">
            <div id="dumonda-me-logo" hidden-xs-only>
                <img :src="getLogoUrl" @click="$router.push({name: 'index'})"/>
            </div>
            <div class="header-nav" v-if="isAuthenticated">
                <v-menu bottom left>
                    <v-btn icon slot="activator">
                        <v-icon>mdi-dots-vertical</v-icon>
                    </v-btn>
                    <v-list>
                        <v-list-tile @click="$router.push({name: 'setting'})">
                            <v-list-tile-title>{{$t("pages:toolbar.settings")}}</v-list-tile-title>
                        </v-list-tile>
                        <v-divider></v-divider>
                        <v-list-tile @click="showCreateQuestion = true">
                            <v-list-tile-title>{{$t("common:button.askQuestion")}}</v-list-tile-title>
                        </v-list-tile>
                        <v-list-tile @click="showCreateCommitment = true">
                            <v-list-tile-title>{{$t("pages:toolbar.createCommitment")}}</v-list-tile-title>
                        </v-list-tile>
                        <v-divider></v-divider>
                        <v-list-tile @click="logout()">
                            <v-list-tile-title>{{$t("pages:toolbar.logout")}}</v-list-tile-title>
                        </v-list-tile>
                    </v-list>
                </v-menu>
            </div>
            <div class="header-nav" v-else>
                <v-btn outline v-on:click="$router.push({name: 'login'})">{{$t("common:toolbar.login")}}</v-btn>
            </div>
            <div class="header-nav" v-if="!isAuthenticated">
                <v-menu bottom>
                    <v-btn outline slot="activator">
                        {{selectedLanguage.description}}
                    </v-btn>
                    <v-list>
                        <v-list-tile @click="changeLanguage(lang.key)" v-for="lang in getLanguages" :key="lang.key">
                            <v-list-tile-title>{{lang.description}}</v-list-tile-title>
                        </v-list-tile>
                    </v-list>
                </v-menu>
            </div>
            <div class="header-nav" v-if="isAuthenticated">
                <v-btn flat icon @click="$router.push({name: 'user-notifications'})">
                    <v-badge color="secondary" v-model="showNotification" right overlap>
                        <v-icon>mdi-bell-outline</v-icon>
                        <span slot="badge">{{numberOfNotifications}}</span>
                    </v-badge>
                </v-btn>
            </div>
            <div class="header-nav" v-if="isAuthenticated">
                <v-btn flat icon @click="$router.push({name: 'user'})" :class="{active: $route.path === '/user'}">
                    <v-icon>mdi-account-outline</v-icon>
                </v-btn>
            </div>
            <div class="header-nav">
                <v-btn flat icon @click="$router.push({name: 'index'})"
                       :class="{active: $route.path === '/'}">
                    <v-icon>mdi-home-outline</v-icon>
                </v-btn>
            </div>
        </div>
        <create-commitment-dialog v-if="showCreateCommitment" @close-dialog="showCreateCommitment = false">
        </create-commitment-dialog>
        <create-question-dialog v-if="showCreateQuestion" @close-dialog="showCreateQuestion = false">
        </create-question-dialog>
        <v-snackbar top v-model="showError" color="error" :timeout="0">{{$t("common:error.unknown")}}
            <v-btn dark flat @click="showError = false">{{$t("common:button.close")}}</v-btn>
        </v-snackbar>
    </div>
</template>

<script>
    import CreateCommitmentDialog from '~/components/commitment/dialog/CreateDialog.vue'
    import CreateQuestionDialog from '~/components/question/dialog/CreateQuestionDialog.vue'
    import {mapGetters} from 'vuex';

    export default {
        data() {
            return {showCreateCommitment: false, showCreateQuestion: false, showError: false}
        },
        components: {CreateCommitmentDialog, CreateQuestionDialog},
        mounted: function () {
            if (this.$store.state.auth.userIsAuthenticated && this.$route.name !== 'user-notifications') {
                this.$store.dispatch('notification/startCheckNotificationChanged');
            }
        },
        computed: {
            isAuthenticated() {
                return this.$store.state.auth.userIsAuthenticated
            },
            getLanguages() {
                return this.$store.state.i18n.languages
            },
            selectedLanguage() {
                return this.$store.state.i18n.languages.find(lang => lang.key === this.$store.state.i18n.language);
            },
            getLogoUrl() {
                return `${process.env.staticUrl}/img/logo.png`;
            },
            showNotification() {
                return this.numberOfNotifications > 0;
            },
            ...mapGetters({
                numberOfNotifications: 'notification/numberOfNotifications'
            })
        },
        methods: {
            async logout() {
                try {
                    await this.$store.dispatch('auth/logout');
                    this.$store.dispatch('notification/stopCheckNotificationChanged');
                    this.$store.commit('notification/RESET_NOTIFICATION');
                    this.$store.commit('feedFilter/SET_FILTER_TO_PUBLIC_STATE');
                    await this.$store.dispatch('feed/getFeed');
                    this.$router.push({name: 'index'});
                } catch (e) {
                    this.showError = true;
                }
            },
            changeLanguage(lang) {
                this.$store.dispatch('i18n/setLanguage', {language: lang});
            }
        }
    }
</script>

<style lang="scss">
    #dumonda-me-header {
        position: fixed;
        z-index: 100;
        top: 0;
        height: 56px;
        right: 0;
        left: 0;
        background-color: white;
        border-bottom: 1px solid #ddd;
        #header-container {
            max-width: 950px;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            clear: both;
            #dumonda-me-logo {
                display: inline-block;
                cursor: pointer;
                height: 100%;
                img {
                    margin-top: 13px;
                    @media screen and (max-width: $sm) {
                        margin-left: 12px;
                    }
                    @media screen and (max-width: $xs) {
                        margin-top: 18px;
                        height: 20px;
                        margin-left: 12px;
                    }
                }
            }
            .header-nav {
                float: right;
                height: 100%;
                padding-top: 4px;
                button {
                    color: #666666;
                    border-bottom-color: #666666;
                    i.v-icon {
                        color: #666666;
                    }
                }
                .active {
                    i.v-icon {
                        color: $primary-color;
                    }
                }
            }
        }
    }
</style><commit_msg>Alignment adjustments.<commit_after><template>
    <div id="dumonda-me-header">
        <div id="header-container">
            <div id="dumonda-me-logo" hidden-xs-only>
                <img :src="getLogoUrl" @click="$router.push({name: 'index'})"/>
            </div>
            <div class="header-nav" v-if="isAuthenticated">
                <v-menu bottom left>
                    <v-btn icon slot="activator" class="right-outer-element">
                        <v-icon>mdi-dots-vertical</v-icon>
                    </v-btn>
                    <v-list>
                        <v-list-tile @click="$router.push({name: 'setting'})">
                            <v-list-tile-title>{{$t("pages:toolbar.settings")}}</v-list-tile-title>
                        </v-list-tile>
                        <v-divider></v-divider>
                        <v-list-tile @click="showCreateQuestion = true">
                            <v-list-tile-title>{{$t("common:button.askQuestion")}}</v-list-tile-title>
                        </v-list-tile>
                        <v-list-tile @click="showCreateCommitment = true">
                            <v-list-tile-title>{{$t("pages:toolbar.createCommitment")}}</v-list-tile-title>
                        </v-list-tile>
                        <v-divider></v-divider>
                        <v-list-tile @click="logout()">
                            <v-list-tile-title>{{$t("pages:toolbar.logout")}}</v-list-tile-title>
                        </v-list-tile>
                    </v-list>
                </v-menu>
            </div>
            <div class="header-nav" v-else>
                <v-btn outline v-on:click="$router.push({name: 'login'})" class="right-outer-element">
                    {{$t("common:toolbar.login")}}
                </v-btn>
            </div>
            <div class="header-nav" v-if="!isAuthenticated">
                <v-menu bottom>
                    <v-btn outline slot="activator">
                        {{selectedLanguage.description}}
                    </v-btn>
                    <v-list>
                        <v-list-tile @click="changeLanguage(lang.key)" v-for="lang in getLanguages" :key="lang.key">
                            <v-list-tile-title>{{lang.description}}</v-list-tile-title>
                        </v-list-tile>
                    </v-list>
                </v-menu>
            </div>
            <div class="header-nav" v-if="isAuthenticated">
                <v-btn flat icon @click="$router.push({name: 'user-notifications'})">
                    <v-badge color="secondary" v-model="showNotification" right overlap>
                        <v-icon>mdi-bell-outline</v-icon>
                        <span slot="badge">{{numberOfNotifications}}</span>
                    </v-badge>
                </v-btn>
            </div>
            <div class="header-nav" v-if="isAuthenticated">
                <v-btn flat icon @click="$router.push({name: 'user'})" :class="{active: $route.path === '/user'}">
                    <v-icon>mdi-account-outline</v-icon>
                </v-btn>
            </div>
            <div class="header-nav">
                <v-btn flat icon @click="$router.push({name: 'index'})"
                       :class="{active: $route.path === '/'}">
                    <v-icon>mdi-home-outline</v-icon>
                </v-btn>
            </div>
        </div>
        <create-commitment-dialog v-if="showCreateCommitment" @close-dialog="showCreateCommitment = false">
        </create-commitment-dialog>
        <create-question-dialog v-if="showCreateQuestion" @close-dialog="showCreateQuestion = false">
        </create-question-dialog>
        <v-snackbar top v-model="showError" color="error" :timeout="0">{{$t("common:error.unknown")}}
            <v-btn dark flat @click="showError = false">{{$t("common:button.close")}}</v-btn>
        </v-snackbar>
    </div>
</template>

<script>
    import CreateCommitmentDialog from '~/components/commitment/dialog/CreateDialog.vue'
    import CreateQuestionDialog from '~/components/question/dialog/CreateQuestionDialog.vue'
    import {mapGetters} from 'vuex';

    export default {
        data() {
            return {showCreateCommitment: false, showCreateQuestion: false, showError: false}
        },
        components: {CreateCommitmentDialog, CreateQuestionDialog},
        mounted: function () {
            if (this.$store.state.auth.userIsAuthenticated && this.$route.name !== 'user-notifications') {
                this.$store.dispatch('notification/startCheckNotificationChanged');
            }
        },
        computed: {
            isAuthenticated() {
                return this.$store.state.auth.userIsAuthenticated
            },
            getLanguages() {
                return this.$store.state.i18n.languages
            },
            selectedLanguage() {
                return this.$store.state.i18n.languages.find(lang => lang.key === this.$store.state.i18n.language);
            },
            getLogoUrl() {
                return `${process.env.staticUrl}/img/logo.png`;
            },
            showNotification() {
                return this.numberOfNotifications > 0;
            },
            ...mapGetters({
                numberOfNotifications: 'notification/numberOfNotifications'
            })
        },
        methods: {
            async logout() {
                try {
                    await this.$store.dispatch('auth/logout');
                    this.$store.dispatch('notification/stopCheckNotificationChanged');
                    this.$store.commit('notification/RESET_NOTIFICATION');
                    this.$store.commit('feedFilter/SET_FILTER_TO_PUBLIC_STATE');
                    await this.$store.dispatch('feed/getFeed');
                    this.$router.push({name: 'index'});
                } catch (e) {
                    this.showError = true;
                }
            },
            changeLanguage(lang) {
                this.$store.dispatch('i18n/setLanguage', {language: lang});
            }
        }
    }
</script>

<style lang="scss">
    #dumonda-me-header {
        position: fixed;
        z-index: 100;
        top: 0;
        height: 56px;
        right: 0;
        left: 0;
        background-color: white;
        border-bottom: 1px solid #ddd;
        #header-container {
            max-width: 950px;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            clear: both;
            #dumonda-me-logo {
                display: inline-block;
                cursor: pointer;
                height: 100%;
                img {
                    margin-top: 13px;
                    @media screen and (max-width: $sm) {
                        margin-left: 12px;
                    }
                    @media screen and (max-width: $xs) {
                        margin-top: 18px;
                        height: 20px;
                        margin-left: 12px;
                    }
                }
            }
            .header-nav {
                float: right;
                height: 100%;
                padding-top: 4px;
                button {
                    color: #666666;
                    border-bottom-color: #666666;
                    i.v-icon {
                        color: #666666;
                    }
                }
                .active {
                    i.v-icon {
                        color: $primary-color;
                    }
                }
                .right-outer-element {
                    margin-right: 0;
                }
            }
        }
    }
</style>
{'fraction_non_alphanumeric': 0.1406879250016505, 'fraction_numerical': 0.008516537928302634, 'mean_word_length': 1.2663076002393776, 'pattern_counts': {'":': 0, '<': 181, '<?xml version=': 0, '>': 185, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6953771', 'n_tokens_mistral': 4312, 'n_tokens_neox': 4005, 'n_words': 619}