Merge branch 'menu-refactoring' of https://github.com/TatianaFokina/p…

…latform into pr/1191
doka-guide · May 23, 2024 · 827a262 · 827a262
2 parents 61dec60 + b183e3b
commit 827a262
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 11 deletions.
diff --git a/src/styles/blocks/base.css b/src/styles/blocks/base.css
@@ -13,14 +13,15 @@
 }
 
 /* TODO: рассчитать правильный отступ при наличии класса aria__controls--expanded */
+
 .base__body {
   margin: 0;
 }
 
 .base__body:has(.header--open) {
-  margin-top: var(--header-height);
+  top: 56px;
 }
 
-.base__body:has(.header--open > .header__controls--shrink) {
+/* .base__body:has(.header--open > .header__controls--shrink) {
   padding-top: var(--header-height);
-}
+} */
diff --git a/src/styles/blocks/header.css b/src/styles/blocks/header.css
@@ -16,7 +16,7 @@
   position: relative;
 }
 
-/* фиксированное меню на десктопах и планшетах (остальные страницы) */
+/* фиксированное меню на мобилках */
 .header--sticky {
   position: static;
 }
@@ -28,19 +28,31 @@
   }
 }
 
-/* фиксированный дропдаун */
 .header--open {
   position: fixed;
-  width: 100%;
+
+  /* width: 100%; */
 }
 
 @media (height <= 450px) {
   .header--open {
+    position: fixed;
     height: 100%;
     overflow-y: scroll;
   }
 }
 
+@media (width >= 768px) {
+  .header--open {
+    position: sticky;
+    width: 100%;
+  }
+
+  .header--open .header__menu {
+    position: fixed;
+  }
+}
+
 /* содержимое главного меню (без дропдауна) */
 .header__controls {
   --letter-spacing: -0.06em;
@@ -154,23 +166,33 @@
 
 /* дропдаун с разделами */
 .header__menu {
-  height: 100%;
+  /* position: absolute; */
+
+  /* position: fixed; */
+  width: 100%;
+
+  /* height: 100%; */
   font-size: calc(var(--font-size-xl) * 0.95);
   line-height: calc(var(--font-line-height-xl) * 0.95);
   letter-spacing: -0.06em;
   background-color: var(--color-background);
-  z-index: -1;
 }
 
+/* @media (width >= 1024px) {
+  .header__menu {
+    position: absolute;
+  }
+} */
+
 /* всегда раскрытый список разделов на главной */
 .header--static .header__menu {
   position: static;
   height: auto;
 }
 
 .header:not(.header--open, .header--static) .header__menu {
-  height: 0;
   visibility: hidden;
+  height: 0;
   opacity: 0;
 }
 

diff --git a/src/styles/blocks/search.css b/src/styles/blocks/search.css
@@ -88,8 +88,6 @@
   visibility: hidden;
 }
 
-/* TODO: починить отступ у горячей клавиши поиска на мобилках? */
-
 .search__input:placeholder-shown ~ .search__key--enter,
 .search__input:not(:focus) ~ .search__key--enter {
   visibility: hidden;