itube-specs 0.0.1013 → 0.0.1018

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

@@ -389,16 +389,25 @@ $language-description: $color-zinc-500;
 $language-empty-text: $color-zinc-300;
 
 // ─── Niche ───
+$niche-trigger-bg: $color-zinc-800-50;
+$niche-trigger-bg--hover: $color-zinc-700;
 $niche-trigger-text: $color-zinc-400;
-$niche-angle--hover: $color-white;
-$niche-title: $color-zinc-500;
-$niche-value-text: $color-white;
+$niche-trigger-text--hover: $color-white;
+$niche-value-text: $color-zinc-200;
 $niche-menu-bg: $color-night;
 $niche-menu-border: $color-zinc-800;
+$niche-menu-shadow: 0 20px 25px -5px #{$mono-black-10}, 0 8px 10px -6px #{$mono-black-10};
 $niche-item-text: $color-zinc-300;
 $niche-item-bg--hover: $color-zinc-800;
+$niche-item-icon: $color-zinc-400;
+$niche-item-check: $color-white;
 $niche-item-text--current: $color-white;
 $niche-item-bg--current: $color-zinc-700;
+$niche-switch-bg: $color-zinc-800;
+$niche-switch-text: $color-zinc-400;
+$niche-switch-text--hover: $color-white;
+$niche-switch-bg--checked: $color-zinc-700;
+$niche-switch-text--checked: $color-white;
 
 // ─── Footer language ───
 $footer-language-bg: $color-zinc-800-50;
@@ -438,6 +447,8 @@ $header-burger-icon: $color-zinc-200;
 $header-user-icon: $color-zinc-500;
 $header-language-trigger: $color-zinc-400;
 $header-language-trigger--hover: $color-white;
+$header-language-trigger-bg: transparent;
+$header-language-trigger-bg--hover: transparent;
 $header-language-badge-bg: $color-zinc-800;
 $header-language-badge-text: $color-zinc-200;
 $header-language-menu-bg: $color-night;

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

@@ -445,16 +445,25 @@ $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-trigger-bg: $color-slate-750;
+$niche-trigger-bg--hover: $color-slate-700;
+$niche-trigger-text: $color-gray-400;
+$niche-trigger-text--hover: $color-white;
+$niche-value-text: $color-gray-200;
 $niche-menu-bg: $color-slate-850;
 $niche-menu-border: $color-white-10;
+$niche-menu-shadow: 0 20px 25px -5px #{$mono-black-25}, 0 8px 10px -6px #{$mono-black-25};
 $niche-item-text: $color-gray-300;
 $niche-item-bg--hover: $color-slate-750;
+$niche-item-icon: $color-gray-400;
+$niche-item-check: $color-white;
 $niche-item-text--current: $color-white;
-$niche-item-bg--current: $color-indigo-soft;
+$niche-item-bg--current: $color-slate-700;
+$niche-switch-bg: $color-slate-750;
+$niche-switch-text: $color-gray-400;
+$niche-switch-text--hover: $color-white;
+$niche-switch-bg--checked: $color-slate-700;
+$niche-switch-text--checked: $color-white;
 
 // ─── Footer language ───
 $footer-language-bg: $color-slate-750;
@@ -492,9 +501,11 @@ $burger-item-child-icon: $color-gray-400;
 $header-bg: $color-slate-800;
 $header-burger-icon: $color-gray-200;
 $header-user-icon: $color-gray-500;
-$header-language-trigger: $color-gray-500;
-$header-language-trigger--hover: $color-gray-300;
-$header-language-badge-bg: $color-slate-750;
+$header-language-trigger: $color-white;
+$header-language-trigger--hover: $color-white;
+$header-language-trigger-bg: $color-slate-750;
+$header-language-trigger-bg--hover: $color-slate-700;
+$header-language-badge-bg: $color-slate-850;
 $header-language-badge-text: $color-white;
 $header-language-menu-bg: $color-slate-850;
 $header-language-menu-border: $color-white-10;

package/components/layout/burger.vue

@@ -19,6 +19,11 @@
       />
     </button>
     <div class="layout-burger__wrapper">
+      <LayoutNiche
+        burger
+        class="layout-burger__niche"
+      />
+
       <div class="layout-burger__buttons">
         <NuxtLink
           v-if="isAuthorized && data"
