panel layout

frontend/templates/panel/nav/index.html

@@ -1,20 +1,24 @@
-<header class="page-header nav-container">
+<header class="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"
+      class="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">
+      <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"); .>
+    <. include!("menu/index.html"); .> <. include!("theme-toggle/index.html");
+    .> <. include!("collapse-nav/index.html"); .>
   </nav>
 </header>

frontend/templates/panel/nav/main.scss

@@ -0,0 +1,114 @@
+@import '../vars';
+
+$nav-width: 220px;
+$nav-txt-color: #dde9f8;
+$nav-bg-color: #242e42;
+
+
+.nav-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  padding-top: 20px;
+  width: $nav-width;
+  color: $nav-txt-color;
+  background: $nav-bg-color;
+}
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.nav__home-btn {
+  display: block;
+  margin: 0 15px;
+}
+
+.nav__logo {
+  max-width: 120px;
+  fill: $white;
+  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(298deg)
+    brightness(104%) contrast(101%);
+}
+
+.nav__show-menu {
+  display: none;
+  margin-left: 5px;
+  padding: 4px;
+  background: $page-content-blockColor;
+  border-radius: $border-radius;
+}
+
+.nav__show-menu-icon {
+  fill: $black;
+  transition: transform 0.2s;
+}
+
+.nav-menu {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin-top: 35px;
+}
+
+.page-header .admin-menu li:nth-last-child(2) {
+  margin-bottom: 35px;
+}
+
+.page-header .admin-menu li:last-child {
+  margin-top: auto;
+  margin-bottom: 20px;
+}
+
+.page-header .admin-menu li > * {
+  width: 100%;
+  padding: 12px 15px;
+}
+
+.page-header .admin-menu .switcher {
+  display: inline-block;
+  width: auto;
+}
+
+.page-header .admin-menu .menu-heading h3 {
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  font-size: 12px;
+  margin-top: 12px;
+  color: var(--page-header-headingColor);
+}
+
+.page-header .admin-menu svg {
+  width: 20px;
+  height: 20px;
+  fill: var(--page-header-txtColor);
+  margin-right: 10px;
+}
+
+.page-header .admin-menu a,
+.page-header .admin-menu button {
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+}
+
+.page-header .admin-menu a:hover,
+.page-header .admin-menu a:focus,
+.page-header .admin-menu button:hover,
+.page-header .admin-menu button:focus {
+  background: var(--page-header-bgColor-hover);
+  color: var(--blue);
+  outline: none;
+}
+
+.page-header .admin-menu a:hover svg,
+.page-header .admin-menu a:focus svg,
+.page-header .admin-menu button:hover svg,
+.page-header .admin-menu button:focus svg {
+  fill: var(--blue);
+}

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

@@ -1,5 +1,6 @@
-<li 
+<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"
@@ -10,6 +11,7 @@
   </a>
 </li>
 
+<!--
 <style>
   .nav-section__item__link {
     filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(298deg)
@@ -22,3 +24,4 @@
     outline: none;
   }
 </style>
+-->