refactor: styling changes to the Sidenav

Dobromir Hristov · Dobromir Hristov · commit f71e95bdcd50 · 2022-01-21T13:00:53.000+02:00
diff --git a/src/components/AdjustableSidebarWidth.vue b/src/components/AdjustableSidebarWidth.vue
@@ -166,8 +166,10 @@ export default {
     width: 0 !important;
     min-width: 0;
     max-width: 100%;
-    position: absolute;
-    z-index: 1;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: 9999;
     transform: translateX(-100px);
     transition: width 0.15s linear, transform 0.15s ease-in;
 
diff --git a/src/components/DocumentationTopic.vue b/src/components/DocumentationTopic.vue
@@ -44,6 +44,7 @@
                 :parent-topic-identifiers="navigatorParentTopicIdentifiers"
                 :technology="technology"
                 :is_fetching="isFetching"
+                @close="isSideNavOpen = false"
               />
             </template>
           </NavigatorDataProvider>
@@ -470,10 +471,7 @@ export default {
   height: 100%;
   box-sizing: border-box;
   @include breakpoint(small) {
-    position: absolute;
-    width: 100%;
     background: var(--color-fill);
-    z-index: 1;
   }
 }
 
diff --git a/src/components/DocumentationTopic/DocumentationNav.vue b/src/components/DocumentationTopic/DocumentationNav.vue
@@ -20,7 +20,9 @@
     aria-label="API Reference"
   >
     <template slot="pre-title">
-      <button @click.prevent="$emit('toggle-sidenav')">Open</button>
+      <button @click.prevent="$emit('toggle-sidenav')">
+        <SidenavIcon class="icon-inline sidenav-icon" />
+      </button>
     </template>
     <template slot="default">
       <slot
@@ -56,11 +58,13 @@
 <script>
 import NavBase from 'docc-render/components/NavBase.vue';
 import { BreakpointName } from 'docc-render/utils/breakpoints';
+import SidenavIcon from 'theme/components/Icons/SidenavIcon.vue';
 import Hierarchy from './DocumentationNav/Hierarchy.vue';
 
 export default {
   name: 'DocumentationNav',
   components: {
+    SidenavIcon,
     NavBase,
     Hierarchy,
   },
@@ -169,4 +173,9 @@ export default {
     }
   }
 }
+
+.sidenav-icon {
+  width: 15px;
+  height: 15px;
+}
 </style>
diff --git a/src/components/Icons/CollectionIcon.vue b/src/components/Icons/CollectionIcon.vue
@@ -11,7 +11,7 @@
 <template>
   <SVGIcon viewBox="0 0 16 16" class="collection-icon">
     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g transform="translate(2.100000, 2.800000)" fill="#509CA3" fill-rule="nonzero">
+      <g transform="translate(2.100000, 2.800000)" fill="currentColor" fill-rule="nonzero">
         <path
           d="M1.00195312,6.21367188 C1.55273438,6.21367188 2.00390625,5.7625 2.00390625,5.21171875 C2.00390625,4.6609375 1.55273438,4.20976563 1.00195312,4.20976563 C0.451171875,4.20976563 0,4.6609375 0,5.21171875 C0,5.7625 0.451171875,6.21367188 1.00195312,6.21367188 Z M10.9238281,5.93828125 C11.328125,5.93828125 11.6503906,5.621875 11.6503906,5.21171875 C11.6503906,4.80742188 11.3339844,4.48515625 10.9238281,4.48515625 L4.0546875,4.48515625 C3.65039063,4.48515625 3.328125,4.8015625 3.328125,5.21171875 C3.328125,5.61601563 3.64453125,5.93828125 4.0546875,5.93828125 L10.9238281,5.93828125 Z"></path>
         <path
diff --git a/src/components/Icons/FilterIcon.vue b/src/components/Icons/FilterIcon.vue
@@ -11,15 +11,13 @@
 <template>
   <SVGIcon
     class="filter-icon"
-    height="21"
-    width="21"
-    viewBox="0 0 41 41"
+    height="14"
+    width="14"
+    viewBox="0 0 14 14"
     fill="currentColor"
   >
