feat: icon shift on header menu (#219)

layouts/partials/menu-extra.html

@@ -19,12 +19,14 @@
         {{ end }}
 
         {{ if eq $target "header" }}
+        <span>
         <a href="{{ if .external }}{{ .ref }}{{ else }}{{ relref $current .ref }}{{ end }}" class="gdoc-header__link">
             <svg class="icon {{ .icon }}">
                 <title>{{ .name }}</title>
                 <use xlink:href="#{{ .icon }}"></use>
             </svg>
         </a>
+        </span>
         {{ end }}
     {{ end }}
 {{ end }}

layouts/partials/site-header.html

@@ -38,19 +38,23 @@
                 </svg>
             </span>
             {{ if .Root.Site.Data.menu.extra.header }}
-            <a href="{{ .Root.Site.BaseURL }}" class="gdoc-header__link gdoc-menu-header__home">
+            <span class="gdoc-menu-header__home">
+            <a href="{{ .Root.Site.BaseURL }}" class="gdoc-header__link">
                 <svg class="icon gdoc_home">
                     <title>Back to homepage</title>
                     <use xlink:href="#gdoc_home"></use>
                 </svg>
             </a>
-            <label for="menu-header-control" class="gdoc-menu-header__control">
+            </span>
+            <span class="gdoc-menu-header__control">
+            <label for="menu-header-control">
                 <svg class="icon gdoc_keyborad_arrow_right">
                     <use xlink:href="#gdoc_keyborad_arrow_right"></use>
                     <title>Close Menu Bar</title>
                 </svg>
             </label>
             </span>
+            </span>
             <label for="menu-header-control" class="gdoc-menu-header__control">
                 <svg class="icon gdoc_keyborad_arrow_left">
                     <use xlink:href="#gdoc_keyborad_arrow_left"></use>

src/sass/_base.scss

@@ -201,8 +201,8 @@ img {
   &__items {
     display: inline-block;
 
-    :not(:last-child) {
-      margin-right: $padding-8;
+    > span {
+      margin-left: $padding-8;
     }
   }