@@ -69,11 +74,6 @@
         </div>
       </nav>
 
-      <LayoutNiche
-        class="layout-burger__niche"
-        icon-size="20"
-      />
-
       <LayoutLanguage
         burger
         class="layout-burger__language"

package/components/layout/footer-language.vue

@@ -76,8 +76,9 @@ function handler() {
   column-gap: 8px;
   align-items: center;
   flex-wrap: nowrap;
-  padding: 6px 12px;
-  border-radius: $radius;
+  height: 36px;
+  padding: 0 12px;
+  border-radius: $radius-md;
   background-color: $footer-language-bg;
   color: $footer-language-text;
 

package/components/layout/footer.vue

@@ -57,23 +57,17 @@ $breakpoint-footer: sm;
 
 .layout-footer__middle {
   display: flex;
-  flex-direction: column;
-  row-gap: 16px;
+  column-gap: 8px;
   align-items: center;
 
   @include from-br($breakpoint-footer) {
-    flex-direction: row;
-    column-gap: 24px;
     margin: 0 auto;
   }
 }
 
 .layout-footer__niche .layout-niche__list {
-  @include from-br($breakpoint-footer) {
-    top: -8px;
-    bottom: auto;
-    transform: translateY(-100%);
-  }
+  top: auto;
+  bottom: calc(100% + 8px);
 }
 
 .layout-footer__copyright {

package/components/layout/header.vue

@@ -10,15 +10,15 @@
       glow
       class="layout-header__logo"
     />
-    <LayoutNotifications
-      v-if="featureFlags.FeatureFollowEnabled"
-      class="layout-header__notifications"
-    />
 
     <LayoutNiche
       class="layout-header__niche _from-sd"
       icon-size="20"
     />
+    <LayoutNotifications
+      v-if="featureFlags.FeatureFollowEnabled"
+      class="layout-header__notifications"
+    />
 
     <div
       ref="languageRef"
@@ -127,7 +127,7 @@ function closeLanguage() {
   width: 100%;
 
   @include from-br($brkpnt-burger) {
-    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
+    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
   }
 
   /* поиск | лого | колокольчик | бургер — 1fr держит лого по центру */
@@ -139,7 +139,7 @@ function closeLanguage() {
 
 .layout-header.--no-notifications {
   @include from-br($brkpnt-burger) {
-    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
+    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
   }
 
   @include to-br($brkpnt-burger) {
@@ -147,12 +147,6 @@ function closeLanguage() {
   }
 }
 
-.layout-header.--no-notifications .layout-header__niche {
-  @include from-br($brkpnt-burger) {
-    grid-column: 3;
-  }
-}
-
 .layout-header.--no-notifications .layout-header__language {
   @include from-br($brkpnt-burger) {
     grid-column: 4;
@@ -200,16 +194,15 @@ function closeLanguage() {
 
 /**
  * Поиск стоит строго по центру ШАПКИ, а не по центру свободного места: он растянут
- * на всю строку сетки и центрирован `justify-self`. Иначе центр уезжал влево —
- * правая группа (колокольчик, ниша, язык, вход) шире логотипа, и с добавлением
- * переключателя ниш перекос дошёл до сотни пикселей.
+ * на всю строку сетки и центрирован `justify-self`. Иначе центр уезжал бы к более
+ * узкой группе: левая (лого + ниша) и правая (колокольчик, язык, вход) разной ширины.
  *
  * Наезжать при этом не на что: по обе стороны резервируется `--header-side-space`
- * — ширина более широкой (правой) группы: колокольчик, ниша 54, язык и вход.
+ * — ширина более широкой группы (сейчас левая: лого + ниша ~340, правая ~290).
  * Считается БЕЗ бокового паддинга шапки, потому что `100%` у поиска — это уже
  * контентная ширина. Не хватило места — поиск сужается, а боковые группы остаются
  * на своих местах. Значение вынесено в переменную: у сайта без переключателя ниш
- * правая группа уже, и он может его уменьшить.
+ * левая группа уже, и он может его уменьшить.
  */
 .layout-header__search {
   --header-side-space: 358px;
@@ -246,8 +239,9 @@ function closeLanguage() {
 
 .layout-header__niche {
   @include from-br($brkpnt-burger) {
-    grid-column: 4;
+    grid-column: 2;
     grid-row: 1;
+    margin-left: 4px;
   }
 }
 
@@ -259,7 +253,7 @@ function closeLanguage() {
 
 .layout-header__notifications {
   @include from-br($brkpnt-burger) {
-    grid-column: 3;
+    grid-column: 4;
     grid-row: 1;
   }
 }
@@ -272,18 +266,22 @@ function closeLanguage() {
   }
 }
 
-.layout-header__language-trigger{
+.layout-header__language-trigger {
   @include from-br($brkpnt-burger) {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    padding: 6px 8px;
-    gap: 6px;
+    column-gap: 8px;
+    height: 36px;
+    padding: 0 12px;
     color: $header-language-trigger;
+    background-color: $header-language-trigger-bg;
+    border-radius: $radius-md;
   }
 
-  @include hover(color) {
+  @include hover(color, background-color) {
     color: $header-language-trigger--hover;
+    background-color: $header-language-trigger-bg--hover;
   }
 }
 

package/components/layout/niche-list.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    :aria-label="$t('niche')"
+    class="layout-niche-list"
+    role="listbox"
+  >
+    <button
+      v-for="item in niches"
+      :key="`niche-${item.name}`"
+      :class="{'--current': item.name === current}"
+      :aria-selected="item.name === current"
+      class="layout-niche-list__item"
+      role="option"
+      type="button"
+      @click="$emit('select', item.name)"
+    >
+      <UiIcon
+        :name="item.icon"
+        class="layout-niche-list__icon"
+        size="20"
+      />
+      <span class="layout-niche-list__text">{{ $t(item.label) }}</span>
+      <UiIcon
+        v-if="item.name === current"
+        class="layout-niche-list__check"
+        name="check"
+        size="20"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Niche } from '../../runtime';
+import type { INicheItem } from '../../composables/use-niches';
+
+defineProps<{
+  niches: INicheItem[]
+  current: Niche
+}>();
+
+defineEmits<{
+  select: [name: Niche]
+}>();
+</script>
+
+<style lang="scss">
+.layout-niche-list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+}
+
+.layout-niche-list__item {
+  @include font-sm;
+
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+  width: 100%;
+  padding: 10px 8px;
+  color: $niche-item-text;
+  text-align: start;
+  border-radius: $radius-md;
+
+  @include hover(background-color) {
+    background-color: $niche-item-bg--hover;
+  }
+}
+
+.layout-niche-list__item.--current {
+  color: $niche-item-text--current;
+  background-color: $niche-item-bg--current;
+  pointer-events: none;
+}
+
+.layout-niche-list__icon {
+  flex-shrink: 0;
+  color: $niche-item-icon;
+}
+
+.layout-niche-list__text {
+  flex: 1;
+}
+
+.layout-niche-list__check {
+  flex-shrink: 0;
+  color: $niche-item-check;
+}
+</style>

package/components/layout/niche.vue

@@ -1,13 +1,33 @@
 <template>
   <div
-    v-if="niches.length > 1"
+    v-if="niches.length > 1 && burger"
+    :aria-label="$t('niche')"
+    class="layout-niche --burger"
+    role="radiogroup"
+  >
+    <button
+      v-for="item in niches"
+      :key="`niche-${item.name}`"
+      :class="{'--checked': item.name === currentNiche.name}"
+      :aria-checked="item.name === currentNiche.name"
+      class="layout-niche__option"
+      role="radio"
+      type="button"
+      @click="changeNiche(item.name)"
+    >
+      {{ $t(item.label) }}
+    </button>
+  </div>
+  <div
+    v-else-if="niches.length > 1"
     ref="nicheRef"
     class="layout-niche"
   >
     <button
       :class="{'--open': isOpen}"
       :aria-expanded="isOpen"
-      :aria-label="$t('niche')"
+      :aria-label="`${$t('niche')}: ${$t(currentNiche.label)}`"
+      aria-haspopup="listbox"
       class="layout-niche__trigger"
       type="button"
       @click="isOpen = !isOpen"
@@ -17,55 +37,56 @@
         :size="iconSize"
         class="layout-niche__icon"
       />
-      <span class="layout-niche__current _to-sd">
-        <span>{{ $t('niche') }}:&nbsp;</span>
-        <span class="layout-niche__text">{{ $t(currentNiche.label) }}</span>
-      </span>
+      <span class="layout-niche__text">{{ $t(currentNiche.label) }}</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}`"
+    <transition mode="out-in">
+      <UiPopup
+        v-if="isBurgerMenu && isOpen"
+        v-model="isOpen"
+        sheet
       >
-        <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>
+        <template #title>{{ $t('model.orientation') }}</template>
+        <LayoutNicheList
+          :niches="niches"
+          :current="currentNiche.name"
+          class="layout-niche__sheet"
+          @select="select"
+        />
+      </UiPopup>
+    </transition>
+    <LayoutNicheList
+      v-if="!isBurgerMenu && isOpen"
+      :niches="niches"
+      :current="currentNiche.name"
+      class="layout-niche__list"
+      @select="select"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import type { Niche } from '../../runtime';
+import { checkDeviceWidth } from '../../runtime';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 
 withDefaults(defineProps<{
       iconSize?: string
+      burger?: boolean
     }>(), {
-      iconSize: '20'
+      iconSize: '20',
+      burger: false
     }
 );
 
 const { niches, currentNiche, changeNiche } = useNiches();
 
+const { isBurgerMenu } = checkDeviceWidth(CSS_BREAKPOINTS);
+
 const nicheRef = ref<HTMLElement>();
 const isOpen = ref(false);
 
@@ -81,97 +102,93 @@ function select(name: Niche) {
 
 <style lang="scss">
 .layout-niche {
+  position: relative;
   display: grid;
+  justify-content: start;
+}
+
+.layout-niche.--burger {
+  display: flex;
+  column-gap: 4px;
+  width: 100%;
+  padding: 4px;
+  background-color: $niche-switch-bg;
+  border-radius: $radius-md;
+}
+
+.layout-niche__option {
+  @include font-sm;
 
-  @include from-br($brkpnt-burger) {
-    position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  color: $niche-switch-text;
+  font-weight: 500;
+  border-radius: $radius-6;
+
+  @include hover(color) {
+    color: $niche-switch-text--hover;
   }
 }
 
+.layout-niche__option.--checked {
+  color: $niche-switch-text--checked;
+  background-color: $niche-switch-bg--checked;
+}
+
 .layout-niche__trigger {
-  display: grid;
-  grid-auto-flow: column;
+  @include font-sm;
+
+  display: flex;
   align-items: center;
-  justify-content: start;
-  column-gap: 6px;
-  padding: 6px 8px;
+  column-gap: 8px;
+  height: 36px;
+  padding: 0 12px;
   color: $niche-trigger-text;
+  background-color: $niche-trigger-bg;
+  border-radius: $radius-md;
 
-  @include to-br($brkpnt-burger) {
-    grid-template-columns: auto 1fr auto;
-    width: 100%;
-    padding: 10px 16px;
-    column-gap: 16px;
+  @include hover(background-color, color) {
+    color: $niche-trigger-text--hover;
+    background-color: $niche-trigger-bg--hover;
   }
 }
 
-.layout-niche__current {
-  @include font-sm;
-
-  display: grid;
-  grid-template-columns: auto 1fr;
-  color: $niche-title;
+.layout-niche__icon {
+  flex-shrink: 0;
 }
 
 .layout-niche__text {
   color: $niche-value-text;
   font-weight: 500;
+  line-height: 1;
 }
 
 .layout-niche__angle {
   pointer-events: none;
-  transition: transform var(--transition), color var(--transition);
-}
-
-.layout-niche__trigger:hover .layout-niche__angle {
-  color: $niche-angle--hover;
+  transition: transform var(--transition);
 }
 
 .layout-niche__trigger.--open .layout-niche__angle {
   transform: rotate(180deg);
 }
 
-.layout-niche__list {
-  display: grid;
-
-  @include from-br($brkpnt-burger) {
-    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($brkpnt-burger) {
-    padding: 8px 10px;
-  }
+.layout-niche__sheet {
+  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
 }
 
-.layout-niche__item.--current {
-  color: $niche-item-text--current;
-  background-color: $niche-item-bg--current;
+.layout-niche__list {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: $z-index-plus;
+  width: 192px;
+  padding: 8px;
+  background-color: $niche-menu-bg;
+  border: 1px solid $niche-menu-border;
+  border-radius: $radius-xl;
+  box-shadow: $niche-menu-shadow;
 }
 </style>

package/package.json

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