itube-specs 0.0.866 → 0.0.868

package/assets/scss/themes/dark/_theme.scss

@@ -338,6 +338,18 @@ $language-value-text: $color-white;
 $language-description: $color-zinc-500;
 $language-empty-text: $color-zinc-300;
 
+// ─── Niche ───
+$niche-trigger-text: $color-zinc-400;
+$niche-angle--hover: $color-white;
+$niche-title: $color-zinc-500;
+$niche-value-text: $color-white;
+$niche-menu-bg: $color-night;
+$niche-menu-border: $color-zinc-800;
+$niche-item-text: $color-zinc-300;
+$niche-item-bg--hover: $color-zinc-800;
+$niche-item-text--current: $color-white;
+$niche-item-bg--current: $color-zinc-700;
+
 // ─── Footer language ───
 $footer-language-bg: $color-zinc-800-50;
 $footer-language-bg--hover: $color-zinc-700;

package/assets/scss/themes/light/_theme.scss

@@ -395,6 +395,18 @@ $language-value-text: $color-white;
 $language-description: $color-gray-500;
 $language-empty-text: $color-gray-400;
 
+// ─── Niche ───
+$niche-trigger-text: $color-gray-500;
+$niche-angle--hover: $color-gray-300;
+$niche-title: $color-gray-400;
+$niche-value-text: $color-white;
+$niche-menu-bg: $color-slate-850;
+$niche-menu-border: $color-white-10;
+$niche-item-text: $color-gray-300;
+$niche-item-bg--hover: $color-slate-750;
+$niche-item-text--current: $color-white;
+$niche-item-bg--current: $color-indigo-soft;
+
 // ─── Footer language ───
 $footer-language-bg: $color-slate-750;
 $footer-language-bg--hover: $color-slate-700;

package/components/layout/burger.vue

@@ -68,6 +68,11 @@
         </div>
       </nav>
 
+      <LayoutNiche
+        class="layout-burger__niche"
+        icon-size="20"
+      />
+
       <LayoutLanguage
         class="layout-burger__language"
         icon-size="20"
