refactor: adds dropdown arrow in lang selection menu for beter UX

migtarx · Dec 4, 2023 · d0e11f3 · d0e11f3
1 parent f0a173d
commit d0e11f3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content b/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content
@@ -252,9 +252,15 @@ a.read-more:active {
   100% {
     opacity: 0; } }
 
+.menu-trigger {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px; }
+
 @media (max-width: 684px) {
   .menu-trigger {
-    margin-right: 20px; } }
+    margin-right: 10px; } }
 
 .menu {
   --color: rgba(0, 0, 0, .12);
@@ -275,7 +281,7 @@ a.read-more:active {
   top: 50px; }
   @media (max-width: 684px) {
     .menu {
-      right: 20px; } }
+      right: 30px; } }
   .menu a {
     text-decoration: none; }
   .menu__inner {
@@ -352,7 +358,6 @@ a.read-more:active {
         display: inline-block;
         padding: 10px; }
   .menu-trigger {
-    width: 24px;
     height: 24px;
     fill: currentColor;
     margin-left: 10px;

diff --git a/themes/hello-friend/assets/css/menu.scss b/themes/hello-friend/assets/css/menu.scss
@@ -9,9 +9,16 @@
   z-index: 99;
 }
 
+.menu-trigger{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
 @media ($phone) {
   .menu-trigger{
-    margin-right: 20px;
+    margin-right: 10px;
   }
 }
 
@@ -28,10 +35,9 @@
   border: none;
   top: 50px;
   @media ($phone) {
-    right: 20px;
+    right: 30px;
   }
 
-
   a {
     text-decoration: none;
   }
@@ -132,7 +138,6 @@
   }
 
   &-trigger {
-    width: 24px;
     height: 24px;
     fill: currentColor;
     margin-left: 10px;

diff --git a/themes/hello-friend/layouts/partials/header.html b/themes/hello-friend/layouts/partials/header.html
@@ -4,6 +4,7 @@
     <span class="header__right">
       <span class="menu-trigger">
         <svg xmlns="http://www.w3.org/2000/svg" height="30" width="34" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M0 128C0 92.7 28.7 64 64 64H256h48 16H576c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H320 304 256 64c-35.3 0-64-28.7-64-64V128zm320 0V384H576V128H320zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1h73.6l8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276H141l19-42.8zM448 164c11 0 20 9 20 20v4h44 16c11 0 20 9 20 20s-9 20-20 20h-2l-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45H448 376c-11 0-20-9-20-20s9-20 20-20h52v-4c0-11 9-20 20-20z"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>
       </span>
       <nav class="menu">
         <ul class="menu__inner menu__inner">