feat: nav links style in mobile

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

@@ -43,4 +43,23 @@
 .nav-link.external:hover {
   border-bottom-color: transparent;
 }
+
+@media screen and (max-width: 719px) {
+  .nav-item {
+    margin-left: 0;
+    padding: 0.35rem 1.5rem 0.35rem 1.25rem;
+  }
+
+  .nav-link {
+    line-height: 1.7;
+    font-size: 1em;
+    font-weight: 600;
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+  .nav-link:hover,
+  .nav-link.active {
+    color: var(--accent-color);
+  }
+}
 </style>

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

@@ -22,6 +22,8 @@
   .nav-links {
     display: block;
     height: auto;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
   }
 }
 </style>

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

@@ -10,7 +10,7 @@
       <span class="arrow" :class="open ? 'down' : 'right'" />
     </button>
 
-    <ul v-show="open" class="nav-dropdown">
+    <ul class="nav-dropdown">
       <li v-for="(subItem, index) in item.items" :key="subItem.link || index" class="dropdown-item">
         <h4 v-if="subItem.items">{{ subItem.text }}</h4>
         <ul v-if="subItem.items" class="dropdown-subitem-wrapper">
@@ -129,7 +129,7 @@
 }
 .dropdown-wrapper:hover .nav-dropdown,
 .dropdown-wrapper.open .nav-dropdown {
-  display: block !important;
+  display: block;
 }
 .dropdown-wrapper.open:blur {
   display: none;
@@ -158,4 +158,25 @@
   white-space: nowrap;
   margin: 0;
 }
+
+@media screen and (max-width: 719px) {
+  .dropdown-wrapper {
+    height: auto;
+    margin-left: 1.25rem;
+  }
+
+  .dropdown-wrapper .nav-dropdown {
+    position: relative;
+    top: none;
+    right: none;
+    border: none;
+    background-color: transparent;
+  }
+  .dropdown-wrapper:hover .nav-dropdown {
+    display: none;
+  }
+  .dropdown-wrapper.open .nav-dropdown {
+    display: block;
+  }
+}
 </style>