Burger menu in the special page

js-tasks-ru · Apr 22, 2022 · 9de0145 · 9de0145
1 parent 16bd69f
commit 9de0145
Show file tree

Hide file tree

Showing 13 changed files with 159 additions and 62 deletions.
diff --git a/09-lection7/01-burger-menu/burger-menu.css b/09-lection7/01-burger-menu/burger-menu.css
@@ -1,25 +1,42 @@
 .burger-menu {
+
+}
+
+.burger-menu__open {
+    display: inline-flex; /* Чтобы компонент остался строчным снаружи */
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+}
+
+.burger-menu__close {
+    display: inline-flex; /* Чтобы компонент остался строчным снаружи */
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+}
+
+.burger-menu__curtain {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     transform: translateX(-100vw);
     transition: transform 200ms linear;
-    background-color: rgba(127, 127, 127, 0.5);
+    background-color: var(--grey-5);
 }
 
-.burger-menu__window {
-    max-width: 375px;
+.burger-menu__curtain[data-open] {
+    transform: translateX(0);
 }
 
-.burger-menu__open {
-    width: 32px;
-    height: 32px;
-    background: var(--grey-2);
-    border-radius: 100%;
+.burger-menu__window {
+    padding: 24px 16px;
 }
 
-.burger-menu[data-open] {
-    transform: translateX(0);
-}
+@media screen and (min-width: 768px) {
+    .burger-menu {
+        display: none;
+    }
+}
diff --git a/09-lection7/01-burger-menu/index.html b/09-lection7/01-burger-menu/index.html
@@ -1,38 +1,83 @@
 <!DOCTYPE html>
 <!-- Страница бургер-меню -->
 <html lang="ru">
-    <head>
-        <link rel="stylesheet" href="../../assets/css/main.css">
-        <link rel="stylesheet" href="./burger-menu.css">
-        <script defer src="./burger-menu.js"></script>
-    </head>
-    <body>
-
-    <div style="background-color: #F9FAFC; padding: 16px 12px; display: flex; gap: 12px; align-items: center;">
-        <button class="burger-menu__open" id="burger-menu-open">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M3 12H21" stroke="#495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M3 6H21" stroke="#495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M3 18H21" stroke="#495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-        </button>
-        <svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex-grow: 1;">
-            <rect y="1" width="30" height="30" fill="#212429"/>
-            <rect x="38" width="32" height="32" rx="16" fill="#212429"/>
-            <path d="M78 0L110 32H78V0Z" fill="#212429"/>
-        </svg>
-    </div>
-
-
-    <div class="burger-menu" id="burger-menu">
-        <button class="burger-menu__close" id="burger-menu-close">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M18 6L6 18" stroke="#212429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M6 6L18 18" stroke="#212429" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-        </button>
-        <div class="burger-menu__window"></div>
-    </div>
-
-    </body>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../assets/css/main.css">
+    <script defer src="./burger-menu.js"></script>
+</head>
+<body>
+<div class="page page_inner">
+
+    <header class="header header_for-inner-page">
+        <div class="container">
+            <div class="header__inner">
+
+                <div class="burger-menu">
+
+                    <svg class="burger-menu__open header__burger-menu-open" id="burger-menu-open">
+                        <use href="/assets/images/icons.svg#burger"></use>
+                    </svg>
+
+                    <div class="burger-menu__curtain" id="burger-menu">
+
+                        <div class="header header_for-inner-page">
+                            <div class="container">
+                                <div class="header__inner">
+                                    <svg class="burger-menu__close header__burger-menu-open" id="burger-menu-close">
+                                        <use href="/assets/images/icons.svg#close-burger-menu"></use>
+                                    </svg>
+
+                                    <a href="/index.html" class="header__logo">
+                                        <svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <rect y="1" width="30" height="30" fill="#212429"/>
+                                            <rect x="38" width="32" height="32" rx="16" fill="#212429"/>
+                                            <path d="M78 0L110 32H78V0Z" fill="#212429"/>
+                                        </svg>
+                                    </a>
+
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="burger-menu__window">
+                            <nav class="menu">
+                                <h2 class="menu__name">Components</h2>
+                                <ul class="menu__list">
+                                    <li class="menu__item"><a class="menu__item-a" href="/pages/modal.html">Modal</a>
+                                    </li>
+                                    <li class="menu__item"><a class="menu__item-a"
+                                                              href="/pages/tooltip.html">Tooltip</a></li>
+                                    <li class="menu__item menu__item_selected">Avatar</li>
+                                    <li class="menu__item"><a class="menu__item-a"
+                                                              href="/pages/calendar.html">Calendar</a></li>
+                                    <li class="menu__item"><a class="menu__item-a" href="/pages/histogram.html">Histogram</a>
+                                    </li>
+                                    <li class="menu__item"><a class="menu__item-a" href="/pages/form-elements.html">Custom
+                                        form
+                                        elements</a></li>
+                                    <li class="menu__item menu__item_main"><a class="menu__item-a" href="/index.html">Main
+                                        page</a></li>
+                                </ul>
+                            </nav>
+                        </div>
+                    </div>
+
+                </div>
+
+                <a href="/index.html" class="header__logo">
+                    <svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <rect y="1" width="30" height="30" fill="#212429"/>
+                        <rect x="38" width="32" height="32" rx="16" fill="#212429"/>
+                        <path d="M78 0L110 32H78V0Z" fill="#212429"/>
+                    </svg>
+                </a>
+
+            </div>
+        </div>
+    </header>
+
+</div>
+
+</body>
 </html>
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -23,7 +23,7 @@
 @import "../../03-lection1/01-button/button.css";
 @import "../../04-lection2/01-histogram/histogram.css";
 @import "../../06-lection4/01-avatar/avatar.css";
-
+@import "../../09-lection7/01-burger-menu/burger-menu.css";
 
 :root {
     --white: #ffffff;

diff --git a/assets/images/icons.svg b/assets/images/icons.svg
diff --git a/components/header/header.css b/components/header/header.css
@@ -3,8 +3,8 @@
     padding: 16px 0;
 }
 
-.header__logo {
-    text-align: center;
+.header__inner {
+    position: relative;
 }
 
 .header__title {
@@ -19,8 +19,16 @@
     color: var(--grey-4);
 }
 
-.header_inner {
+.header__burger-menu-open {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.header_for-inner-page {
     background: var(--grey-5);
+    text-align: center;
 }
 
 @media screen and (min-width: 768px) {
@@ -40,4 +48,12 @@
         line-height: 64px;
         color: var(--black);
     }
+
+    .header_for-inner-page {
+        text-align: left;
+    }
+
+    .header__burger-menu-open {
+        display: none;
+    }
 }
diff --git a/components/menu/menu.css b/components/menu/menu.css
@@ -1,6 +1,6 @@
 .menu {
     width: 229px;
-    display: none;
+    text-align: left;
 }
 
 .menu__name {
@@ -10,7 +10,7 @@
     font-weight: 400;
     font-size: 20px;
     line-height: 26px;
-    color: var(--full-black);
+    color: var(--grey-3);
 }
 
 .menu__list {
@@ -26,7 +26,7 @@
 }
 
 .menu__item {
-
+    margin-top: 16px;
 }
 
 .menu__item-a {
@@ -39,11 +39,19 @@
 }
 
 .menu__item_main {
-    margin-top: 30px;
+    margin-top: 72px;
 }
 
 @media screen and (min-width: 768px) {
-    .menu {
-       display: block;
+    .menu__name {
+        color: var(--full-black);
+    }
+
+    .menu__item {
+        margin-top: 4px;
+    }
+
+    .menu__item_main {
+        margin-top: 30px;
     }
 }
diff --git a/pages/avatar.html b/pages/avatar.html
@@ -8,7 +8,7 @@
 </head>
 <body>
 <div class="page page_inner">
-    <header class="header header_inner">
+    <header class="header header_for-inner-page">
         <div class="container">
             <a href="/index.html" class="header__logo">
                 <svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/pages/calendar.html b/pages/calendar.html
@@ -8,7 +8,7 @@
 </head>
 <body>
 <div class="page page_inner">
-    <header class="header header_inner">
+    <header class="header header_for-inner-page">
         <div class="container">
             <a href="/index.html" class="header__logo">
                 <svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/pages/form-elements.html b/pages/form-elements.html
@@ -8,7 +8,7 @@
 </head>
 <body>
 <div class="page page_inner">
-    <header class="header header_inner">
+    <header class="header header_for-inner-page">
         <div class="container">
             <a href="/index.html" class="header__logo">
                 <svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/pages/histogram.html b/pages/histogram.html
@@ -8,7 +8,7 @@
 </head>
 <body>
 <div class="page page_inner">
-    <header class="header header_inner">
+    <header class="header header_for-inner-page">
         <div class="container">
             <a href="/index.html" class="header__logo">
                 <svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/pages/modal.html b/pages/modal.html
@@ -8,7 +8,7 @@
 </head>
 <body>
 <div class="page page_inner">
-    <header class="header header_inner">
+    <header class="header header_for-inner-page">
         <div class="container">
             <a href="/index.html" class="header__logo">
                 <svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/pages/pages.html b/pages/pages.html
@@ -8,7 +8,7 @@
 </head>
 <body>
 <div class="page page_inner">
-    <header class="header header_inner">
+    <header class="header header_for-inner-page">
         <div class="container">
             <a href="/index.html" class="header__logo">
                 <svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/pages/tooltip.html b/pages/tooltip.html
@@ -8,7 +8,7 @@
 </head>
 <body>
 <div class="page page_inner">
-    <header class="header header_inner">
+    <header class="header header_for-inner-page">
         <div class="container">
             <a href="/index.html" class="header__logo">
                 <svg width="110" height="32" viewBox="0 0 110 32" fill="none" xmlns="http://www.w3.org/2000/svg">