NUXT_FRONTEND/components/Header/Bottom.vue

<template>
  <div class="header__bottom js-header-bottom" id="js-header-bottom-id">
    <div class="header-bottom section">
      <div class="header-bottom__wrapper section-wrapper">
        <div class="cabbit">
          <nuxt-link to="/news/novgod2023">
            <img v-if="!isMobile()" src="/png/cabbit.png" alt="Год кролика">
          </nuxt-link>
        </div>
        <main class="header-bottom__main">
          <div class="header-bottom__logo">
            <nuxt-link v-if="isMain" class="header-bottom__logo-link" to="/">
              <!--BaseIcon :name="'amic-logo'" /-->
              <img :src="logo" />
            </nuxt-link>
            <a v-else class="header-bottom__logo-link" href="/">
              <!--BaseIcon :name="'amic-logo'" /-->
              <img :src="logo" />
            </a>
          </div>
          <!--div class="header-bottom__action m-hidden">
            <button class="button button_icon">
              <span class="button__icon">
                <BaseIcon :name="'filter'" clear />
              </span>
            </button>
          </div-->
          <div class="header-bottom__nav">
            <NavBar />
          </div>
          <!--<div class="header-bottom__banner">
            <a class="header-bottom__banner-link" href="javascript:void(0)"
              ><img src="@/assets/img/vtb.png" alt="ВТБ"
            /></a>
          </div>-->
        </main>
        <aside class="header-bottom__side">
          <div class="header-bottom__buttons">
            <div class="header-bottom__button">
              <a
                class="button button_grey"
                href="https://fmprod.ru/radiostantsii/item/evropa-plyus/"
                target="_blank"
              ><span class="button__text tg">▶ Слушать радио</span></a
              >
            </div>
            <div class="header-bottom__button">
              <a
                class="button button_grey button_grey-tg"
                href="https://t.me/+zf9tbqRD9o0zOWI6"
                target="_blank"
                ><span class="button__icon"> <BaseIcon :name="'tg'" /></span
                ><span class="button__text tg">Телеграм-канал</span></a
              >
            </div>
            <!--<div class="header-bottom__button">
              <button class="button button_grey">
                <span class="button__text">Предложить новость</span>
              </button>
            </div>-->
          </div>
          <div class="header-bottom__actions">
            <div class="header-bottom__action">
              <Search />
            </div>
            <div class="header-bottom__action">
              <nuxt-link
                :to="{ name: 'user' }"
                tag="button"
                class="button button_icon"
              >
                <span class="button__icon">
                  <BaseIcon :name="'user'" clear
                /></span>
              </nuxt-link>
            </div>
            <div class="header-bottom__action header-bottom__categories">
              <button class="button button_icon" @click="categoriesMenuToggle">
                <span class="button__icon">
                  <BaseIcon name="dots"
                /></span>
              </button>
            </div>
          </div>
          <div class="header-bottom__burger-wrapper">
            <button
              class="header-bottom__burger button"
              @click="mobileMenuToggle"
            >
              <span> </span><span> </span>
            </button>
          </div>
          <div></div>
        </aside>
        <div v-if="menu" class="mobile-menu">
          <div class="amic-logo-invert">
            <img :src="require('~/static/svg/symbol/amic-logo.svg')" />
          </div>
          <button
            class="header-bottom__burger burger-cross button"
            @click="mobileMenuToggle"
          >
            <span></span><span></span>
          </button>
          <ul class="mobile-menu-list">
            <li>
              <a href="/news">Новости</a>
            </li>
            <li>
              <a href="/articles">Читай</a>
            </li>
            <li>
              <a href="/podcasts">Слушай</a>
            </li>
            <li>
              <a href="/video">Смотри</a>
            </li>
          </ul>
          <FooterSocials />
          <br/><br/>
          <a
            class="button button_grey"
            href="https://fmprod.ru/radiostantsii/item/evropa-plyus/"
            target="_blank"
          ><span class="button__text tg">▶ Слушать радио</span></a
          >
          <br/><br/>
          <a
            class="button button_grey button_grey-tg"
            href="https://t.me/+zf9tbqRD9o0zOWI6"
            target="_blank"
          >
            <span class="button__icon"> <BaseIcon :name="'tg'" /></span>
            <span class="button__text">Телеграм-канал</span>
          </a>
        </div>

        <div v-if="menuCategories" class="mobile-menu mobile-menu-categories">
          <button
            class="header-bottom__burger burger-cross button"
            @click="categoriesMenuToggle"
          >
            <span></span><span></span>
          </button>

          <ul class="mobile-menu-list">
            <li v-for="categoryLink in links" :key="categoryLink.alias">
              <nuxt-link :to="{ name : 'news-category', params: { category : categoryLink.alias} }">
                {{ categoryLink.name }}
              </nuxt-link>
            </li>
          </ul>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"