-    <path d="M20.8.3a20,20,0,0,1,0,40,20.1,20.1,0,0,1-20-20A20.2,20.2,0,0,1,20.8.3Zm0,2.6a17.4,17.4,0,0,0,0,34.8A17.2,17.2,0,0,0,38.2,20.3,17.3,17.3,0,0,0,20.8,2.9Z"/>
-    <path d="M31.9,16a1.1,1.1,0,0,0,1.2-1.1,1.1,1.1,0,0,0-1.2-1.1H9.8a1.1,1.1,0,0,0-1.2,1.1A1.1,1.1,0,0,0,9.8,16Z"/>
-    <path d="M29,22.6a1,1,0,0,0,1.1-1.1A1.1,1.1,0,0,0,29,20.4H12.7a1.1,1.1,0,0,0-1.2,1.1,1.1,1.1,0,0,0,1.2,1.1Z"/>
-    <path d="M25.9,29.2a1.1,1.1,0,0,0,1.2-1.1A1.1,1.1,0,0,0,25.9,27H15.8a1.1,1.1,0,0,0-1.2,1.1,1.1,1.1,0,0,0,1.2,1.1Z"/>
+    <path
+      d="M13.399 4.062c0.169 0 0.311-0.059 0.427-0.177s0.174-0.26 0.174-0.428c0-0.169-0.058-0.312-0.173-0.43s-0.258-0.176-0.427-0.176h-12.798c-0.169 0-0.311 0.059-0.427 0.176s-0.174 0.261-0.174 0.429c0 0.167 0.058 0.31 0.175 0.428s0.259 0.177 0.427 0.177h12.798zM11.999 7.605c0.169 0 0.311-0.059 0.427-0.177s0.174-0.26 0.174-0.428c0-0.169-0.058-0.312-0.173-0.429s-0.258-0.176-0.427-0.176h-9.964c-0.169 0-0.311 0.059-0.427 0.176s-0.174 0.26-0.174 0.429c0 0.167 0.058 0.31 0.174 0.428s0.258 0.177 0.427 0.177h9.964zM10.598 11.148c0.169 0 0.311-0.059 0.427-0.176s0.174-0.26 0.174-0.428c0-0.169-0.058-0.312-0.174-0.429s-0.258-0.176-0.427-0.176h-7.157c-0.169 0-0.312 0.059-0.43 0.176s-0.177 0.26-0.177 0.428c0 0.167 0.059 0.31 0.177 0.428s0.262 0.177 0.43 0.177h7.157z"></path>
   </SVGIcon>
 </template>
 
diff --git a/src/components/Icons/SidenavIcon.vue b/src/components/Icons/SidenavIcon.vue
@@ -0,0 +1,24 @@
+<!--
+  This source file is part of the Swift.org open source project
+
+  Copyright (c) 2021 Apple Inc. and the Swift project authors
+  Licensed under Apache License v2.0 with Runtime Library Exception
+
+  See https://swift.org/LICENSE.txt for license information
+  See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+-->
+
+<template>
+  <SVGIcon viewBox="0 0 14 14" height="14" class="sidenav-icon">
+    <path d="M11.632 11.991c0.577 0 1.010-0.143 1.299-0.43 0.287-0.286 0.432-0.713 0.432-1.278v-6.562c0-0.565-0.145-0.991-0.433-1.28s-0.721-0.433-1.298-0.433h-9.264c-0.569 0-1 0.144-1.292 0.43s-0.439 0.714-0.439 1.283v6.562c0 0.569 0.147 0.996 0.439 1.28s0.723 0.427 1.292 0.427h9.264zM4.837 11.030h-2.43c-0.258 0-0.455-0.068-0.591-0.205s-0.206-0.34-0.206-0.609v-6.425c0-0.269 0.068-0.472 0.205-0.609s0.335-0.205 0.592-0.205h2.43v8.053zM11.593 11.030h-5.828v-8.053h5.827c0.258 0 0.458 0.068 0.598 0.205s0.211 0.34 0.211 0.609v6.425c0 0.27-0.070 0.473-0.211 0.609s-0.339 0.205-0.597 0.205zM3.791 4.963c0.091 0 0.168-0.033 0.233-0.1 0.060-0.057 0.097-0.138 0.097-0.228s-0.037-0.17-0.097-0.228l-0-0c-0.058-0.058-0.139-0.094-0.228-0.094-0.002 0-0.004 0-0.005 0h-1.132c-0.001-0-0.002-0-0.003-0-0.088 0-0.168 0.036-0.225 0.094l-0 0c-0.060 0.057-0.097 0.138-0.097 0.228s0.037 0.17 0.097 0.228l0 0c0.064 0.067 0.14 0.1 0.227 0.1h1.132zM3.791 6.379c0.091 0 0.168-0.032 0.233-0.097 0.060-0.057 0.098-0.137 0.098-0.226s-0.037-0.17-0.098-0.226l-0-0c-0.058-0.058-0.139-0.094-0.228-0.094-0.002 0-0.004 0-0.005 0h-1.132c-0.001-0-0.002-0-0.003-0-0.088 0-0.168 0.036-0.225 0.094l-0 0c-0.060 0.057-0.097 0.137-0.097 0.226s0.037 0.169 0.097 0.226l0 0c0.057 0.060 0.137 0.097 0.226 0.097 0 0 0.001 0 0.001 0h1.132zM3.791 7.796c0.091 0 0.168-0.032 0.233-0.097 0.059-0.056 0.096-0.135 0.097-0.222v-0c0-0.002 0-0.004 0-0.007 0-0.088-0.037-0.168-0.096-0.224l-0-0c-0.058-0.058-0.139-0.094-0.228-0.094-0.002 0-0.004 0-0.005 0h-1.132c-0.001-0-0.002-0-0.003-0-0.088 0-0.168 0.036-0.225 0.094l-0 0c-0.060 0.056-0.097 0.136-0.097 0.224 0 0.002 0 0.005 0 0.007l-0-0c0 0.083 0.032 0.158 0.097 0.222 0.057 0.060 0.137 0.097 0.225 0.097 0.001 0 0.001 0 0.002-0h1.132z"></path>
+  </SVGIcon>
+</template>
+
+<script>
+import SVGIcon from 'docc-render/components/SVGIcon.vue';
+
+export default {
+  name: 'SidenavIcon',
+  components: { SVGIcon },
+};
+</script>
diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
@@ -8,20 +8,29 @@
       :active-path="activePath"
       :show-extended-info="showExtraInfo"
       :filter-pattern="filterPattern"
