Как создать боковую панель с обеих сторон экрана в Angular 8? - PullRequest
Новая
       8

Как создать боковую панель с обеих сторон экрана в Angular 8?

0 голосов
/ 15 февраля 2020

У меня есть сборка приложения с Angular 8 и библиотекой nz-zorro. И мне нужно создать 2 боковые панели с обеих сторон экрана с помощью кнопок переключения. Основной блок имеет ширину 1200 пикселей и по центру. Он должен быть сжат, когда открыта левая или правая сторона или открыты обе боковые панели.

Я создал пример с JavaScript, но немного сложил его, выполнив то же самое в компоненте Angular. 

window.addEventListener('load', function() {
  let mainBlock    = document.querySelector('main'),
      wrapper      = document.querySelector('.wrapper'),
      sidebarWidth = 250,
      leftBtn      = document.querySelector('.left-btn'),
      rightBtn     = document.querySelector('.right-btn');

  document.querySelectorAll('.sidebar').forEach(sidebar => sidebar.style.width = `${sidebarWidth}px`);
  // 
  wrapper.style.paddingLeft = leftBtn.offsetWidth + 'px';
  wrapper.style.paddingRight = rightBtn.offsetWidth + 'px';

  document.addEventListener('click', function(event) { 
    if(event.target.classList.contains('sidebar-btn')) {

      let windowWidth  = document.documentElement.clientWidth,
          sidebar      = event.target.closest('.sidebar'),
          offset       = parseInt(getComputedStyle(mainBlock).marginLeft);

      if(offset >= 0 && offset <= sidebarWidth) {

        if(!sidebar.classList.contains('hidden')) {
          // when sidebar hidding
          sidebar.classList.contains('left-sidebar') ? 
            wrapper.style.marginLeft = 0 :
            //right bnt click
            wrapper.style.marginRight = 0;
        } else {
          sidebar.classList.contains('left-sidebar') ?
            wrapper.style.marginLeft = sidebarWidth + 'px' :
          // right btn click
            wrapper.style.marginRight = sidebarWidth + 'px';
        }
      }

    sidebar.classList.toggle('hidden');

    }
  })

})
* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.wrapper{
  height: 100%;
}
main {
  margin: 0 auto;
  max-width: 1200px;
  padding: 20px;
  background-color: #f1f1f1;
}
.left-sidebar, 
.right-sidebar {
  position: fixed;
  top: 0;
  width: 250px;
  height: 100%;
  transition: 0.3s ease all;
}
.left-sidebar {
  left: 0%;
}
.left-sidebar.hidden {
  transform: translateX(-100%);
}
.right-sidebar {
  right: 0%;
}
.right-sidebar.hidden {
  transform: translateX(100%);
}
.sidebar-container-left,
.sidebar-container-right {
  height: 100vh;
  padding: 15px;
  background: #fff;
}
.sidebar-container-left {
  border-right: 1px solid #06A52B;
}
.sidebar-container-right {
  border-left: 1px solid #06A52B;
}
.sidebar-btn {
  position: absolute;
  display: flex;
  justify-content: center;
    align-items: center;
  top: 30px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border: 1px solid #06A52B;
  background: #fff;
}
.left-btn {
  left: 100%;
  border-left: 2px solid #fff;
  margin-left: -2px;
}
.right-btn {
  right: 100%;
  border-right: 2px solid #fff;
  margin-right: -2px;
}
<div class="wrapper">
  <main>
    <h1>Max width of this block is 1200px</h1>
  </main>
  <aside class="sidebar left-sidebar hidden">
    <div class="sidebar-btn left-btn">L</div>
    <div class="sidebar-container-left">
      <h2>Left sidebar</h2>
      <p>Add content here</p>
    </div>
  </aside>
  <aside class="sidebar right-sidebar hidden">
    <div class="sidebar-btn right-btn">R</div>
    <div class="sidebar-container-right">
      <h2>Right sidebar</h2>
      <p>Add content here</p>
    </div>
  </aside>
</div>

Как доставить этот код на Angular?

Спасибо!

...