From 1196b316635a327eba87861860ea5705bbeb298f Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Wed, 19 Feb 2025 00:28:08 +0100
Subject: [PATCH] menu: desktop version

---
 src/_assets/css/base.css       |  13 +++
 src/_assets/css/layout.css     |  15 ++++
 src/_assets/css/menu.css       | 142 +++++++++++++++++++++++++++++++++
 src/_assets/css/variables.css  |   7 ++
 src/_includes/layouts/base.njk |  12 ++-
 src/_includes/parts/menu.njk   |  68 ++++++++++++----
 6 files changed, 239 insertions(+), 18 deletions(-)
 create mode 100644 src/_assets/css/layout.css
 create mode 100644 src/_assets/css/menu.css
 create mode 100644 src/_assets/css/variables.css

diff --git a/src/_assets/css/base.css b/src/_assets/css/base.css
index a92cf75..209ca0e 100644
--- a/src/_assets/css/base.css
+++ b/src/_assets/css/base.css
@@ -1,7 +1,20 @@
 html, body {
   font-family: Play, sans-sefif;
+  min-height: 100%;
+}
+
+body {
+  overflow-y: scroll;
+}
+
+*::selection {
+  background-color: var(--color-fg);
+  color: var(--color-bg);
 }
 
 h1 {
   font-family: Xecut, sans-sefif;
+  font-weight: normal;
+  font-size: 72px;
+  margin-block-start: 0;
 }
diff --git a/src/_assets/css/layout.css b/src/_assets/css/layout.css
new file mode 100644
index 0000000..2e71450
--- /dev/null
+++ b/src/_assets/css/layout.css
@@ -0,0 +1,15 @@
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+}
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+}
+
+.container > main {
+  flex: 1 1 auto;
+  padding: calc(4 * var(--step));
+}
diff --git a/src/_assets/css/menu.css b/src/_assets/css/menu.css
new file mode 100644
index 0000000..0d9e92f
--- /dev/null
+++ b/src/_assets/css/menu.css
@@ -0,0 +1,142 @@
+header.menu {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 320px;
+
+  padding: calc(4 * var(--step));
+  font-family: Xecut, sans-serif;
+
+  height: fit-content;
+  min-height: 100vh;
+
+  box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  bottom: 0;
+
+  text-align: end;
+}
+
+/* */
+
+header.menu a {
+  color: var(--color-fg);
+  text-decoration: none;
+  transition: opacity .2s ease;
+}
+
+header.menu a:hover {
+  opacity: 0.5;
+}
+
+/* */
+
+.logo a {
+  font-size: 72px;
+}
+
+/* */
+
+.navbar {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  font-size: calc(4 * var(--step));
+}
+
+.navbar ul {
+  padding: 0;
+}
+
+.navbar li {
+  list-style: none;
+}
+
+.nav-links {
+  margin: calc(8 * var(--step)) 0;
+}
+
+.nav-links li {
+  padding: calc(1 * var(--step)) calc(2 * var(--step));
+
+  border-inline-end: calc(1 * var(--step)) solid;
+  border-color: var(--color-inactive);
+}
+
+.nav-links li.active {
+  border-color: var(--color-fg);
+}
+
+/* */
+
+.nav-langs {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: 0;
+  margin-block-start: auto;
+  text-transform: uppercase;
+}
+
+.nav-langs .lang-separator {
+  color: var(--color-inactive);
+}
+.nav-langs .lang-separator:first-child {
+  display: none;
+}
+
+/* */
+
+.desktop-logo {
+  display: none;
+  margin-block-start: auto;
+}
+
+/* */
+
+.hamburger {
+    display: none;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 21px;
+    position: relative;
+}
+
+.hamburger-icon {
+    display: block;
+    background-color: white;
+    height: 3px;
+    width: 100%;
+    position: absolute;
+    left: 0;
+}
+
+.hamburger-icon:nth-child(1) {
+    top: 0;
+}
+
+.hamburger-icon:nth-child(2) {
+    top: 9px;
+}
+
+.hamburger-icon:nth-child(3) {
+    bottom: 0;
+}
+
+@media (max-width: 768px) {
+    .nav-links {
+        display: none;
+    }
+
+    .nav-links.active {
+        display: block;
+    }
+
+    .hamburger {
+        display: block;
+    }
+}
diff --git a/src/_assets/css/variables.css b/src/_assets/css/variables.css
new file mode 100644
index 0000000..304162c
--- /dev/null
+++ b/src/_assets/css/variables.css
@@ -0,0 +1,7 @@
+body {
+  --step: 8px;
+
+  --color-bg: #ffffff;
+  --color-fg: #000000;
+  --color-inactive: #cdcdcd;
+}
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index fbba876..4f3a602 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -21,12 +21,18 @@
     <link rel="stylesheet" href="/_assets/css/fonts.css">
     <link rel="stylesheet" href="/_assets/css/vendor.css">
 
