<!doctype html>
<!--
                                                       ╒▒▌▌▌▒╦
                                                      ]▌▌▌▌▌▌▌▌
                                                       █▌▌▌▌▌▌Γ
                                                        `▀▀▀Γ
                  ╓╦╦╦╦╦╦╦╦╦╦╦╦µ
                 ║▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
                 ╘█▌▌▌▌▌▌▌▌▌▀▀▀▀┘
                      ╘▌▌▌▌▌                         ╓▒▒▄
                       ▒▌▌▌▌╕                       4▌▌▌▌⌐
                       "▌▌▌▌▌                      ╣▌▌▌▌▀
                        ╚▌▌▌▌▌╕                  ,▒▌▌▌▌▀
                         Σ▌▌▌▌▌▒                ╣▌▌▌▌▌▀
                          ╚▌▌▌▌▌▌▒╦          ╗▒▌▌▌▌▌▌Γ
                            ▀▌▌▌▌▌▌▌▌▒▒▄▄▒▒▌▌▌▌▌▌▌▌▀
                             ╙▀▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▀
                                ╙▀▌▌▌▌▌▌▌▌▌▌▌▀▀
                                     `ΓΓ``
-->
<html>

<head>
  {{>meta-tags}}
  <title>TUI Style guide - {{title}}</title>
  {{>css-refs}}
  {{>web_clips}}
  <script src="https://www.tui.se/cdn/polyfills/v9/ie-polyfills.js"></script>
</head>

<body id="top"{{#if dataBaseUrl}} data-base-url="{{dataBaseUrl}}"{{/if}} data-market="se" class="tui-style-guide-body">

<main class="tui-style-guide sidebar-open main-content">
  <div class="top-area">
    <div class="style-guide-menu-trigger">
      {{>icon_svg name='menue'}}
    </div>

  </div>
  <aside class="sidebar-area">
    {{>icon_svg name='tui-smile'}}
      <h3 class="tui-style-guide-heading">Design system</h3>
    {{>frame-aside styleguide-navigation}}
  </aside>
  <section class="main-area">
    <div class="tui-container">
    <h1>{{title}}</h1>
{% body %}
  </div>
  </section>
</main>
{{>js-refs}}
{{>markdown_converter}}
<script>
  var sgMenu = localStorage.getItem('sgMenu')
  var menuButton = document.querySelector('.style-guide-menu-trigger')
  var sideBar = document.querySelector('.sidebar-area')
  var styleGuideContent = document.querySelector('.tui-style-guide')
  menuButton.addEventListener('click',() => {
    sideBar.classList.toggle('hidden')
    styleGuideContent.classList.toggle('sidebar-open')

    if (sgMenu === 'false') {
      localStorage.setItem('sgMenu', 'true')
    } else {
      localStorage.setItem('sgMenu', 'false')
    }
  })

  if(sgMenu === 'true') {
    sideBar.classList.toggle('hidden')
    styleGuideContent.classList.toggle('sidebar-open')
  }
</script>
</body>
</html>
