fix: simplify app header

src/shared/ui/components/AppHeader/AppHeader.vue

@@ -1,11 +1,4 @@
 <script setup lang="ts">
-import { SearchIcon } from 'lucide-vue-next'
-import {
-  NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-} from '@gisp/ui-kit-shadcn-vue'
 import { AppHeaderActions, AppHeaderBranding } from './components'
 
 /**
@@ -24,14 +17,6 @@ const props = defineProps<{
   role?: AppHeaderUserRole | null
   isProfileIdentityLoading?: boolean
 }>()
-
-const headerNavigationItems = [
-  { label: 'Главная страница', isActive: false },
-  { label: 'Все сервисы', isActive: true },
-  { label: 'База знаний', isActive: false },
-  { label: 'Сообщения', badge: '99+', isActive: false },
-  { label: 'Порядок подключения', isActive: false },
-]
 </script>
 
 <template>
@@ -39,34 +24,6 @@ const headerNavigationItems = [
     <div class="main-page-header-wrapper">
       <AppHeaderBranding />
 
-      <NavigationMenu
-        class="main-page-header-navigation"
-        :viewport="false"
-        aria-label="Верхняя навигация"
-      >
-        <NavigationMenuList class="main-page-header-navigation-list">
-          <NavigationMenuItem
-            v-for="item in headerNavigationItems"
-            :key="item.label"
-            class="main-page-header-navigation-item"
-            :class="{ 'is-active': item.isActive }"
-          >
-            <NavigationMenuLink as-child :active="item.isActive">
-              <button type="button" class="main-page-header-navigation-link">
-                <span>{{ item.label }}</span>
-                <span v-if="item.badge" class="main-page-header-navigation-badge">
-                  {{ item.badge }}
-                </span>
-              </button>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
-        </NavigationMenuList>
-      </NavigationMenu>
-
-      <button type="button" class="main-page-header-search-button" aria-label="Поиск">
-        <SearchIcon aria-hidden="true" />
-      </button>
-
       <AppHeaderActions
         :full-name="props.fullName"
         :username="props.username"
@@ -99,125 +56,15 @@ const headerNavigationItems = [
   background-color: var(--background-color-accent, #022456);
 }
 
-.main-page-header-navigation {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: center;
-  max-width: calc(100% - 560px);
-  transform: translate(-50%, -50%);
-}
-
-.main-page-header-navigation-list {
-  display: flex;
-  height: 44px;
-  align-items: center;
-  gap: 16px;
-}
-
-.main-page-header-navigation-item {
-  display: flex;
-  height: 44px;
-  align-items: center;
-  padding: 0;
-}
-
-.main-page-header-navigation-link {
-  display: inline-flex;
-  height: 44px;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border: 0;
-  background: transparent;
-  color: rgb(255 255 255 / 50%);
-  cursor: pointer;
-  font-family: 'Clear Sans', var(--font-sans, ui-sans-serif, system-ui, sans-serif);
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 18px;
-  padding: 0 8px;
-  text-align: center;
-  white-space: nowrap;
-  transition: color 0.2s ease;
-}
-
-.main-page-header-navigation-link:hover,
-.main-page-header-navigation-link:focus-visible {
-  color: rgb(255 255 255 / 90%);
-}
-
-.main-page-header-navigation-link:focus-visible {
-  outline: 2px solid rgb(255 255 255 / 70%);
-  outline-offset: 4px;
-  border-radius: 4px;
-}
-
-.main-page-header-navigation-link[data-active] {
-  color: var(--Infographic-Base-White, #ffffff);
-  font-weight: 700;
-}
-
-.main-page-header-navigation-badge {
-  display: inline-flex;
-  min-width: 22px;
-  height: 22px;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: var(--Infographic-Main-Red, #c90237);
-  color: var(--Infographic-Base-White, #ffffff);
-  font-size: 11px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 0 4px;
-}
-
-.main-page-header-search-button {
-  display: inline-flex;
-  width: 36px;
-  height: 36px;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  background: transparent;
-  color: rgb(255 255 255 / 80%);
-  margin-left: auto;
-  padding: 0;
-}
-
-.main-page-header-search-button svg {
-  width: 24px;
-  height: 24px;
-}
-
 @media (max-width: 1860px) {
   .main-page-header-wrapper {
     padding: 0 64px;
   }
 }
 
-@media (max-width: 1450px) {
-  .main-page-header-navigation {
-    max-width: calc(100% - 420px);
-  }
-
-  .main-page-header-navigation-item:not(.is-active) {
-    display: none;
-  }
-}
-
 @media (max-width: 1150px) {
   .main-page-header-wrapper {
     padding: 0 32px;
   }
-
-  .main-page-header-navigation {
-    display: none;
-  }
 }
 </style>

src/shared/ui/components/AppHeader/components/AppHeaderActions.vue

@@ -164,7 +164,7 @@ const handleLogoutClick = async (): Promise<void> => {
 
 <style scoped>
 .menu-nav {
-  margin-left: 12px;
+  margin-left: auto;
   display: flex;
   align-items: center;
 }