Add Language Toggle to Nav Bar

app/public/theme-settings.json

@@ -54,9 +54,6 @@
   },
   "features": {
     "docs": {
-      "summary": {
-        "hide": false
-      },
       "navigator": {
         "enable": false
       }

src/components/DocumentationTopic.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021 Apple Inc. and the Swift project authors
+  Copyright (c) 2022 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
@@ -13,6 +13,12 @@
     <main class="main" id="main" role="main" tabindex="0">
       <DocumentationHero :type="symbolKind || role" :enhanceBackground="enhanceBackground">
         <slot name="above-title" />
+        <LanguageSwitcher
+          v-if="shouldShowLanguageSwitcher"
+          :interfaceLanguage="interfaceLanguage"
+          :objcPath="objcPath"
+          :swiftPath="swiftPath"
+        />
         <Title :eyebrow="roleHeading">{{ title }}</Title>
         <Abstract v-if="abstract" :content="abstract" />
         <div v-if="sampleCodeDownload">
@@ -23,14 +29,6 @@
           :platforms="platforms" :technologies="technologies"
         />
       </DocumentationHero>
-        <Summary v-if="!hideSummary && shouldShowLanguageSwitcher">
-          <LanguageSwitcher
-            v-if="shouldShowLanguageSwitcher"
-            :interfaceLanguage="interfaceLanguage"
-            :objcPath="objcPath"
-            :swiftPath="swiftPath"
-          />
-        </Summary>
         <div class="container">
           <Description :hasOverview="hasOverview">
             <RequirementMetadata
@@ -81,7 +79,6 @@
 <script>
 import Language from 'docc-render/constants/Language';
 import metadata from 'docc-render/mixins/metadata';
-import { getSetting } from 'docc-render/utils/theme-settings';
 
 import Aside from 'docc-render/components/ContentNode/Aside.vue';
 import BetaLegalText from 'theme/components/DocumentationTopic/BetaLegalText.vue';
@@ -97,7 +94,6 @@ import Relationships from './DocumentationTopic/Relationships.vue';
 import RequirementMetadata from './DocumentationTopic/Description/RequirementMetadata.vue';
 import Availability from './DocumentationTopic/Summary/Availability.vue';
 import SeeAlso from './DocumentationTopic/SeeAlso.vue';
-import Summary from './DocumentationTopic/Summary.vue';
 import Title from './DocumentationTopic/Title.vue';
 import Topics from './DocumentationTopic/Topics.vue';
 
@@ -134,7 +130,6 @@ export default {
     RequirementMetadata,
     Availability,
     SeeAlso,
-    Summary,
     Title,
     Topics,
   },
@@ -290,8 +285,8 @@ export default {
     pageDescription: ({ abstract, extractFirstParagraphText }) => (
       abstract ? extractFirstParagraphText(abstract) : null
     ),
-    shouldShowLanguageSwitcher: ({ objcPath, swiftPath }) => objcPath && swiftPath,
-    hideSummary: () => getSetting(['features', 'docs', 'summary', 'hide'], false),
+    shouldShowLanguageSwitcher:
+      ({ objcPath, swiftPath, isTargetIDE }) => objcPath && swiftPath && isTargetIDE,
     enhanceBackground: ({ symbolKind }) => (symbolKind ? (symbolKind === 'module') : true),
     technologies({ modules = [] }) {
       const technologyList = modules.reduce((list, module) => {

src/components/DocumentationTopic/DocumentationHero.vue

@@ -76,10 +76,6 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default;
   padding-bottom: 40px;
   position: relative;
 
-  @include breakpoint(small) {
-    text-align: center;
-  }
-
   // gradient
   &:before {
     content: '';

src/components/DocumentationTopic/DocumentationNav.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021 Apple Inc. and the Swift project authors
+  Copyright (c) 2022 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
@@ -49,6 +49,18 @@
         :currentTopicTags="currentTopicTags"
         :references="references"
       />
+      <NavMenuItems
+        class="nav-menu-settings"
+        :previousSiblingChildren="breadcrumbCount"
+      >
+        <LanguageToggle
+          v-if="interfaceLanguage && (swiftPath || objcPath)"
+          :interfaceLanguage="interfaceLanguage"
+          :objcPath="objcPath"
+          :swiftPath="swiftPath"
+        />
+        <slot name="menu-items" />
+      </NavMenuItems>
       <slot name="tray-after" v-bind="{ breadcrumbCount }" />
     </template>
     <template slot="after-content">
@@ -59,16 +71,20 @@
 
 <script>
 import NavBase from 'docc-render/components/NavBase.vue';
+import NavMenuItems from 'docc-render/components/NavMenuItems.vue';
 import { BreakpointName } from 'docc-render/utils/breakpoints';
 import SidenavIcon from 'theme/components/Icons/SidenavIcon.vue';
 import Hierarchy from './DocumentationNav/Hierarchy.vue';
+import LanguageToggle from './DocumentationNav/LanguageToggle.vue';
 
 export default {
   name: 'DocumentationNav',
   components: {
     SidenavIcon,
     NavBase,
+    NavMenuItems,
     Hierarchy,
+    LanguageToggle,
   },
   props: {
     title: {
@@ -107,6 +123,18 @@ export default {
       type: Boolean,
       default: true,
     },
+    interfaceLanguage: {
+      type: String,
+      required: false,
+    },
+    objcPath: {
+      type: String,
+      required: false,
+    },
+    swiftPath: {
+      type: String,
+      required: false,
+    },
   },
   computed: {
     BreakpointName: () => BreakpointName,
@@ -164,6 +192,26 @@ $sidenav-icon-size: 19px;
   @include font-styles(documentation-nav);
   // vertically align the items
   padding-top: 0;
+
+  &-settings {
+    @include font-styles(nav-toggles);
+
+    @include breakpoint-only-largenav() {
+      margin-left: $nav-space-between-elements;
+    }
+
+    @include nav-in-breakpoint {
+      padding-top: 0;
+
+      &:not([data-previous-menu-children-count="0"]) {
+        .nav-menu-setting:first-child {
+          border-top: 1px solid dark-color(figure-gray-tertiary);
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
 }
 
 .documentation-nav {