NUXT_FRONTEND/components/News/Catalog.vue

<template>
  <section class="catalog section">
    <div class="catalog__wrapper section-wrapper">
      <div class="catalog__container">
        <aside class="catalog__side">
          <div class="catalog__menu">
            <div class="catalog-menu">
              <div class="catalog-menu__wrapper">
                <ul class="catalog-menu__list">
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Алтай</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Барнаул</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Коронавирус</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Бийск</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Рубцовск</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Республика Алтай</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a
                      class="catalog-menu__link is-active"
                      href="javascript:void(0)"
                      >Политика</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Экономика</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Общество</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Недвижимость</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Происшествия</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Мобильный репортер</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Экология</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Здоровье</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Авто</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Инфографика</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Культура</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Туризм</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Спорт</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Наука</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Тесты и игры</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a
                      class="catalog-menu__link catalog-menu__link_green"
                      href="javascript:void(0)"
                      >«Люди говорят»</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Образование</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Кухня</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Дача</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a
                      class="catalog-menu__link catalog-menu__link_orange"
                      href="javascript:void(0)"
                      >Только на Amic</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Подкасты</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Вакансии</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >А это вообще законно?</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a
                      class="catalog-menu__link catalog-menu__link_pink"
                      href="javascript:void(0)"
                      >Amic-милосердие</a
                    >
                  </li>
                  <li class="catalog-menu__item">
                    <a class="catalog-menu__link" href="javascript:void(0)"
                      >Марафон Победы</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="catalog__side-banner">
            <div class="banner">
              <img src="@/assets/img/banner/banner3.jpg" alt="bb" />
            </div>
          </div>
        </aside>
        <main class="catalog__main">
          <div class="catalog-main">
            <div class="catalog-main__wrapper">
              <div class="catalog-main__topic">
                <ul class="catalog-main__topic-list">
                  <li class="catalog-main__topic-item">
                    <a
                      class="catalog-main__topic-link"
                      href="javascript:void(0)"
                      >Новости</a
                    >
                  </li>
                  <li class="catalog-main__topic-item">
                    <a
                      class="catalog-main__topic-link"
                      href="javascript:void(0)"
                      >Политика</a
                    >
                  </li>
                </ul>
              </div>
              <div class="catalog-main__header">
                <h1>Политика</h1>
                <a
                  class="catalog-main__subscribe button button_grey-dark button_grey-dark-short"
                  ><span class="button__text">Подписаться</span></a
                >
              </div>
              <div class="catalog-main__list">
                <div class="catalog-list">
                  <ul class="catalog-list__news">
                    <NewsItem
                      v-for="item in categoryItems"
                      :key="item.source.id"
                      :news="item"
                    />
                  </ul>
                  <div class="catalog-list__actions">
                    <button
                      class="catalog-list__action button button_grey-load"
                    >
                      <span class="button__icon">
                        <BaseIcon :name="'refresh'" /></span
                      ><span class="button__text">Показать еще</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    categoryItems: {
      type: Array,
    },
  },
};
</script>

<style>
</style>