fix(theme): fix local nav alignment and increase touch area

Author: brc-dd

src/client/theme-default/components/VPLocalNav.vue

@@ -32,7 +32,7 @@ const classes = computed(() => {
     VPLocalNav: true,
     'has-sidebar': hasSidebar.value,
     empty: !hasLocalNav.value,
-    fixed: !hasLocalNav.value && !hasSidebar.value,
+    fixed: !hasLocalNav.value && !hasSidebar.value
   }
 })
 </script>
@@ -113,7 +113,6 @@ const classes = computed(() => {
 .menu {
   display: flex;
   align-items: center;
-  padding: 12px 24px 11px;
   line-height: 24px;
   font-size: 12px;
   font-weight: 500;
@@ -126,12 +125,6 @@ const classes = computed(() => {
   transition: color 0.25s;
 }
 
-@media (min-width: 768px) {
-  .menu {
-    padding: 0 32px;
-  }
-}
-
 @media (min-width: 960px) {
   .menu {
     display: none;
@@ -143,12 +136,14 @@ const classes = computed(() => {
   font-size: 14px;
 }
 
-.VPOutlineDropdown {
+.menu,
+:deep(.VPLocalNavOutlineDropdown > button) {
   padding: 12px 24px 11px;
 }
 
 @media (min-width: 768px) {
-  .VPOutlineDropdown {
+  .menu,
+  :deep(.VPLocalNavOutlineDropdown > button) {
     padding: 12px 32px 11px;
   }
 }

src/client/theme-default/components/VPLocalNavOutlineDropdown.vue

@@ -92,16 +92,6 @@ function scrollToTop() {
 </template>
 
 <style scoped>
-.VPLocalNavOutlineDropdown {
-  padding: 12px 20px 11px;
-}
-
-@media (min-width: 960px) {
-  .VPLocalNavOutlineDropdown {
-    padding: 12px 36px 11px;
-  }
-}
-
 .VPLocalNavOutlineDropdown button {
   display: block;
   font-size: 12px;