<commit_before><template>
  <div class="app-navbar-actions">
    <color-dropdown class="app-navbar-actions__item"/>
    <message-dropdown class="app-navbar-actions__item"/>
    <notification-dropdown class="app-navbar-actions__item"/>
    <!-- <settings-dropdown class="app-navbar-actions__item" /> -->
    <language-dropdown class="app-navbar-actions__item"/>
    <profile-dropdown class="app-navbar-actions__item app-navbar-actions__item--profile">
      <span>{{userName}}</span>
    </profile-dropdown>
  </div>
</template>

<script>
import LanguageDropdown from './dropdowns/LanguageDropdown'
import ProfileDropdown from './dropdowns/ProfileDropdown'
import NotificationDropdown from './dropdowns/NotificationDropdown'
import MessageDropdown from './dropdowns/MessageDropdown'
import ColorDropdown from './dropdowns/color-dropdown/ColorDropdown'
import SettingsDropdown from './dropdowns/SettingsDropdown'

export default {
  name: 'app-navbar-actions',

  components: {
    // SettingsDropdown,
    ColorDropdown,
    MessageDropdown,
    NotificationDropdown,
    LanguageDropdown,
    ProfileDropdown,
  },

  props: {
    userName: {
      type: String,
      default: '',
    },
    isTopBar: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    isTopBarProxy: {
      get () {
        return this.isTopBar
      },
      set (isTopBar) {
        this.$emit('update:isTopBar', isTopBar)
      },
    },
  },
}
</script>

<style lang="scss">
.app-navbar-actions {
  display: flex;
  align-items: center;
  
  &__item {
    padding: 0;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    
    svg {
      height: 24px;
    }

    &:last-of-type {
      margin-right: 0;
    }

    &--profile {
      display: flex;
      justify-content: center;
      margin: auto 0 auto 1.25rem;
    }

    @media screen and (max-width: 768px) {<commit_msg>Fix #808. Navbar icon buttons is primary color now.<commit_after><template>
  <div class="app-navbar-actions">
    <color-dropdown class="app-navbar-actions__item"/>
    <message-dropdown class="app-navbar-actions__item"/>
    <notification-dropdown class="app-navbar-actions__item"/>
    <!-- <settings-dropdown class="app-navbar-actions__item" /> -->
    <language-dropdown class="app-navbar-actions__item"/>
    <profile-dropdown class="app-navbar-actions__item app-navbar-actions__item--profile">
      <span>{{userName}}</span>
    </profile-dropdown>
  </div>
</template>

<script>
import LanguageDropdown from './dropdowns/LanguageDropdown'
import ProfileDropdown from './dropdowns/ProfileDropdown'
import NotificationDropdown from './dropdowns/NotificationDropdown'
import MessageDropdown from './dropdowns/MessageDropdown'
import ColorDropdown from './dropdowns/color-dropdown/ColorDropdown'
import SettingsDropdown from './dropdowns/SettingsDropdown'

export default {
  name: 'app-navbar-actions',

  components: {
    // SettingsDropdown,
    ColorDropdown,
    MessageDropdown,
    NotificationDropdown,
    LanguageDropdown,
    ProfileDropdown,
  },

  props: {
    userName: {
      type: String,
      default: '',
    },
    isTopBar: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    isTopBarProxy: {
      get () {
        return this.isTopBar
      },
      set (isTopBar) {
        this.$emit('update:isTopBar', isTopBar)
      },
    },
  },
}
</script>

<style lang="scss">
.app-navbar-actions {
  display: flex;
  align-items: center;
  color: var(--va-primary);
  fill: var(--va-primary);
  
  &__item {
    padding: 0;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
    
    svg {
      height: 24px;
    }

    &:last-of-type {
      margin-right: 0;
    }

    &--profile {
      display: flex;
      justify-content: center;
      margin: auto 0 auto 1.25rem;
    }

    @media screen and (max-width: 768px) {
{'fraction_non_alphanumeric': 0.13899714211483502, 'fraction_numerical': 0.009612886464016628, 'mean_word_length': 2.900709219858156, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 37, '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': '4819092', 'n_tokens_mistral': 1272, 'n_tokens_neox': 1203, 'n_words': 234}