export default {
  data() {
    return {
      menu: false,
      menuCategories: false,
      navbar: null,
      sticky: null,
    };
  },
  methods: {
    isMobile() {
      return this.$device.isMobile
    },
    mobileMenuToggle() {
      this.menu = !this.menu;
    },
    async categoriesMenuToggle() {
      this.menuCategories = !this.menuCategories;

      if(this.categoriesList.data) return;
      await this.$store.dispatch("modules/news/setCategoriesList");
    },
    onscrolling() {
      if (!this.navbar) {
        this.navbar = document.getElementById("js-header-bottom-id");
        this.sticky = this.navbar.offsetTop;
      }
      if (window.pageYOffset >= this.sticky) {
        this.navbar.classList.add("header__bottom_fixed");
      } else {
        this.navbar.classList.remove("header__bottom_fixed");
      }
    },
  },

  mounted() {
    window.addEventListener('scroll', this.onscrolling);
  },

  computed: {
    ...mapGetters({
      categoriesList : "modules/news/categoriesList"
    }),
    nzk_logo(){
      return require('~/static/png/nzk_logo.png');
    },
    isMain() {
      return this.$route.path !== '/'
    },
    links() {
      if(!this.categoriesList.data) return [];

      let list = this.categoriesList.data.filter((link) => {
        return link.alias !== 'articles' && link.alias !== 'video'  && link.alias !== 'podcasts'
      })

      return list
    },

    logo() {
      //By route
      if(this.$route.name && this.$route.name.includes('video')) {
        return require('~/static/svg/symbol/amic-logo-video.svg');
      }

      //By color theme
      switch(this.$colorMode.value) {
        case 'dark': return require('~/static/svg/symbol/amic-logo-dark.svg');
        default: return require('~/static/svg/symbol/amic-logo.svg');
      }
    }
  },

  watch: {
    $route(to, from) {
      if (this.navbar) {
        this.navbar.classList.remove("header__bottom_fixed");
        this.navbar = null;
      }

      if(this.menuCategories) {
        this.menuCategories = false;
      }

      this.onscrolling();
    },
  },
};
</script>

<style lang="less">
.header-bottom__wrapper{
  position: relative;
}
.cabbit{
  position: absolute;
  top: -65px;
  left: 5px;
  height: 65px;
  overflow: hidden;
  img{
    height: 100%;
  }
}
.button_grey-tg {
  margin-right: 40px;
}
.header__bottom {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #fff;
  &_fixed {
    position: fixed;
    top: 0;
    bottom: auto;
    z-index: 100;
    animation: headerFixed 0.3s linear;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);
  }
}
.header__bottom_fixed {
}
.header-bottom {
  &__logo-link {
    img {
      @media (max-width: 576px) {
        height: 18px;
      }
    }
  }

  &__categories {
    display: none;
    @media (max-width: 1000px) {
      display: block;
    }
  }
  &__nav{
    position: relative;
  }
}
.mobile-menu {
  position: fixed;
  background-color: rgba(59, 85, 115, 1);
  left: 0;
  max-height: 100vh;
  height: 100%;
  right: 0;
  animation: translate 0.2s ease;
  z-index: 100000;
  top: 0;
  padding: 20px;
  overflow: auto;
  .amic-logo-invert {
    height: 18px;
    filter: invert(100%);
  }
  .header-bottom__burger {
    width: 24px;
  }
  .mobile-menu-list {
    margin: 60px 0;
    li {
      margin: 20px 0;
      color: rgba(255, 255, 255, 0.5);
      font-size: 22px;
      font-weight: bold;
      a {
        color: white;
      }
    }
  }
}
.burger-cross {
  position: absolute;
  right: 20px;
  top: 30px;
  span:first-child {
    top: auto !important;
    background: white;
    transform: translateY(-50%) rotate(45deg) !important;
  }
  span:last-child {
    background: white;
    transform: translateY(-50%) rotate(-45deg) !important;
    bottom: auto !important;
  }
}
@keyframes translate {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
.nzk_desktop_banner{
  position: absolute;
  width: 100px;
  top: -15px;
  right: -135px;
}
</style>