panel

frontend/templates/panel/nav/collapse-nav/index.html

@@ -0,0 +1,8 @@
+<button
+  class="collapse-btn nav__colapse-btn"
+  aria-expanded="true"
+  aria-label="collapse menu"
+>
+  <.# Include collapse graphics .>
+  Collapse
+</button>

frontend/templates/panel/nav/index.html

@@ -0,0 +1,20 @@
+<header class="page-header nav-container">
+  <nav class="nav">
+    <a href="#0" aria-label="forecastr logo" class="nav__home-btn">
+      <img class="nav__logo" src="/svg/shield.svg" alt="logo" />
+    </a>
+    <button
+      class="toggle-mob-menu nav__show-menu"
+      aria-expanded="false"
+      aria-label="open menu"
+    >
+      <.# TODO change show-menu icon .>
+      <svg width="20" height="20" class="nav__show-menu-icon" aria-hidden="true">
+        <use xlink:href="#down"></use>
+      </svg>
+    </button>
+    <. include!("menu/index.html"); .>
+    <. include!("theme-toggle/index.html"); .>
+    <. include!("collapse-nav/index.html"); .>
+  </nav>
+</header>

frontend/templates/panel/nav/menu/index.html

@@ -0,0 +1,5 @@
+<ul class="menu">
+  <!-- Sections -->
+  <. let section = &ADMIN_SECTION; .> <. include!("section/index.html"); .> <.
+  let section = &SETTINGS_SECTION; .> <. include!("section/index.html"); .>
+</ul>

frontend/templates/panel/nav/menu/section/heading.html

@@ -0,0 +1,3 @@
+<li class="menu-heading nav-menu__heading nav-section__heading">
+  <h3><.= section.name .></h3>
+</li>

frontend/templates/panel/nav/menu/section/index.html

@@ -0,0 +1,4 @@
+<. include!("heading.html"); .>
+<. for heading in &section.elements {  .>
+   <. include!("item.html"); .>
+<.}; .>

frontend/templates/panel/nav/menu/section/item.html

@@ -0,0 +1,24 @@
+<li 
+  class='<.= if active.name == heading.name {"nav-section__item--active"} else { "nav-section__item"} .>'
+  <a href="#0" class="nav-menu__item__link nav-section__item__link">
+    <img
+      class="icon nav-menu__item__icon nav-section__item__icon"
+      src="/svg/<.= heading.icon.>.svg"
+      alt=""
+    />
+    <.= heading.name .>
+  </a>
+</li>
+
+<style>
+  .nav-section__item__link {
+    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(298deg)
+      brightness(104%) contrast(101%);
+  }
+
+  .nav-section__item:hover {
+    background: var(--page-header-bgColor-hover);
+    color: var(--blue);
+    outline: none;
+  }
+</style>

frontend/templates/panel/nav/theme-toggle/index.html

@@ -0,0 +1,13 @@
+<div class="theme-switch">
+  <input type="checkbox" id="theme-switch_checkbox" class="theme-switch__checkbox" checked />
+  <label for="theme-switch__checkbox">
+    <span></span>
+    <span class="theme-switch__dark>Dark</span>
+    <span class="theme-switch__light>Dark</span>
+  </label>
+<style>
+.theme-switch__light {
+  display: none;
+}
+</style>
+</div>