Zeen Component Library

# ZeenHeader

ZeenHeader

# Примеры:

# slots

Название
logo
navigation
actions

# Source Code - исходный код компонента

<template>
  <header class="zeen-header">
    <ZeenContainer>
      <div class="zeen-header__wrapper">
        <div class="zeen-header__logo">
          <slot name="logo"></slot>
        </div>
        <ZeenBurger
          class="zeen-header__burger"
          :showMenu="mobileHeader"
          @click-menu="toggleMobileHeader"
          :openSrc="burgerOpenedSrc"
          :closeSrc="burgerClosedSrc"
        />
        <div class="zeen-header__right-panel">
          <div class="zeen-header__navigation">
            <slot name="navigation"></slot>
          </div>
          <div class="header__actions">
            <slot name="actions"></slot>
          </div>
        </div>
      </div>
      <ZeenHeaderMobile :showHeader="mobileHeader">
        <template #header-mobile-content>
          <slot name="header-mobile-content"></slot>
        </template>
        <template #header-mobile-footer>
          <slot name="header-mobile-footer"></slot>
        </template>
      </ZeenHeaderMobile>
    </ZeenContainer>
  </header>
</template>

<script>
import ZeenContainer from '../ZeenContainer/ZeenContainer'
import ZeenBurger from '../ZeenBurger'
import ZeenHeaderMobile from '../ZeenHeaderMobile'
export default {
  name: 'ZeenHeader',
  components: {
    ZeenContainer,
    ZeenBurger,
    ZeenHeaderMobile,
  },
  props: {
    burgerOpenedSrc: {
      type: String,
      default: require('/src/images/examples/burger.svg'),
    },
    burgerClosedSrc: {
      type: String,
      default: require('/src/images/examples/close_burger.svg'),
    },
  },
  data() {
    return {
      mobileHeader: false,
    }
  },
  mounted() {
    window.addEventListener('resize', this.checkMobileHeaderVisibility)
  },
  destroyed() {
    window.removeEventListener('resize', this.checkMobileHeaderVisibility)
  },
  methods: {
    checkMobileHeaderVisibility() {
      if (window.innerWidth > 1023) {
        this.mobileHeader = false
      }
    },
    toggleMobileHeader() {
      this.mobileHeader = !this.mobileHeader
    },
  },
}
</script>
<style lang="scss">
:root {
  --zeen-header-burger-visible: 1001;
}
</style>
<style lang="scss" scoped>
@import '../../styles/mixins.scss';
.zeen-header {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  &__wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto;
  }
  &__logo {
    flex: 0 0 auto;
  }
  &__burger {
    display: none;
    z-index: var(--zeen-header-burger-visible);
    @include tablets {
      display: block;
    }
  }
  &__right-panel {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    @include tablets {
      display: none;
    }
  }
  &__navigation {
    flex: 1 1 auto;
  }
  &__actions {
    display: flex;
    align-items: center;
  }
}
</style>

← ZeenSidebar →