first commit

2026-05-13 01:43:05 +03:30
commit d2a577f254
297 changed files with 36274 additions and 0 deletions
@@ -0,0 +1,165 @@
+<template>
+  <div class="header-block">
+    <div class="header-block__row">
+      <div class="header-block__menu">
+        <button type="button" class="header-block__menu-btn" @click="ui.toggleSidebar">
+          <SvgIcon name="menu" :size="24" color="#9a9a9a" />
+        </button>
+      </div>
+      <div class="header-block__logo">
+        <img :src="logo" alt="logo" />
+      </div>
+      <div class="header-block__title">
+        <slot>
+          <div v-if="!hasSlotContent && pageTitle">{{ pageTitle }}</div>
+        </slot>
+      </div>
+      <div class="header-block__icons">
+        <ul>
+          <li v-for="item in iconList" :key="item.icon">
+            <button type="button" class="header-block__icon-btn" @click="item.action">
+              <SvgIcon :name="item.icon" :size="24" color="#9a9a9a" />
+              <span v-if="item.count" class="header-block__icon-badge">{{ item.count }}</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="header-block__title-mobile">
+      <slot>
+        <div v-if="!hasSlotContent && pageTitle">{{ pageTitle }}</div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue'
+
+import SvgIcon from '@/components/icons/SvgIcon.vue'
+import { gallery } from '@/utils/gallery'
+import { useUIStore } from '@/store/ui'
+
+defineProps({
+  pageTitle: { type: String, default: '' },
+})
+
+const slots = useSlots()
+const hasSlotContent = computed(() => !!slots.default)
+
+const ui = useUIStore()
+
+const logo = gallery.authLogo
+
+const iconList = [
+  { icon: 'chat', action: () => {} },
+  { icon: 'bell', action: () => {}, count: 5 },
+  { icon: 'user', action: () => {} },
+]
+</script>
+
+<style lang="scss" scoped>
+.header-block {
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+  }
+
+  &__menu {
+    flex-basis: 33.33%;
+
+    @media (min-width: 1024px) {
+      display: none;
+    }
+  }
+
+  &__menu-btn {
+    border: none;
+    background: transparent;
+    border-radius: 9999px;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  &__logo {
+    flex-basis: 33.33%;
+
+    @media (min-width: 1024px) {
+      display: none;
+    }
+
+    img {
+      margin: 0 auto;
+      height: 3.5rem;
+      object-fit: contain;
+    }
+  }
+
+  &__title {
+    display: none;
+    text-align: right;
+    font-family: var(--font-family-fa);
+    font-weight: 500;
+    font-size: 1.125rem;
+
+    @media (min-width: 1024px) {
+      display: block;
+      flex: 1 1 auto;
+    }
+  }
+
+  &__title-mobile {
+    margin-top: 2.5rem;
+    flex: 1 1 auto;
+    text-align: right;
+    font-family: var(--font-family-fa);
+    font-weight: 500;
+    font-size: 1.125rem;
+
+    @media (min-width: 1024px) {
+      display: none;
+    }
+  }
+
+  &__icons {
+    flex-basis: 33.33%;
+
+    ul {
+      list-style: none;
+      display: flex;
+      align-items: center;
+      gap: 0.625rem;
+      justify-content: flex-end;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &__icon-btn {
+    position: relative;
+    border: none;
+    background: transparent;
+    border-radius: 9999px;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  &__icon-badge {
+    position: absolute;
+    top: -0.125rem;
+    right: -0.125rem;
+    padding-top: 0.125rem;
+    height: 1rem;
+    width: 1rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-primary);
+    color: #fff;
+    font-family: var(--font-family-number-fa);
+    font-size: 0.6875rem;
+  }
+}
+</style>