Refactor Header component styles and update navigation links for improved layout and accessibility

- Adjusted styles in Header.module.scss to reduce padding and font sizes for a more compact navbar.
- Updated Header.tsx to replace reload navigation with direct links for better user experience and accessibility.
- Enhanced dropdown and button styles for consistency and improved visual presentation.

Author: RXDCODX

.cursor/rules/about-toastify.mdc

@@ -0,0 +1,6 @@
+---
+description: result of button activation and any api operation
+alwaysApply: false
+---
+
+use toast from ./src/shared/Utils/ToastModal as result of any operation

.cursor/rules/use-yarn-instead-npm.mdc

@@ -0,0 +1,5 @@
+---
+alwaysApply: true
+---
+
+use yarn instead npm

src/Site/Site_Components/Layout/Header/Header.module.scss

@@ -8,29 +8,63 @@
     border-color 0.3s ease,
     box-shadow 0.3s ease;
   z-index: 1030;
+  min-height: 0;
+  /* Убираем минимальную высоту */
+  padding: 0.15rem 0;
+  /* Уменьшаем вертикальные отступы на 70% */
+
+  /* Уменьшаем высоту навбара Bootstrap */
+  .navbar {
+    min-height: 0;
+    padding: 0;
+  }
+
+  /* Уменьшаем отступы контейнера */
+  .container {
+    padding: 0.15rem 0;
+  }
+
+  /* Уменьшаем высоту переключателя навбара */
+  .navbar-toggler {
+    padding: 0.15rem 0.3rem;
+    min-height: 0;
+    font-size: 0.5rem;
+  }
 
   .navbar-brand {
-    font-size: 1.5rem;
+    font-size: 0.75rem;
+    /* Уменьшаем размер текста в 2 раза с 1.5rem */
     font-weight: 700;
     color: var(--site-text-primary) !important;
     text-shadow: var(--site-shadow-light);
     white-space: nowrap;
+    min-height: 0;
+    padding: 0.15rem 0.5rem;
+    /* Уменьшаем отступы на 70% */
 
     i {
-      font-size: 1.8rem;
+      font-size: 0.9rem;
+      /* Уменьшаем размер иконки в 2 раза с 1.8rem */
       margin-right: 0.5rem;
       text-shadow: var(--site-shadow-light);
     }
   }
 
   .navbar-nav {
     align-items: center;
+    min-height: 0;
+    padding: 0;
 
     .nav-link {
       color: var(--site-text-primary) !important;
       font-weight: 500;
+      font-size: 0.5rem;
+      /* Уменьшаем размер текста в 2 раза */
       text-shadow: var(--site-shadow-light);
       transition: all 0.3s ease;
+      padding: 0.15rem 0.5rem;
+      /* Уменьшаем отступы на 70% */
+      min-height: 0;
 
       &:hover {
         color: var(--site-text-accent) !important;
@@ -42,6 +76,8 @@
 
   .navbar-collapse {
     justify-content: space-between;
+    min-height: 0;
+    padding: 0;
   }
 }
 
@@ -56,14 +92,18 @@
   position: relative;
   display: inline-block;
   margin-right: 1rem;
+  min-height: 0;
 }
 
 .dropdownButton {
   background: none;
   border: none;
   color: var(--site-text-primary) !important;
   font-weight: 500;
-  padding: 0.5rem 1rem;
+  font-size: 0.5rem;
+  /* Уменьшаем размер текста в 2 раза */
+  padding: 0.15rem 0.5rem;
+  /* Уменьшаем отступы на 70% */
   text-shadow: var(--site-shadow-light);
   transition: all 0.3s ease;
   display: flex;
@@ -86,15 +126,18 @@
   box-shadow: var(--site-shadow-medium);
   border: 1px solid var(--site-border-primary);
   min-width: 200px;
-  padding: 8px 0;
-  margin-top: 8px;
+  padding: 2.4px 0;
+  /* Уменьшаем отступы на 70% */
+  margin-top: 2.4px;
+  /* Уменьшаем отступы на 70% */
   z-index: 1000;
   animation: dropdownFadeIn 0.3s ease;
   list-style: none;
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 0.6px;
+  /* Уменьшаем промежутки на 70% */
   white-space: nowrap;
 }
 
@@ -104,14 +147,19 @@
   padding: 0;
   background: var(--site-bg-card) !important;
   border-radius: 8px;
-  overflow: visible; /* Разрешаем поддропдаунам выходить за границы */
+  overflow: visible;
+  /* Разрешаем поддропдаунам выходить за границы */
+  min-height: 0;
 
   a {
     display: block;
-    padding: 12px 20px;
+    padding: 3.6px 6px;
+    /* Уменьшаем отступы на 70% */
     color: var(--site-text-primary) !important;
     text-decoration: none;
     font-weight: 500;
+    font-size: 0.5rem;
+    /* Уменьшаем размер текста в 2 раза */
     transition: all 0.2s ease;
     text-shadow: var(--site-shadow-light);
     white-space: nowrap;
@@ -128,15 +176,19 @@
 
 .subDropdownContainer {
   position: relative;
+  min-height: 0;
 }
 
 .subDropdownButton {
   width: 100%;
   background: none;
   border: none;
-  padding: 12px 20px;
+  padding: 3.6px 6px;
+  /* Уменьшаем отступы на 70% */
   color: var(--site-text-primary) !important;
   font-weight: 500;
+  font-size: 0.5rem;
+  /* Уменьшаем размер текста в 2 раза */
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -154,7 +206,8 @@
   }
 
   i {
-    font-size: 0.8rem;
+    font-size: 0.4rem;
+    /* Уменьшаем размер иконки в 2 раза */
     opacity: 0.8;
     transition: all 0.2s ease;
   }
@@ -175,31 +228,41 @@
   border: 1px solid var(--site-border-primary);
   min-width: 200px;
   max-width: 250px;
-  padding: 8px 0;
+  padding: 2.4px 0;
+  /* Уменьшаем отступы на 70% */
   z-index: 1001;
   animation: subDropdownFadeIn 0.3s ease;
   list-style: none;
   margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  white-space: normal; /* Разрешаем перенос текста */
-  overflow: hidden; /* Скрываем текст, выходящий за границы */
+  gap: 0.6px;
+  /* Уменьшаем промежутки на 70% */
+  white-space: normal;
+  /* Разрешаем перенос текста */
+  overflow: hidden;
+  /* Скрываем текст, выходящий за границы */
 }
 
 .subDropdownItem {
   display: block;
-  padding: 10px 20px;
+  padding: 3px 6px;
+  /* Уменьшаем отступы на 70% */
   color: var(--site-text-primary) !important;
   text-decoration: none;
   font-weight: 500;
+  font-size: 0.5rem;
+  /* Уменьшаем размер текста в 2 раза */
   transition: all 0.2s ease;
   text-shadow: var(--site-shadow-light);
-  white-space: normal; /* Разрешаем перенос текста */
+  white-space: normal;
+  /* Разрешаем перенос текста */
   border-radius: 8px;
   margin: 0 4px;
-  overflow: hidden; /* Скрываем текст, выходящий за границы */
-  text-overflow: ellipsis; /* Добавляем многоточие для длинного текста */
+  overflow: hidden;
+  /* Скрываем текст, выходящий за границы */
+  text-overflow: ellipsis;
+  /* Добавляем многоточие для длинного текста */
 
   &:hover {
     background: var(--site-hover-bg);
@@ -216,6 +279,7 @@
     opacity: 0;
     transform: translateY(-10px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -227,6 +291,7 @@
     opacity: 0;
     transform: translateX(-10px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -239,42 +304,63 @@
     min-width: 160px;
     max-width: 200px;
     width: auto;
+    padding: 1.68px 0;
+    /* Уменьшаем отступы на 70% */
+    gap: 0.42px;
+    /* Уменьшаем промежутки на 70% */
   }
 
   .subDropdownMenu {
     min-width: 160px;
     max-width: 200px;
     width: auto;
+    padding: 1.68px 0;
+    /* Уменьшаем отступы на 70% */
+    gap: 0.42px;
+    /* Уменьшаем промежутки на 70% */
   }
 
   .dropdownButton {
     max-width: 150px;
-    font-size: 0.9rem;
+    font-size: 0.45rem;
+    /* Уменьшаем размер текста в 2 раза */
   }
 }
 
 @media (max-width: 576px) {
   .dropdownMenu {
     min-width: 140px;
     max-width: 180px;
+    padding: 1.68px 0;
+    /* Уменьшаем отступы на 70% */
+    gap: 0.42px;
+    /* Уменьшаем промежутки на 70% */
   }
 
   .subDropdownMenu {
     min-width: 140px;
     max-width: 180px;
+    padding: 1.68px 0;
+    /* Уменьшаем отступы на 70% */
+    gap: 0.42px;
+    /* Уменьшаем промежутки на 70% */
   }
 
   .dropdownButton {
     max-width: 120px;
-    font-size: 0.85rem;
-    padding: 0.4rem 0.8rem;
+    font-size: 0.425rem;
+    /* Уменьшаем размер текста в 2 раза */
+    padding: 0.12rem 0.24rem;
+    /* Уменьшаем отступы на 70% */
   }
 
   .navbar-brand {
-    font-size: 1.2rem;
+    font-size: 0.6rem;
+    /* Уменьшаем размер текста в 2 раза */
 
     i {
-      font-size: 1.4rem;
+      font-size: 0.7rem;
+      /* Уменьшаем размер иконки в 2 раза */
     }
   }
 }
@@ -303,7 +389,8 @@
 .dropdownButton i {
   margin-left: 4px;
   transition: transform 0.2s ease;
-  font-size: 0.8rem;
+  font-size: 0.4rem;
+  /* Уменьшаем размер иконки в 2 раза */
   opacity: 0.8;
 }
 
@@ -327,13 +414,15 @@
 // Предотвращение ломания колонок и переполнения
 .dropdownContainer {
   .dropdownMenu {
-    overflow: visible; /* Разрешаем поддропдаунам выходить за границы */
+    overflow: visible;
+    /* Разрешаем поддропдаунам выходить за границы */
     word-wrap: break-word;
     word-break: keep-all;
   }
 
   .subDropdownMenu {
-    overflow: visible !important; /* Разрешаем поддропдаунам выходить за границы */
+    overflow: visible !important;
+    /* Разрешаем поддропдаунам выходить за границы */
     word-wrap: break-word;
     word-break: keep-all;
   }
@@ -358,13 +447,13 @@
     box-shadow: var(--site-shadow-medium);
     border: 1px solid var(--site-border-accent);
   }
-  
+
   &:active {
     transform: translateY(0) scale(0.98);
     background-color: var(--site-bg-accent);
     color: var(--site-text-light) !important;
   }
-  
+
   &:focus {
     outline: 2px solid var(--site-border-accent);
     outline-offset: 2px;
@@ -376,11 +465,11 @@
   i {
     transition: transform 0.3s ease;
   }
-  
+
   &:hover i {
     transform: rotate(180deg);
   }
-  
+
   &:active i {
     transform: rotate(360deg);
   }
@@ -391,8 +480,8 @@
   i {
     transition: transform 0.3s ease;
   }
-  
+
   &:hover i {
     transform: scale(1.1);
   }
-}
+}