fix(header): reduce horizontal padding in header

#429
pycontw · Aug 4, 2023 · 72ffb7d · 72ffb7d
1 parent fdbe5fd
commit 72ffb7d
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 13 deletions.
diff --git a/components/core/header/Header.vue b/components/core/header/Header.vue
@@ -1,13 +1,11 @@
 <template>
     <header class="w-full">
         <div class="header-container --desktop hidden md:block">
-            <scrollable-nav-bar>
-                <div class="header__nav-bar">
-                    <home-icon />
-                    <nav-bar />
-                    <locale-switch />
-                </div>
-            </scrollable-nav-bar>
+            <div class="header__nav-bar">
+                <home-icon />
+                <nav-bar />
+                <locale-switch />
+            </div>
         </div>
         <div class="header-container --mobile md:hidden">
             <div class="header__nav-bar">
@@ -25,7 +23,6 @@
 import HomeIcon from './HomeIcon'
 import NavBar from './nav-bar/NavBar'
 import NavBarHamburger from './nav-bar/NavBarHamburger'
-import ScrollableNavBar from './nav-bar/ScrollableNavBar'
 import LocaleSwitch from './locale-switch/LocaleSwitch'
 export default {
     name: 'CoreHeader',
@@ -34,7 +31,6 @@ export default {
         LocaleSwitch,
         NavBar,
         NavBarHamburger,
-        ScrollableNavBar,
     },
 }
 </script>
@@ -47,7 +43,7 @@ export default {
 }
 
 .header__nav-bar {
-    @apply flex w-full items-center justify-between px-4;
+    @apply flex w-full items-center justify-between px-2;
     pointer-events: auto; /*enable click-through ScrollableNavBar*/
 }
 .header-container,

diff --git a/components/core/header/HomeIcon.vue b/components/core/header/HomeIcon.vue
@@ -1,7 +1,7 @@
 <template>
     <locale-link
         to="/"
-        class="core-homeIcon flex items-center justify-center py-2 md:px-8"
+        class="core-homeIcon flex items-center justify-center py-2 md:px-4"
         customized
     >
         <img

diff --git a/components/core/header/nav-bar/NavBar.vue b/components/core/header/nav-bar/NavBar.vue
@@ -182,7 +182,7 @@ export default {
                 'h-full': isLink,
                 'justify-center': isLink,
                 'items-center': isLink,
-                'px-8': isLink,
+                'px-5': isLink,
                 'py-2': isLink,
                 'bg-transparent': !isOnCurrentPath,
                 '--active': isOnCurrentPath,

diff --git a/components/core/header/nav-bar/NavBarItemDropdown.vue b/components/core/header/nav-bar/NavBarItemDropdown.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        class="relative flex h-full items-center justify-center px-8 text-left"
+        class="relative flex h-full items-center justify-center px-5 text-left"
         @mouseenter="showMenu"
         @mouseleave="hideMenu"
     >