feat(easel): update navbar

static/src/main.scss

@@ -1,6 +1,12 @@
 @use "flag-icons/sass/flag-icons" with (
   $flag-icons-path: "flag-icons/flags",
-  $flag-icons-included-countries: ("gb", "ru", "by", "ua", "kz")
+  $flag-icons-included-countries: (
+    "gb",
+    "ru",
+    "by",
+    "ua",
+    "kz",
+  )
 );
 
 @import "./lib/bootstrap";
@@ -21,3 +27,26 @@
   height: 2rem;
   background-size: contain;
 }
+
+.app-header {
+  display: flex;
+  flex-direction: row;
+
+  > .link-list {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+
+    app-link {
+      display: flex;
+      align-items: center;
+
+      &:not(:last-child)::after {
+        margin-left: 1rem;
+        content: "|";
+      }
+    }
+  }
+}
+
+@import "./mobile";

static/src/mobile.scss

@@ -0,0 +1,44 @@
+$mobile-spacer: 0.5rem;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+);
+
+@media (max-width: map-get($grid-breakpoints, "md")) {
+  .app-header {
+    flex-direction: column;
+
+    > .link-list {
+      flex-direction: column;
+      gap: 0;
+
+      app-link {
+        display: flex;
+        align-items: center;
+
+        &:not(:last-child)::after {
+          content: "";
+        }
+      }
+
+      &::after {
+        content: " ";
+        padding-top: 0.5rem;
+      }
+    }
+  }
+
+  .navbar-nav {
+    flex-direction: column !important;
+
+    > .nav-item {
+      .btn {
+        padding: 0.125rem !important;
+      }
+    }
+  }
+}