SalesGames Dokumentacja

# Moduł: sidebar

# W katalogu

|--src/                           →  Pliki źródłowe
|  |--modules/                    →  Moduły: katalog główny
|  |  |--sidebar/                   
|  |  |  |--sidebar.twig       
|  |  |  |--sidebar.scss       
|  |  |  |--sidebar.js

# CSS

# Dostępne wartości do zmiany
Zmienna Wartość domyślna Opis
$sidebar-border-radius 16px zakrąglenia główne
$sidebar-background-color $color-white kolor tła
$sidebar-box-shadow 0 4px 8px 0 rgba(0, 52, 104, .1), 0 0 1px 0 rgba(0, 52, 104, .3) cień
$sidebarAccount-color $color-primary kolor fonta użytkownika
$sidebarMenu__primary-background $color-primary kolor tła menu
$sidebarMenu__primary-font-family $font-family-nunito Font menu
$sidebarMenu__primary-font-weight $font-weight-extrabold Grubość fonta
$sidebarMenu__primary-link-color $color-white Kolor linka
$sidebarMenu__primary-divider-color #1132db Kolor separatora
$sidebarMenu__white-link-color $color-primary Kolor linka menu bez tła
$sidebarMenu__white-divider-color #dadfe5 Kolor separatora menu bez tła
$sidebarMenu__white-font-weight $font-weight-medium Grubość fonta menu bez tła
$sidebarMobile-background-color $color-white Belka mobilna kolor tła
$sidebarMobile-border-radius 16px Belka mobilna zaokrąglenia
$sidebarMobile-box-shadow 0 4px 8px 0 rgba(0, 52, 104, .1), 0 0 1px 0 rgba(0, 52, 104, .3) Belka mobilna cień
$sidebarMobile-padding-mobile-fixed rem(8) rem(16) rem(10) rem(24) belka mobilna padding: fixed
$sidebarMobile-padding-mobile rem(8) rem(8) rem(10) rem(16) belka mobilna padding
$sidebarMobile-padding-tablet rem(12) rem(16) rem(16) belka mobilna padding tablet
$sidebarWrap-background-color $color-bg mobilne menu otwarte tło
$sidebarWrap-padding rem(24) rem(16) mobilne menu otwarte padding

# JS

/**
 * Sidebar
 */

export default function sidebar() {

  const sidebar = document.querySelectorAll('[data-js="sidebar-trigger"]');
  
  // When Navbar exists
  if (sidebar.length > 0) {
    var headerFromTOP = window.pageYOffset + document.querySelector('.sidebarMobile').getBoundingClientRect().top

    // Show an overlay on the navbar toggler click
    var trigger = function () {
      [].forEach.call(sidebar, function(trigger) {
        trigger.addEventListener('click', function (e) {
          e.preventDefault();
          document.body.classList.toggle('sidebar--opened');
        }, false);
      });
    };
    trigger();

    

    window.onresize = function() {
      headerFromTOP = window.pageYOffset + document.querySelector('.sidebarMobile').getBoundingClientRect().top
    };

    window.onscroll = function() {
      fixedMobileHeader(headerFromTOP)
    };
    function fixedMobileHeader(headerFromTOP) {
      if (document.body.scrollTop > headerFromTOP || document.documentElement.scrollTop > headerFromTOP) {
        document.querySelector('.sidebarMobile').classList.add('fixed-header');
        document.querySelector('body').classList.add('fixed-header');
      } else {
        document.querySelector('.sidebarMobile').classList.remove('fixed-header');
        document.querySelector('body').classList.remove('fixed-header');
      }
    }

  }

}

# HTML

<div class="sidebarMobile">
  <div class="sidebarAccount">
    <div>Adam Kowalski</div>
    <div class="points">942 <sup>pkt</sup></div>
  </div>
  <a href="#" class="btn btn-menu" data-js="sidebar-trigger"><img src="./img/icon__bars.svg" alt=""> menu</a>
</div>
<div class="sidebarWrap">
  <a href="#" class="sidebarMobileTrigger" data-js="sidebar-trigger"><img src="./img/icon__times.svg" alt=""></a>
  <div class="sidebarAccount sidebarAccount__big">
    <div class="sidebarAccount__name">Adam<br>Kowalski</div>
    <div class="points">942 <sup>pkt</sup></div>
  </div>  
  <div class="sidebar">
    <div class="sidebarAccount">
      <div>Adam Kowalski</div>
      <div class="points">942 <sup>pkt</sup></div>
    </div>
    <ul class="sidebarMenu sidebarMenu__white">
      <li ><a href="/poziomy-uczestnikow.html" class="sidebarMenu__link">Gold<img src="./img/icon__star-small.svg" alt=""></a></li>
      <li ><a href="/historia-punktow.html" class="sidebarMenu__link">Historia punktów</a></li>
    </ul>
    <ul class="sidebarMenu sidebarMenu__primary">
      <li><a href="/dashboard.html" class="sidebarMenu__link is-active">Zadania</a></li>
      <li><a href="/biblioteka.html" class="sidebarMenu__link">Biblioteka</a></li>
      <li><a href="/ranking.html" class="sidebarMenu__link">Ranking</a></li>
      <li><a href="/nagroda-glowna.html" class="sidebarMenu__link">Nagroda główna</a></li>
      <li><a href="/katalog-nagrod.html" class="sidebarMenu__link">Katalog nagród</a></li>
      <li><a href="/o-konkursie.html" class="sidebarMenu__link">O konkursie</a></li>
    </ul>
    <ul class="sidebarMenu sidebarMenu__white">
      <li><a href="/edycja-konta.html" class="sidebarMenu__link">Edytuj konto</a></li>
      <li><a href="/login.html" class="sidebarMenu__link">Wyloguj</a></li>
    </ul>    
  </div>
  {% include '../../modules/frequentLogins/frequentLogins.twig' with { 'boxes': false, 'sidebar': true } %}

  <a href="" class="btn btn-language">Change language <img src="img/flag-uk.jpg" srcset="img/[email protected] 2x,
    img/[email protected] 3x"></a>
</div>

# Korzysta z:

← Footer →