add sidebar

ElenVlass · Mar 31, 2021 · 5d1c70b · 5d1c70b
1 parent b05b5cd
commit 5d1c70b
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 2 deletions.
diff --git a/src/index.html b/src/index.html
@@ -44,5 +44,21 @@
 
     <!-- В этот список рендерит разметку меню -->
     <ul class="menu js-menu"></ul>
+<!-- Добавила менюшку-->
+    <div class="wrraper">
+      <button class="burger">
+        <span class="burger__line"></span>
+        <span class="burger__line"></span>
+        <span class="burger__line"></span>
+      </button>
+      <aside role="modal" type="modal" class="side-bar">
+        <nav class="side-bar__nav">
+          <a href="" class="side-bar__link">About</a>
+          <a href="" class="side-bar__link">Gallery</a>
+          <a href="" class="side-bar__link">News</a>
+          <a href="" class="side-bar__link">Contact us</a>
+        </nav>
+        <button class="x-mark"></button>
+      </aside>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -8,4 +8,16 @@ const menuMarkup = templateCardList(initialMenu);
 
 refs.dishes.insertAdjacentHTML('beforeend', menuMarkup);
 
-setTheme();
+setTheme();
+
+refs.burger.addEventListener('click', handleBurgerBtnClick);
+refs.closeButton.addEventListener('click', handleCloseBtnClick)
+
+function handleBurgerBtnClick() {
+    refs.sideBar.classList.add('active');
+};
+
+function handleCloseBtnClick() {
+ refs.sideBar.classList.remove('active');
+};
+
diff --git a/src/refs.js b/src/refs.js
@@ -2,5 +2,9 @@ export default {
     dishes: document.querySelector('.js-menu'),
     themeSwitcher: document.querySelector('.theme-switch-toggle'),
     body: document.querySelector('body'),
-themeSwitcher: document.querySelector('.theme-switch__toggle'),
+    themeSwitcher: document.querySelector('.theme-switch__toggle'),
+burger: document.querySelector('.burger'),
+sideBar: document.querySelector('.side-bar'),
+closeButton: document.querySelector('.x-mark'),
+navBarLinks: document.querySelectorAll('.side-bar__link')
 }
diff --git a/src/styles.css b/src/styles.css
@@ -225,3 +225,81 @@ body.dark-theme {
 .button__icon {
   margin-right: 8px;
 }
+
+/* WRAPPER */
+.side-bar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  background: #333333;
+  color: #fff;
+  padding: 100px 60px;
+  width: 100%;
+  height: 100%;
+  max-width: 400px;
+  transform: translateX(-100%);
+}
+
+.side-bar.active {
+  transform: translateX(0);
+}
+
+.side-bar__nav {
+  display: flex;
+  flex-direction: column;
+}
+
+.side-bar__link {
+  color: inherit;
+  text-decoration: none;
+  margin: 10px 0;
+  font-size: 24px;
+}
+
+.x-mark {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.x-mark::before {
+  content: '';
+  display: inline-block;
+  background: #fff;
+  width: 19px;
+  height: 2px;
+  transform: rotate(45deg);
+}
+
+.x-mark::after {
+  position: absolute;
+  top: 18px;
+  left: 5px;
+  content: '';
+  display: inline-block;
+  background: #fff;
+  width: 20px;
+  height: 2px;
+  transform: rotate(-45deg);
+}
+
+.burger {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 30px;
+  left: 30px;
+  width: 30px;
+}
+
+.burger__line {
+  width: 100%;
+  height: 2px;
+  background: #000;
+  margin: 2px 0;
+}