feat: move modern template icons location to menu bar (#8613)

templates/modern/layout/_master.tmpl

@@ -47,14 +47,18 @@
             <img id="logo" class="svg" src="{{_rel}}{{{_appLogoPath}}}{{^_appLogoPath}}logo.svg{{/_appLogoPath}}" alt="{{_appName}}" >
             {{_appName}}
           </a>
-          <button class="btn btn-lg d-md-none border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+          <button class="btn btn-lg d-md-none border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navpanel" aria-controls="navpanel" aria-expanded="false" aria-label="Toggle navigation">
             <i class="bi bi-three-dots"></i>
           </button>
-          <div class="collapse navbar-collapse" id="navbar">
-            <form class="d-flex ms-auto" role="search" id="search">
-              <i class="bi bi-search"></i>
-              <input class="form-control" id="search-query" type="search" disabled placeholder="{{__global.search}}" autocomplete="off" aria-label="Search">
-            </form>
+          <div class="collapse navbar-collapse" id="navpanel">
+            <div id="navbar">
+              {{#_enableSearch}}
+              <form class="search" role="search" id="search">
+                <i class="bi bi-search"></i>
+                <input class="form-control" id="search-query" type="search" disabled placeholder="{{__global.search}}" autocomplete="off" aria-label="Search">
+              </form>
+              {{/_enableSearch}}
+            </div>
           </div>
         </div>
       </nav>

templates/modern/src/docfx.ts

@@ -6,7 +6,8 @@ import { highlight } from './highlight'
 import { renderMarkdown } from './markdown'
 import { enableSearch } from './search'
 import { renderToc } from './toc'
-import { renderBreadcrumb, renderFooter, renderInThisArticle, renderNavbar } from './nav'
+import { initTheme } from './theme'
+import { renderBreadcrumb, renderInThisArticle, renderNavbar } from './nav'
 
 import 'bootstrap-icons/font/bootstrap-icons.scss'
 import './docfx.scss'
@@ -24,10 +25,11 @@ declare global {
 
 window.docfx = {}
 
+initTheme()
+
 document.addEventListener('DOMContentLoaded', function() {
   enableSearch()
   renderMarkdown()
-  renderFooter()
   highlight()
 
   Promise.all([renderNavbar(), renderToc()])

templates/modern/src/layout.scss

@@ -25,14 +25,14 @@ $main-padding-bottom: 4rem;
 }
 
 html {
-  width: 100vw;
+  width: calc(100vw - var(--scrollbar-width));
   min-height: 100vh;
   overflow-x: hidden;
 }
 
 body,
 body[data-layout="landing"] {
-  width: 100vw;
+  width: calc(100vw - var(--scrollbar-width));
   min-height: 100vh;
   display: flex;
   flex-direction: column;

templates/modern/src/nav.scss

@@ -54,17 +54,54 @@
     flex-wrap: nowrap;
   }
 
-  form {
-    align-items: center;
+  #navbar {
+    display: flex;
+    flex: 1;
 
-    >i.bi {
+    form {
+      display: flex;
       position: relative;
-      left: 1.8rem;
-      opacity: .5;
+      align-items: center;
+
+      >i.bi {
+        position: absolute;
+        left: .8rem;
+        opacity: .5;
+      }
+
+      >input {
+        padding-left: 2.5rem;
+      }
+
+      &.search {
+        order: 50;
+      }
+
+      &.icons {
+        margin-left: auto;
+      }
     }
+  }
+
+  @include media-breakpoint-down(md) {
+    #navbar {
+      flex-direction: column;
+      align-items: flex-start;
 
-    >input {
-      padding-left: 2.5rem;
+      form {
+        margin: 1rem 0 0;
+
+        &.search {
+          align-self: stretch;
+          order: 30;
+        }
+
+        &.icons {
+          align-self: center;
+          order: 40;
+          margin: 1rem 0;
+        }
+      }
     }
   }
 }

templates/modern/src/nav.ts

@@ -29,29 +29,30 @@ export async function renderNavbar(): Promise<NavItem[]> {
 
   const activeItem = findActiveItem(navItems)
   const navbar = document.getElementById('navbar')
-  if (navbar) {
-    const menu = html`
-      <ul class='navbar-nav'>${
-        navItems.map(item => {
-          const current = (item === activeItem ? 'page' : false)
-          const active = (item === activeItem ? 'active' : null)
-          return html`
-            <li class='nav-item'><a class='nav-link ${active}' aria-current=${current} href=${item.href}>${breakWordLit(item.name)}</a></li>`
-        })
-      }</ul>`
-
-    render(menu, navbar, { renderBefore: navbar.firstChild })
+  if (!navbar) {
+    return
   }
 
-  return activeItem ? [activeItem] : []
-}
+  const menu = html`
+    <ul class='navbar-nav'>${
+      navItems.map(item => {
+        const current = (item === activeItem ? 'page' : false)
+        const active = (item === activeItem ? 'active' : null)
+        return html`
+          <li class='nav-item'><a class='nav-link ${active}' aria-current=${current} href=${item.href}>${breakWordLit(item.name)}</a></li>`
+      })
+    }</ul>`
+
+  const icons = html`<form class="icons">${githubLink()} ${themePicker(renderCore)}</form>`
 
-export function renderFooter() {
-  const footer = document.querySelector('footer>div') as HTMLElement
-  if (footer) {
-    render(html`${githubLink()} ${themePicker(renderFooter)}`, footer)
+  function renderCore() {
+    render(html`${menu} ${icons}`, navbar)
   }
 
+  renderCore()
+
+  return activeItem ? [activeItem] : []
+
   function githubLink() {
     const docurl = meta('docfx:docurl')
     const github = parseGitHubRepo(docurl)

templates/modern/src/theme.ts

@@ -5,8 +5,6 @@ import { html } from 'lit-html'
 
 type Theme = 'light' | 'dark' | 'auto'
 
-setTheme(localStorage.getItem('theme') as Theme || 'auto')
-
 function setTheme(theme: Theme) {
   localStorage.setItem('theme', theme)
   if (theme === 'auto') {
@@ -16,14 +14,16 @@ function setTheme(theme: Theme) {
   }
 }
 
+export function initTheme() {
+  setTheme(localStorage.getItem('theme') as Theme || 'auto')
+}
+
 export function getTheme(): 'light' | 'dark' {
   return document.documentElement.getAttribute('data-bs-theme') as 'light' | 'dark'
 }
 
 export function themePicker(refresh: () => void) {
   const theme = localStorage.getItem('theme') as Theme || 'auto'
-  setTheme(theme)
-
   const icon = theme === 'light' ? 'sun' : theme === 'dark' ? 'moon' : 'circle-half'
 
   return html`