-    />
+      @close="$emit('close')"
+    >
+      <div class="navigator-filter">
+        <div class="input-wrapper">
+          <FilterIcon class="icon-inline filter-icon" :class="{ colored: filter }" />
+          <input
+            type="text"
+            :value="filter"
+            :placeholder="`Filter in ${technology.title}`"
+            @input="debounceInput">
+          <button
+            class="clear-button"
+            :class="{ hide: !filter }"
+            @click.prevent="filter = ''"
+          >
+            <ClearRoundedIcon class="icon-inline clear-icon" />
+          </button>
+        </div>
+      </div>
+    </NavigatorCard>
     <div v-else>
       Fetching...
     </div>
-    <div class="navigator-filter">
-      <div class="input-wrapper">
-        <FilterIcon class="icon-inline filter-icon" />
-        <input
-          type="text"
-          :value="filter"
-          :placeholder="`Filter in ${technology.title}`"
-          @input="debounceInput">
-      </div>
-    </div>
   </div>
 </template>
 
@@ -33,6 +42,7 @@ import FilterIcon from 'docc-render/components/Icons/FilterIcon.vue';
 import throttle from 'docc-render/utils/throttle';
 import { INDEX_ROOT_KEY } from 'docc-render/constants/sidebar';
 import { baseNavStickyAnchorId } from 'docc-render/constants/nav';