@@ -257,6 +262,10 @@ router.afterEach(() => {
   padding-bottom: 12px;
 }
 
+.layout-burger__niche {
+  margin-bottom: 12px;
+}
+
 .layout-burger__close {
   position: fixed;
   top: 16px;

package/components/layout/header.vue

@@ -10,6 +10,11 @@
       glow
       class="layout-header__logo"
     />
+    <LayoutNiche
+      class="layout-header__niche _from-sm"
+      icon-size="20"
+    />
+
     <div
       ref="languageRef"
       class="layout-header__language _from-sm"
@@ -135,7 +140,7 @@ $breakpoint: sm;
   width: 100%;
 
   @include from-br(sm) {
-    grid-template-columns: auto 1fr auto auto;
+    grid-template-columns: auto 1fr auto auto auto;
   }
 }
 
@@ -180,7 +185,14 @@ $breakpoint: sm;
 .layout-header__user,
 .layout-header__sign-up {
   @include from-br(sm) {
-    grid-column: 4;
+    grid-column: 5;
+    grid-row: 1;
+  }
+}
+
+.layout-header__niche {
+  @include from-br(sm) {
+    grid-column: 3;
     grid-row: 1;
   }
 }
@@ -194,7 +206,7 @@ $breakpoint: sm;
 .layout-header__language {
   @include from-br(sm) {
     position: relative;
-    grid-column: 3;
+    grid-column: 4;
     grid-row: 1;
   }
 }

package/components/layout/niche.vue

@@ -0,0 +1,179 @@
+<template>
+  <div
+    v-if="niches.length > 1"
+    ref="nicheRef"
+    class="layout-niche"
+    @keydown.esc="isOpen = false"
+  >
+    <button
+      :class="{'--open': isOpen}"
+      :aria-expanded="isOpen"
+      :aria-label="$t('niche')"
+      class="layout-niche__trigger"
+      type="button"
+      @click="isOpen = !isOpen"
+    >
+      <UiIcon
+        :name="currentNiche.icon"
+        :size="iconSize"
+        class="layout-niche__icon"
+      />
+      <span class="layout-niche__current _to-sm">
+        <span>{{ $t('niche') }}:&nbsp;</span>
+        <span class="layout-niche__text">{{ $t(currentNiche.label) }}</span>
+      </span>
+      <UiIcon
+        class="layout-niche__angle"
+        name="angle-down"
+        size="12"
+      />
+    </button>
+    <ul
+      v-if="isOpen"
+      class="layout-niche__list"
+    >
+      <li
+        v-for="item in niches"
+        :key="`niche-${item.name}`"
+      >
+        <button
+          :class="{'--current': item.name === currentNiche.name}"
+          :aria-current="item.name === currentNiche.name ? 'true' : undefined"
+          class="layout-niche__item"
+          type="button"
+          @click="select(item.name)"
+        >
+          <UiIcon
+            :name="item.icon"
+            class="layout-niche__item-icon"
+            size="20"
+          />
+          {{ $t(item.label) }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core';
+import type { Niche } from '../../runtime';
+
+withDefaults(defineProps<{
+      iconSize?: string
+    }>(), {
+      iconSize: '20'
+    }
+);
+
+const { niches, currentNiche, changeNiche } = useNiches();
+
+const nicheRef = ref<HTMLElement>();
+const isOpen = ref(false);
+
+onClickOutside(nicheRef, () => {
+  isOpen.value = false;
+});
+
+function select(name: Niche) {
+  isOpen.value = false;
+  changeNiche(name);
+}
+</script>
+
+<style lang="scss">
+.layout-niche {
+  display: grid;
+
+  @include from-br(sm) {
+    position: relative;
+  }
+}
+
+.layout-niche__trigger {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: start;
+  column-gap: 6px;
+  padding: 6px 8px;
+  color: $niche-trigger-text;
+
+  @include to-br(sm) {
+    grid-template-columns: auto 1fr auto;
+    width: 100%;
+    padding: 10px 16px;
+    column-gap: 16px;
+  }
+}
+
+.layout-niche__current {
+  @include font-sm;
+
+  display: grid;
+  grid-template-columns: auto 1fr;
+  color: $niche-title;
+}
+
+.layout-niche__text {
+  color: $niche-value-text;
+  font-weight: 500;
+}
+
+.layout-niche__angle {
+  pointer-events: none;
+  transition: transform var(--transition), color var(--transition);
+}
+
+.layout-niche__trigger:hover .layout-niche__angle {
+  color: $niche-angle--hover;
+}
+
+.layout-niche__trigger.--open .layout-niche__angle {
+  transform: rotate(180deg);
+}
+
+.layout-niche__list {
+  display: grid;
+
+  @include from-br(sm) {
+    position: absolute;
+    right: 0;
+    bottom: -8px;
+    z-index: $z-index-plus;
+    min-width: 180px;
+    padding: 8px;
+    background-color: $niche-menu-bg;
+    border: 1px solid $niche-menu-border;
+    border-radius: $radius-xl;
+    transform: translateY(100%);
+  }
+}
+
+.layout-niche__item {
+  @include font-sm;
+
+  display: grid;
+  grid-template-columns: 20px 1fr;
+  align-items: center;
+  column-gap: 12px;
+  width: 100%;
+  padding: 10px 16px;
+  color: $niche-item-text;
+  text-align: start;
+  border-radius: $radius-lg;
+
+  @include hover(background-color) {
+    background-color: $niche-item-bg--hover;
+  }
+
+  @include from-br(sm) {
+    padding: 8px 10px;
+  }
+}
+
+.layout-niche__item.--current {
+  color: $niche-item-text--current;
+  background-color: $niche-item-bg--current;
+}
+</style>

package/composables/use-niches.ts

@@ -0,0 +1,47 @@
+import type { Niche } from '../runtime';
+import { NicheHelper } from '../utils/niche-helper';
+
+/** Иконка из assets/icons/common под каждую нишу. */
+const NICHE_ICONS: Record<Niche, string> = {
+  straight: 'hetero',
+  gay: 'gay',
+  shemale: 'shemale',
+};
+
+export interface INicheItem {
+  name: Niche,
+  icon: string,
+  /** Ключ i18n с названием ниши */
+  label: string,
+}
+
+/**
+ * Ниши сайта для переключателя: список из per-site конфига проекта (appConfig.niches),
+ * текущая — из useState('niche') с фолбэком на дефолтную нишу окружения.
+ */
+export const useNiches = () => {
+  const defaultNiche = NicheHelper.getSiteDefaultNiche();
+  const current = useState<Niche>('niche', () => defaultNiche);
+  const localePath = useLocalePath();
+
+  const niches = computed<INicheItem[]>(() =>
+    ((useAppConfig().niches as Niche[]) || []).map(name => ({
+      name,
+      icon: NICHE_ICONS[name] || 'earth',
+      label: `niches.${name}`,
+    })));
+
+  const currentNiche = computed(() => niches.value.find(item => item.name === current.value) || niches.value[0]);
+
+  /**
+   * Ниша влияет и на роутинг (префикс пути), и на заголовок X-Niche в SSR-запросах,
+   * поэтому переключение — полной перезагрузкой на корень выбранной ниши.
+   */
+  function changeNiche(name: Niche) {
+    if (name === current.value) return;
+    current.value = name;
+    window.location.href = localePath(name === defaultNiche ? '/' : `/${name}`);
+  }
+
+  return { niches, currentNiche, changeNiche };
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.866",
+  "version": "0.0.868",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {