UX: restyle main nav on mobile (#28094)

app/assets/javascripts/discourse/app/components/navigation-bar.hbs

@@ -1,8 +1,10 @@
 {{#if this.site.mobileView}}
   <li class="navigation-toggle">
     <a href {{on "click" this.toggleDrop}} class="toggle-link">
-      {{this.selectedNavItem.displayName}}
-      {{d-icon "caret-down"}}
+      <span
+        class="toggle-link__text"
+      >{{this.selectedNavItem.displayName}}</span>
+      {{d-icon "discourse-chevron-expand"}}
     </a>
   </li>
   {{#if this.expanded}}

app/assets/stylesheets/mobile/topic-list.scss

@@ -45,6 +45,25 @@
     position: relative;
     .navigation-toggle {
       flex: 0 1 auto;
+      border: 0;
+
+      .toggle-link {
+        font-size: var(--font-up-1-rem);
+        font-weight: bold;
+        color: var(--primary-high);
+        padding: 0;
+
+        &:hover,
+        &:focus {
+          background: none;
+        }
+
+        .d-icon {
+          color: inherit;
+          font-size: var(--font-down-2);
+          margin-left: 0.5em;
+        }
+      }
     }
     > li {
       margin-right: 0;
@@ -460,6 +479,9 @@ td .main-link {
   }
 }
 .topic-list {
+  &-body {
+    border-width: 1px;
+  }
   .num.posts-map {
     font-size: var(--font-up-2);
     padding: 0;