+import ClearRoundedIcon from 'theme/components/Icons/ClearRoundedIcon.vue';
 
 /**
  * @typedef NavigatorFlatItem
@@ -53,6 +63,7 @@ import { baseNavStickyAnchorId } from 'docc-render/constants/nav';
 export default {
   name: 'Navigator',
   components: {
+    ClearRoundedIcon,
     FilterIcon,
     NavigatorCard,
   },
@@ -183,42 +194,72 @@ export default {
   top: $nav-height;
   max-height: calc(100vh - #{$nav-height} - var(--sticky-top-offset));
   height: 100%;
-  padding-bottom: 50px;
   box-sizing: border-box;
   transition: max-height 0.3s linear;
   border-left: 1px solid var(--color-grid);
+
+  @include breakpoint(small) {
+    position: static;
+    max-height: 100%;
+    border-left: none;
+  }
 }
 
 .navigator-filter {
-  position: absolute;
-  width: 100%;
   box-sizing: border-box;
-  bottom: 0;
-  z-index: 1;
-  padding: 8px 20px;
-  background: var(--color-fill-secondary);
+  padding: 14px 30px;
   border-top: 1px solid var(--color-grid);
 
+  @include breakpoint(small) {
+    border: none;
+    padding: 10px 20px;
+  }
+
   .input-wrapper {
     position: relative;
   }
 
   .filter-icon {
     width: 1em;
     position: absolute;
-    left: 0;
+    left: 14px;
+    top: 50%;
+    transform: translate(0%, -50%);
+    color: var(--color-figure-gray-secondary);
+
+    &.colored {
+      color: var(--color-link);
+    }
+  }
+
+  .clear-button {
+    position: absolute;
+    right: 10px;
     top: 50%;
-    transform: translate(50%, -50%);
-    color: var(--color-link);
+    transform: translateY(-50%);
+    display: flex;
+    border-radius: 100%;
+
+    &:focus {
+      @include focus-shadow;
+    }
+
+    &.hide {
+      display: none;
+    }
+  }
+
+  .clear-icon {
+    width: 0.8em;
+    color: var(--color-figure-gray-secondary);
   }
 
   input {
     border: 1px solid var(--color-grid);
-    padding: 10px;
+    padding: 10px 25px 10px 40px;
     width: 100%;
     box-sizing: border-box;
     border-radius: $tiny-border-radius;
-    padding-left: 35px;
 
     &:focus {
       outline: none;
diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="navigator-card">
     <div class="head-wrapper" :class="{ 'extra-info': showExtendedInfo }">
+      <button class="close-card-mobile" @click="$emit('close')">
+        <InlineCloseIcon class="icon-inline close-icon" />
+      </button>
       <NavigatorLeafIcon :kind="kind" class="card-icon" />
       <span class="card-link">
         {{ technology }}
@@ -34,6 +37,9 @@
         </template>
       </div>
     </div>
+    <div class="card-slot">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -44,6 +50,7 @@ import { INDEX_ROOT_KEY, LEAF_SIZES } from 'docc-render/constants/sidebar';
 import NavigatorLeafIcon from 'docc-render/components/Navigator/NavigatorLeafIcon.vue';
 import NavigatorCardItem from 'docc-render/components/Navigator/NavigatorCardItem.vue';
 import { RecycleScroller } from 'vue-virtual-scroller';
+import InlineCloseIcon from 'theme/components/Icons/InlineCloseIcon.vue';
 
 /**
  * Renders the card for a technology and it's child symbols, in the navigator.
@@ -53,6 +60,7 @@ import { RecycleScroller } from 'vue-virtual-scroller';
 export default {
   name: 'NavigatorCard',
   components: {
+    InlineCloseIcon,
     NavigatorCardItem,
     NavigatorLeafIcon,
     RecycleScroller,
@@ -307,33 +315,71 @@ export default {
   flex-direction: column;
 
   .head-wrapper {
-    padding: 10px 20px;
+    padding: 10px 36px;
     border-bottom: 1px solid var(--color-grid);
     display: flex;
-    align-items: center;
+    align-items: baseline;
+    position: relative;
+
+    @include breakpoint(small) {
+      justify-content: center;
+    }
   }
 
   .card-icon {
+    width: 19px;
+    height: 19px;
     color: var(--color-figure-blue);
   }
+
+  @include breakpoint(small) {
+    .card-slot {
+      order: 2;
+    }
+    .card-body {
+      order: 3;
+    }
+  }
 }
 
 .no-items-wrapper {
   color: var(--color-figure-gray-tertiary);
   @include font-styles(body-reduced);
 }
 
+.close-card-mobile {
+  display: none;
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--color-link);
+
+  @include breakpoint(small) {
+    display: flex;
+  }
+
+  .close-icon {
+    width: 1em;
+  }
+}
+
 .card-body {
-  padding: 10px 20px;
+  --card-horizontal-spacing: 32px;
+  padding: 18px var(--card-horizontal-spacing);
   // right padding is added by the items, so visually the scroller is stuck to the side
   padding-right: 0;
   flex: 1 1 auto;
   min-height: 0;
+  @include breakpoint(small) {
+    --card-horizontal-spacing: 20px;
+    padding-top: 0;
+  }
 }
 
 .card-link {
   color: var(--color-text);
-  @include font-styles(body-tight);
+  @include font-styles(body-reduced);
   font-weight: $font-weight-semibold;
 }
 
diff --git a/src/components/Navigator/NavigatorCardItem.vue b/src/components/Navigator/NavigatorCardItem.vue
