feat(easel): update navbar

static/src/lib/flag-icons.scss

@@ -0,0 +1,15 @@
+@use "flag-icons/sass/flag-icons" with (
+  $flag-icons-path: "flag-icons/flags",
+  $flag-icons-included-countries: (
+    "gb",
+    "ru",
+    "by",
+    "ua",
+    "kz",
+  )
+);
+
+.fir {
+  @extend .fis;
+  border-radius: 50%;
+}

static/src/main.scss

@@ -1,8 +1,4 @@
-@use "flag-icons/sass/flag-icons" with (
-  $flag-icons-path: "flag-icons/flags",
-  $flag-icons-included-countries: ("gb", "ru", "by", "ua", "kz")
-);
-
+@import "./lib/flag-icons";
 @import "./lib/bootstrap";
 @import "./lib/bootstrap-icons";
 
@@ -21,3 +17,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,34 @@
+@import "./lib/bootstrap";
+
+@include media-breakpoint-down(md) {
+  .app-header {
+    flex-direction: column;
+
+    > .link-list {
+      border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+      padding-bottom: map-get($spacers, 1); 
+      margin-bottom: map-get($spacers, 1); 
+      flex-direction: column;
+      gap: 0;
+
+      app-link {
+        display: flex;
+        align-items: center;
+
+        &:not(:last-child)::after {
+          content: "";
+        }
+      }
+    }
+  }
+
+  .navbar-nav {
+    flex-direction: column !important;
+
+    > .nav-item {
+      .btn {
+        padding: 0.125rem !important;
+      }
+    }
+  }
+}

static/src/weather.scss

@@ -31,7 +31,7 @@
   }
 
   .temperature {
-    padding: 0;
+    padding: 0 !important;
   }
 
   .temperature .value {