+    <link rel="stylesheet" href="/_assets/css/variables.css">
     <link rel="stylesheet" href="/_assets/css/base.css">
+
+    <link rel="stylesheet" href="/_assets/css/layout.css">
     <link rel="stylesheet" href="/_assets/css/menu.css">
   </head>
   <body>
-    {% include 'parts/menu.njk' %}
-
-    {{ content | safe }}
+    <div class="container">
+      {% include 'parts/menu.njk' %}
+      <main>
+        {{ content | safe }}
+      </main>
+    </div>
   </body>
 </html>
diff --git a/src/_includes/parts/menu.njk b/src/_includes/parts/menu.njk
index 530ec85..77275ce 100644
--- a/src/_includes/parts/menu.njk
+++ b/src/_includes/parts/menu.njk
@@ -1,18 +1,56 @@
-{% set items = config.menu %}
+<header class="menu">
+  <div class="topbar">
+    <div class="logo">
+      <a href="{{ '/' | locale_url }}">
+        {{ translations[page.lang]['title'] }}
+      </a>
+    </div>
 
-<ul>
-{%- for item in items %}
-  {% set isCurrent = page.url.startsWith('/' ~ page.lang ~ '/' ~ item) %}
-  {% set label = item %}
-  {% set href = ('/' ~ item ~ '/') | locale_url %}
+    <button class="hamburger" id="hamburger" aria-label="Открыть меню">
+      <span class="hamburger-icon"></span>
+      <span class="hamburger-icon"></span>
+      <span class="hamburger-icon"></span>
+    </button>
+  </div>
 
-  <li>
-  {% if isCurrent %}
-    <span>{{ label }}</span>
-  {% else %}
-    <a href="{{ href }}">{{ label }}</a>
-  {% endif %}
-  </li>
 
-{%- endfor %}
-</ul>
+  <nav class="navbar">
+    <ul class="nav-links">
+    {% set items = config.menu %}
+    {%- for item in items %}
+      {% set isCurrent = page.url.startsWith('/' ~ page.lang ~ '/' ~ item) %}
+      {% set label = translations[page.lang]['menu'][item] %}
+      {% set href = ('/' ~ item ~ '/') | locale_url %}
+
+      <li class="{% if isCurrent %} active {% endif %}">
+        <a href="{{ href }}" >
+          {{ label }}
+        </a>
+      </li>
+
+    {%- endfor %}
+    </ul>
+
+    <ul class="nav-langs">
+    {% set langs = config.langs %}
+    {%- for lang in langs %}
+      <li class="lang-separator" aria-hidden>|</li>
+      <li>
+        <a href="{{ page.url | locale_url(lang) }}" >
+          {{ lang }}
+        </a>
+      </li>
+    {%- endfor %}
+    </ul>
+  </nav>
+  <a href="/" class="desktop-logo" aria-hidden>
+    <img src="/_assets/img/common/tower.svg">
+  </a>
+</header>
+
+<script>
+document.getElementById('hamburger').addEventListener('click', function() {
+    const navLinks = document.querySelector('.nav-links');
+    navLinks.classList.toggle('active');
+});
+</script>