Fix Nav title's cursor and tag (#850)

* Change nav-title to be h2

* Delete cursor default

* Delete unnecessary property

* Fix test

* Move nav-title style to the base components

Author: marinaaisa

src/components/DocumentationLayout.vue

@@ -19,8 +19,8 @@
       :displaySidenav="enableNavigator"
       @toggle-sidenav="handleToggleSidenav"
     >
-      <template #title>
-        <slot name="nav-title" />
+      <template #title="{ className }">
+        <slot name="nav-title" :className="className" />
       </template>
     </Nav>
     <AdjustableSidebarWidth
@@ -62,8 +62,8 @@
                   <template v-if="enableQuickNavigation" #filter>
                     <QuickNavigationButton @click.native="openQuickNavigationModal" />
                   </template>
-                  <template #navigator-head>
-                    <slot name="nav-title" />
+                  <template #navigator-head="{ className }">
+                    <slot name="nav-title" :className="className" />
                   </template>
                 </Navigator>
               </transition>

src/components/DocumentationTopic/DocumentationNav.vue

@@ -38,7 +38,7 @@
       </div>
     </template>
     <template #default>
-      <slot name="title" />
+      <slot name="title" className="nav-title" />
     </template>
     <template #tray="{ closeNav }">
       <NavMenuItems
@@ -194,10 +194,7 @@ $sidenav-icon-padding-size: 5px;
 .sidenav-toggle-wrapper {
   display: flex;
   margin-top: 1px;
-
-  @include breakpoints-from(large, nav) {
-    margin-right: $nav-padding / 2;
-  }
+  margin-right: $nav-padding / 2;
 
   // This is a hack to enforce the toggle to be visible when in breakpoint,
   // even if already toggled off on desktop. Conditionally checking the current breakpoint,

src/components/NavBase.vue

@@ -668,15 +668,13 @@ $content-max-width: map-deep-get($breakpoint-attributes, (nav, large, content-wi
 
     @include nav-is-wide-format(true) {
       width: 100%;
-      justify-content: center;
     }
   }
 }
 
 .nav-title {
   height: $nav-height;
   @include font-styles(nav-title);
-  cursor: default;
   display: flex;
   align-items: center;
   white-space: nowrap;

src/components/Navigator.vue

@@ -28,7 +28,7 @@
     >
       <template #filter><slot name="filter" /></template>
       <template #navigator-head>
-        <slot name="navigator-head"/>
+        <slot name="navigator-head" className="nav-title"/>
       </template>
     </NavigatorCard>
     <LoadingNavigatorCard
@@ -177,4 +177,10 @@ export default {
     transition: none;
   }
 }
+
+:deep(.nav-title) {
+  font-size: inherit;
+  font-weight: inherit;
+  flex-grow: 1;
+}
 </style>

src/components/Navigator/BaseNavigatorCard.vue

@@ -121,6 +121,7 @@ $close-icon-padding: 5px;
 }
 
 .close-card {
+  margin: 0;
 
   .close-icon {
     width: $close-icon-size;

src/views/DocumentationTopic.vue

@@ -14,11 +14,11 @@
       v-if="topicData"
       v-bind="documentationLayoutProps"
     >
-      <template #nav-title>
+      <template #nav-title="{ className }">
         <component
-          :is="rootLink ? 'router-link' : 'span'"
+          :is="rootLink ? 'router-link' : 'h2'"
           :to="rootLink"
-          class="nav-title"
+          :class="className"
         >
           {{ $t('documentation.title') }}
         </component>

tests/unit/views/DocumentationTopic.spec.js

@@ -261,7 +261,7 @@ describe('DocumentationTopic', () => {
 
     wrapper.setData({ topicData });
 
-    const title = wrapper.find('span.nav-title');
+    const title = wrapper.find('h2.nav-title');
     expect(title.exists()).toBe(true);
     expect(title.text()).toBe('documentation.title');
   });