content/static: add readme outline to mobile nav

Adds top level readme outline headings
to the mobile select dropdown nav.

For golang/go#43325

Change-Id: Ib2664838303e4b4bcbf54967253f10aa036706f3
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/310372
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/content/static/html/helpers/_unit_outline_mobile.tmpl b/content/static/html/helpers/_unit_outline_mobile.tmpl
index 1a414c9..52e526f 100644
--- a/content/static/html/helpers/_unit_outline_mobile.tmpl
+++ b/content/static/html/helpers/_unit_outline_mobile.tmpl
@@ -14,7 +14,9 @@
     </label>
     <select id="DocNavMobile-select" class="DocNavMobile-select">
       <option value="">Outline</option>
-      <option class="js-readmeOption" value="section-readme">README</option>
+      <optgroup label="README">
+        {{range .ReadmeOutline}}<option value="{{.ID}}">{{.Text}}</option>{{end}}
+      </optgroup>
       {{.MobileOutline}}
       <option class="js-sourcefilesOption" value="section-sourcefiles">Source Files</option>
       <option class="js-directoriesOption" value="section-directories">Directories</option>
diff --git a/content/static/js/unit.js b/content/static/js/unit.js
index fc60780..fe0263a 100644
--- a/content/static/js/unit.js
+++ b/content/static/js/unit.js
@@ -3,5 +3,5 @@
  * Copyright 2021 The Go Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style
  * license that can be found in the LICENSE file.
- */import{CopyToClipboardController as p}from"./clipboard.js";import"./toggle-tip.js";import{ExpandableRowsTableController as y}from"./table.js";document.querySelectorAll(".js-expandableTable").forEach(e=>new y(e,document.querySelector(".js-expandAllDirectories"))),document.querySelectorAll(".js-copyToClipboard").forEach(e=>{new p(e)});const t=document.querySelector(".js-readme"),d=document.querySelector(".js-readmeContent"),l=document.querySelector(".js-readmeOutline"),o=document.querySelectorAll(".js-readmeExpand"),s=document.querySelector(".js-readmeCollapse");t&&d&&l&&o.length&&s&&(window.location.hash.includes("readme")&&t.classList.add("UnitReadme--expanded"),o.forEach(e=>e.addEventListener("click",r=>{r.preventDefault(),t.classList.add("UnitReadme--expanded"),t.scrollIntoView()})),s.addEventListener("click",e=>{e.preventDefault(),t.classList.remove("UnitReadme--expanded"),o[1]&&o[1].scrollIntoView({block:"center"})}),d.addEventListener("keyup",()=>{t.classList.add("UnitReadme--expanded")}),d.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),l.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),document.addEventListener("keydown",e=>{(e.ctrlKey||e.metaKey)&&e.key==="f"&&t.classList.add("UnitReadme--expanded")}));const i=document.querySelector(".js-readmeOption");i&&!t&&i.setAttribute("disabled","true");const h=document.querySelector(".js-unitDirectories"),a=document.querySelector(".js-directoriesOption");!h&&a&&a.setAttribute("disabled","true"),document.querySelectorAll(".js-buildContextSelect").forEach(e=>{e.addEventListener("change",r=>{window.location.search=`?GOOS=${r.target.value}`})});const n=document.querySelector(".js-unitHeader");n?.addEventListener("dblclick",e=>{e.target===n.firstElementChild&&n.classList.contains("UnitHeader--sticky")&&(window.getSelection()?.removeAllRanges(),window.scrollTo({top:0}))});const c=document.querySelector(".UnitHeader"),E=c?.querySelector(".UnitHeader-breadcrumbs"),L=c?.querySelector(".UnitHeader-content"),m=()=>{document.documentElement.style.removeProperty("--full-header-height"),document.documentElement.style.setProperty("--full-header-height",`${(c?.getBoundingClientRect().height??0)/16}rem`),document.documentElement.style.setProperty("--banner-height","0rem"),document.documentElement.style.setProperty("--breadcrumbs-height",`${(E?.getBoundingClientRect().height??0)/16}rem`),document.documentElement.style.setProperty("--content-height",`${(L?.getBoundingClientRect().height??0)/16}rem`)};m(),window.addEventListener("resize",function(){m()});const b=new IntersectionObserver(([e])=>{e.intersectionRatio<1?(n?.classList.add("UnitHeader--sticky"),n?.classList.remove("UnitHeader--full")):(n?.classList.remove("UnitHeader--sticky"),n?.classList.add("UnitHeader--full"))},{threshold:1,rootMargin:"40px"}),u=document.querySelector(".js-headerSentinel");u&&b.observe(u);
+ */import{CopyToClipboardController as p}from"./clipboard.js";import"./toggle-tip.js";import{ExpandableRowsTableController as y}from"./table.js";document.querySelectorAll(".js-expandableTable").forEach(e=>new y(e,document.querySelector(".js-expandAllDirectories"))),document.querySelectorAll(".js-copyToClipboard").forEach(e=>{new p(e)});const t=document.querySelector(".js-readme"),o=document.querySelector(".js-readmeContent"),c=document.querySelector(".js-readmeOutline"),d=document.querySelectorAll(".js-readmeExpand"),s=document.querySelector(".js-readmeCollapse"),h=document.querySelector(".DocNavMobile-select");t&&o&&c&&d.length&&s&&(window.location.hash.includes("readme")&&t.classList.add("UnitReadme--expanded"),h?.addEventListener("change",e=>{e.target.value.startsWith("readme-")&&t.classList.add("UnitReadme--expanded")}),d.forEach(e=>e.addEventListener("click",r=>{r.preventDefault(),t.classList.add("UnitReadme--expanded"),t.scrollIntoView()})),s.addEventListener("click",e=>{e.preventDefault(),t.classList.remove("UnitReadme--expanded"),d[1]&&d[1].scrollIntoView({block:"center"})}),o.addEventListener("keyup",()=>{t.classList.add("UnitReadme--expanded")}),o.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),c.addEventListener("click",()=>{t.classList.add("UnitReadme--expanded")}),document.addEventListener("keydown",e=>{(e.ctrlKey||e.metaKey)&&e.key==="f"&&t.classList.add("UnitReadme--expanded")}));const a=document.querySelector(".js-readmeOption");a&&!t&&a.setAttribute("disabled","true");const E=document.querySelector(".js-unitDirectories"),i=document.querySelector(".js-directoriesOption");!E&&i&&i.setAttribute("disabled","true"),document.querySelectorAll(".js-buildContextSelect").forEach(e=>{e.addEventListener("change",r=>{window.location.search=`?GOOS=${r.target.value}`})});const n=document.querySelector(".js-unitHeader");n?.addEventListener("dblclick",e=>{e.target===n.firstElementChild&&n.classList.contains("UnitHeader--sticky")&&(window.getSelection()?.removeAllRanges(),window.scrollTo({top:0}))});const l=document.querySelector(".UnitHeader"),L=l?.querySelector(".UnitHeader-breadcrumbs"),b=l?.querySelector(".UnitHeader-content"),m=()=>{document.documentElement.style.removeProperty("--full-header-height"),document.documentElement.style.setProperty("--full-header-height",`${(l?.getBoundingClientRect().height??0)/16}rem`),document.documentElement.style.setProperty("--banner-height","0rem"),document.documentElement.style.setProperty("--breadcrumbs-height",`${(L?.getBoundingClientRect().height??0)/16}rem`),document.documentElement.style.setProperty("--content-height",`${(b?.getBoundingClientRect().height??0)/16}rem`)};m(),window.addEventListener("resize",function(){m()});const S=new IntersectionObserver(([e])=>{e.intersectionRatio<1?(n?.classList.add("UnitHeader--sticky"),n?.classList.remove("UnitHeader--full")):(n?.classList.remove("UnitHeader--sticky"),n?.classList.add("UnitHeader--full"))},{threshold:1,rootMargin:"40px"}),u=document.querySelector(".js-headerSentinel");u&&S.observe(u);
 //# sourceMappingURL=unit.js.map
diff --git a/content/static/js/unit.js.map b/content/static/js/unit.js.map
index 6c52a6d..4035b6c 100644
--- a/content/static/js/unit.js.map
+++ b/content/static/js/unit.js.map
@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["unit.ts"],
-  "sourcesContent": ["/*!\n * @license\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\nimport { CopyToClipboardController } from './clipboard.js';\nimport './toggle-tip.js';\nimport { ExpandableRowsTableController } from './table.js';\n\ndocument\n  .querySelectorAll<HTMLTableElement>('.js-expandableTable')\n  .forEach(\n    el =>\n      new ExpandableRowsTableController(\n        el,\n        document.querySelector<HTMLButtonElement>('.js-expandAllDirectories')\n      )\n  );\n\n/**\n * Instantiates CopyToClipboardController controller copy buttons\n * on the unit page.\n */\ndocument.querySelectorAll<HTMLButtonElement>('.js-copyToClipboard').forEach(el => {\n  new CopyToClipboardController(el);\n});\n\n/**\n * Event handlers for expanding and collapsing the readme section.\n */\nconst readme = document.querySelector('.js-readme');\nconst readmeContent = document.querySelector('.js-readmeContent');\nconst readmeOutline = document.querySelector('.js-readmeOutline');\nconst readmeExpand = document.querySelectorAll('.js-readmeExpand');\nconst readmeCollapse = document.querySelector('.js-readmeCollapse');\nif (readme && readmeContent && readmeOutline && readmeExpand.length && readmeCollapse) {\n  if (window.location.hash.includes('readme')) {\n    readme.classList.add('UnitReadme--expanded');\n  }\n  readmeExpand.forEach(el =>\n    el.addEventListener('click', e => {\n      e.preventDefault();\n      readme.classList.add('UnitReadme--expanded');\n      readme.scrollIntoView();\n    })\n  );\n  readmeCollapse.addEventListener('click', e => {\n    e.preventDefault();\n    readme.classList.remove('UnitReadme--expanded');\n    if (readmeExpand[1]) {\n      readmeExpand[1].scrollIntoView({ block: 'center' });\n    }\n  });\n  readmeContent.addEventListener('keyup', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  readmeContent.addEventListener('click', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  readmeOutline.addEventListener('click', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  document.addEventListener('keydown', e => {\n    if ((e.ctrlKey || e.metaKey) && e.key === 'f') {\n      readme.classList.add('UnitReadme--expanded');\n    }\n  });\n}\n\n/**\n * Disable unavailable sections in navigation dropdown on mobile.\n */\nconst readmeOption = document.querySelector('.js-readmeOption');\nif (readmeOption && !readme) {\n  readmeOption.setAttribute('disabled', 'true');\n}\nconst unitDirectories = document.querySelector('.js-unitDirectories');\nconst directoriesOption = document.querySelector('.js-directoriesOption');\nif (!unitDirectories && directoriesOption) {\n  directoriesOption.setAttribute('disabled', 'true');\n}\ndocument.querySelectorAll('.js-buildContextSelect').forEach(el => {\n  el.addEventListener('change', e => {\n    window.location.search = `?GOOS=${(e.target as HTMLSelectElement).value}`;\n  });\n});\n\n/**\n * Adds double click event listener to the header that will\n * scroll the page back to the top.\n */\nconst unitHeader = document.querySelector('.js-unitHeader');\nunitHeader?.addEventListener('dblclick', e => {\n  const target = e.target as HTMLElement;\n  if (\n    target === unitHeader.firstElementChild &&\n    unitHeader.classList.contains('UnitHeader--sticky')\n  ) {\n    window.getSelection()?.removeAllRanges();\n    window.scrollTo({ top: 0 });\n  }\n});\n\n/**\n * Calculates dynamic heights values for header elements to support\n * variable size sticky positioned elements in the header so that banners\n * and breadcumbs may overflow to multiple lines.\n */\nconst header = document.querySelector<HTMLElement>('.UnitHeader');\nconst breadcrumbs = header?.querySelector<HTMLElement>('.UnitHeader-breadcrumbs');\nconst content = header?.querySelector<HTMLElement>('.UnitHeader-content');\nconst calcSize = () => {\n  document.documentElement.style.removeProperty('--full-header-height');\n  document.documentElement.style.setProperty(\n    '--full-header-height',\n    `${(header?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n  document.documentElement.style.setProperty('--banner-height', `0rem`);\n  document.documentElement.style.setProperty(\n    '--breadcrumbs-height',\n    `${(breadcrumbs?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n  document.documentElement.style.setProperty(\n    '--content-height',\n    `${(content?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n};\ncalcSize();\nwindow.addEventListener('resize', function () {\n  calcSize();\n});\n\n/**\n * Observer for header that applies classnames to transition\n * header elements into their sticky position and back into the\n * full size position.\n */\nconst observer = new IntersectionObserver(\n  ([e]) => {\n    if (e.intersectionRatio < 1) {\n      unitHeader?.classList.add('UnitHeader--sticky');\n      unitHeader?.classList.remove('UnitHeader--full');\n    } else {\n      unitHeader?.classList.remove('UnitHeader--sticky');\n      unitHeader?.classList.add('UnitHeader--full');\n    }\n  },\n  { threshold: 1.0, rootMargin: '40px' }\n);\n\nconst headerSentinel = document.querySelector('.js-headerSentinel');\nif (headerSentinel) {\n  observer.observe(headerSentinel);\n}\n"],
-  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOA,2DACA,wBACA,2DAEA,SACG,iBAAmC,uBACnC,QACC,GACE,GAAI,GACF,EACA,SAAS,cAAiC,8BAQlD,SAAS,iBAAoC,uBAAuB,QAAQ,GAAM,CAChF,GAAI,GAA0B,KAMhC,KAAM,GAAS,SAAS,cAAc,cAChC,EAAgB,SAAS,cAAc,qBACvC,EAAgB,SAAS,cAAc,qBACvC,EAAe,SAAS,iBAAiB,oBACzC,EAAiB,SAAS,cAAc,sBAC9C,AAAI,GAAU,GAAiB,GAAiB,EAAa,QAAU,GACjE,QAAO,SAAS,KAAK,SAAS,WAChC,EAAO,UAAU,IAAI,wBAEvB,EAAa,QAAQ,GACnB,EAAG,iBAAiB,QAAS,GAAK,CAChC,EAAE,iBACF,EAAO,UAAU,IAAI,wBACrB,EAAO,oBAGX,EAAe,iBAAiB,QAAS,GAAK,CAC5C,EAAE,iBACF,EAAO,UAAU,OAAO,wBACpB,EAAa,IACf,EAAa,GAAG,eAAe,CAAE,MAAO,aAG5C,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,SAAS,iBAAiB,UAAW,GAAK,CACxC,AAAK,GAAE,SAAW,EAAE,UAAY,EAAE,MAAQ,KACxC,EAAO,UAAU,IAAI,2BAQ3B,KAAM,GAAe,SAAS,cAAc,oBAC5C,AAAI,GAAgB,CAAC,GACnB,EAAa,aAAa,WAAY,QAExC,KAAM,GAAkB,SAAS,cAAc,uBACzC,EAAoB,SAAS,cAAc,yBACjD,AAAI,CAAC,GAAmB,GACtB,EAAkB,aAAa,WAAY,QAE7C,SAAS,iBAAiB,0BAA0B,QAAQ,GAAM,CAChE,EAAG,iBAAiB,SAAU,GAAK,CACjC,OAAO,SAAS,OAAS,SAAU,EAAE,OAA6B,YAQtE,KAAM,GAAa,SAAS,cAAc,kBAC1C,GAAY,iBAAiB,WAAY,GAAK,CAE5C,AACE,AAFa,EAAE,SAEJ,EAAW,mBACtB,EAAW,UAAU,SAAS,uBAE9B,QAAO,gBAAgB,kBACvB,OAAO,SAAS,CAAE,IAAK,OAS3B,KAAM,GAAS,SAAS,cAA2B,eAC7C,EAAc,GAAQ,cAA2B,2BACjD,EAAU,GAAQ,cAA2B,uBAC7C,EAAW,IAAM,CACrB,SAAS,gBAAgB,MAAM,eAAe,wBAC9C,SAAS,gBAAgB,MAAM,YAC7B,uBACA,GAAI,IAAQ,wBAAwB,QAAU,GAAK,SAErD,SAAS,gBAAgB,MAAM,YAAY,kBAAmB,QAC9D,SAAS,gBAAgB,MAAM,YAC7B,uBACA,GAAI,IAAa,wBAAwB,QAAU,GAAK,SAE1D,SAAS,gBAAgB,MAAM,YAC7B,mBACA,GAAI,IAAS,wBAAwB,QAAU,GAAK,UAGxD,IACA,OAAO,iBAAiB,SAAU,UAAY,CAC5C,MAQF,KAAM,GAAW,GAAI,sBACnB,CAAC,CAAC,KAAO,CACP,AAAI,EAAE,kBAAoB,EACxB,IAAY,UAAU,IAAI,sBAC1B,GAAY,UAAU,OAAO,qBAE7B,IAAY,UAAU,OAAO,sBAC7B,GAAY,UAAU,IAAI,sBAG9B,CAAE,UAAW,EAAK,WAAY,SAG1B,EAAiB,SAAS,cAAc,sBAC9C,AAAI,GACF,EAAS,QAAQ",
+  "sourcesContent": ["/*!\n * @license\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\nimport { CopyToClipboardController } from './clipboard.js';\nimport './toggle-tip.js';\nimport { ExpandableRowsTableController } from './table.js';\n\ndocument\n  .querySelectorAll<HTMLTableElement>('.js-expandableTable')\n  .forEach(\n    el =>\n      new ExpandableRowsTableController(\n        el,\n        document.querySelector<HTMLButtonElement>('.js-expandAllDirectories')\n      )\n  );\n\n/**\n * Instantiates CopyToClipboardController controller copy buttons\n * on the unit page.\n */\ndocument.querySelectorAll<HTMLButtonElement>('.js-copyToClipboard').forEach(el => {\n  new CopyToClipboardController(el);\n});\n\n/**\n * Event handlers for expanding and collapsing the readme section.\n */\nconst readme = document.querySelector('.js-readme');\nconst readmeContent = document.querySelector('.js-readmeContent');\nconst readmeOutline = document.querySelector('.js-readmeOutline');\nconst readmeExpand = document.querySelectorAll('.js-readmeExpand');\nconst readmeCollapse = document.querySelector('.js-readmeCollapse');\nconst mobileNavSelect = document.querySelector<HTMLSelectElement>('.DocNavMobile-select');\nif (readme && readmeContent && readmeOutline && readmeExpand.length && readmeCollapse) {\n  if (window.location.hash.includes('readme')) {\n    readme.classList.add('UnitReadme--expanded');\n  }\n  mobileNavSelect?.addEventListener('change', e => {\n    if ((e.target as HTMLSelectElement).value.startsWith('readme-')) {\n      readme.classList.add('UnitReadme--expanded');\n    }\n  });\n  readmeExpand.forEach(el =>\n    el.addEventListener('click', e => {\n      e.preventDefault();\n      readme.classList.add('UnitReadme--expanded');\n      readme.scrollIntoView();\n    })\n  );\n  readmeCollapse.addEventListener('click', e => {\n    e.preventDefault();\n    readme.classList.remove('UnitReadme--expanded');\n    if (readmeExpand[1]) {\n      readmeExpand[1].scrollIntoView({ block: 'center' });\n    }\n  });\n  readmeContent.addEventListener('keyup', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  readmeContent.addEventListener('click', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  readmeOutline.addEventListener('click', () => {\n    readme.classList.add('UnitReadme--expanded');\n  });\n  document.addEventListener('keydown', e => {\n    if ((e.ctrlKey || e.metaKey) && e.key === 'f') {\n      readme.classList.add('UnitReadme--expanded');\n    }\n  });\n}\n\n/**\n * Disable unavailable sections in navigation dropdown on mobile.\n */\nconst readmeOption = document.querySelector('.js-readmeOption');\nif (readmeOption && !readme) {\n  readmeOption.setAttribute('disabled', 'true');\n}\nconst unitDirectories = document.querySelector('.js-unitDirectories');\nconst directoriesOption = document.querySelector('.js-directoriesOption');\nif (!unitDirectories && directoriesOption) {\n  directoriesOption.setAttribute('disabled', 'true');\n}\ndocument.querySelectorAll('.js-buildContextSelect').forEach(el => {\n  el.addEventListener('change', e => {\n    window.location.search = `?GOOS=${(e.target as HTMLSelectElement).value}`;\n  });\n});\n\n/**\n * Adds double click event listener to the header that will\n * scroll the page back to the top.\n */\nconst unitHeader = document.querySelector('.js-unitHeader');\nunitHeader?.addEventListener('dblclick', e => {\n  const target = e.target as HTMLElement;\n  if (\n    target === unitHeader.firstElementChild &&\n    unitHeader.classList.contains('UnitHeader--sticky')\n  ) {\n    window.getSelection()?.removeAllRanges();\n    window.scrollTo({ top: 0 });\n  }\n});\n\n/**\n * Calculates dynamic heights values for header elements to support\n * variable size sticky positioned elements in the header so that banners\n * and breadcumbs may overflow to multiple lines.\n */\nconst header = document.querySelector<HTMLElement>('.UnitHeader');\nconst breadcrumbs = header?.querySelector<HTMLElement>('.UnitHeader-breadcrumbs');\nconst content = header?.querySelector<HTMLElement>('.UnitHeader-content');\nconst calcSize = () => {\n  document.documentElement.style.removeProperty('--full-header-height');\n  document.documentElement.style.setProperty(\n    '--full-header-height',\n    `${(header?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n  document.documentElement.style.setProperty('--banner-height', `0rem`);\n  document.documentElement.style.setProperty(\n    '--breadcrumbs-height',\n    `${(breadcrumbs?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n  document.documentElement.style.setProperty(\n    '--content-height',\n    `${(content?.getBoundingClientRect().height ?? 0) / 16}rem`\n  );\n};\ncalcSize();\nwindow.addEventListener('resize', function () {\n  calcSize();\n});\n\n/**\n * Observer for header that applies classnames to transition\n * header elements into their sticky position and back into the\n * full size position.\n */\nconst observer = new IntersectionObserver(\n  ([e]) => {\n    if (e.intersectionRatio < 1) {\n      unitHeader?.classList.add('UnitHeader--sticky');\n      unitHeader?.classList.remove('UnitHeader--full');\n    } else {\n      unitHeader?.classList.remove('UnitHeader--sticky');\n      unitHeader?.classList.add('UnitHeader--full');\n    }\n  },\n  { threshold: 1.0, rootMargin: '40px' }\n);\n\nconst headerSentinel = document.querySelector('.js-headerSentinel');\nif (headerSentinel) {\n  observer.observe(headerSentinel);\n}\n"],
+  "mappings": "AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOA,2DACA,wBACA,2DAEA,SACG,iBAAmC,uBACnC,QACC,GACE,GAAI,GACF,EACA,SAAS,cAAiC,8BAQlD,SAAS,iBAAoC,uBAAuB,QAAQ,GAAM,CAChF,GAAI,GAA0B,KAMhC,KAAM,GAAS,SAAS,cAAc,cAChC,EAAgB,SAAS,cAAc,qBACvC,EAAgB,SAAS,cAAc,qBACvC,EAAe,SAAS,iBAAiB,oBACzC,EAAiB,SAAS,cAAc,sBACxC,EAAkB,SAAS,cAAiC,wBAClE,AAAI,GAAU,GAAiB,GAAiB,EAAa,QAAU,GACjE,QAAO,SAAS,KAAK,SAAS,WAChC,EAAO,UAAU,IAAI,wBAEvB,GAAiB,iBAAiB,SAAU,GAAK,CAC/C,AAAK,EAAE,OAA6B,MAAM,WAAW,YACnD,EAAO,UAAU,IAAI,0BAGzB,EAAa,QAAQ,GACnB,EAAG,iBAAiB,QAAS,GAAK,CAChC,EAAE,iBACF,EAAO,UAAU,IAAI,wBACrB,EAAO,oBAGX,EAAe,iBAAiB,QAAS,GAAK,CAC5C,EAAE,iBACF,EAAO,UAAU,OAAO,wBACpB,EAAa,IACf,EAAa,GAAG,eAAe,CAAE,MAAO,aAG5C,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,EAAc,iBAAiB,QAAS,IAAM,CAC5C,EAAO,UAAU,IAAI,0BAEvB,SAAS,iBAAiB,UAAW,GAAK,CACxC,AAAK,GAAE,SAAW,EAAE,UAAY,EAAE,MAAQ,KACxC,EAAO,UAAU,IAAI,2BAQ3B,KAAM,GAAe,SAAS,cAAc,oBAC5C,AAAI,GAAgB,CAAC,GACnB,EAAa,aAAa,WAAY,QAExC,KAAM,GAAkB,SAAS,cAAc,uBACzC,EAAoB,SAAS,cAAc,yBACjD,AAAI,CAAC,GAAmB,GACtB,EAAkB,aAAa,WAAY,QAE7C,SAAS,iBAAiB,0BAA0B,QAAQ,GAAM,CAChE,EAAG,iBAAiB,SAAU,GAAK,CACjC,OAAO,SAAS,OAAS,SAAU,EAAE,OAA6B,YAQtE,KAAM,GAAa,SAAS,cAAc,kBAC1C,GAAY,iBAAiB,WAAY,GAAK,CAE5C,AACE,AAFa,EAAE,SAEJ,EAAW,mBACtB,EAAW,UAAU,SAAS,uBAE9B,QAAO,gBAAgB,kBACvB,OAAO,SAAS,CAAE,IAAK,OAS3B,KAAM,GAAS,SAAS,cAA2B,eAC7C,EAAc,GAAQ,cAA2B,2BACjD,EAAU,GAAQ,cAA2B,uBAC7C,EAAW,IAAM,CACrB,SAAS,gBAAgB,MAAM,eAAe,wBAC9C,SAAS,gBAAgB,MAAM,YAC7B,uBACA,GAAI,IAAQ,wBAAwB,QAAU,GAAK,SAErD,SAAS,gBAAgB,MAAM,YAAY,kBAAmB,QAC9D,SAAS,gBAAgB,MAAM,YAC7B,uBACA,GAAI,IAAa,wBAAwB,QAAU,GAAK,SAE1D,SAAS,gBAAgB,MAAM,YAC7B,mBACA,GAAI,IAAS,wBAAwB,QAAU,GAAK,UAGxD,IACA,OAAO,iBAAiB,SAAU,UAAY,CAC5C,MAQF,KAAM,GAAW,GAAI,sBACnB,CAAC,CAAC,KAAO,CACP,AAAI,EAAE,kBAAoB,EACxB,IAAY,UAAU,IAAI,sBAC1B,GAAY,UAAU,OAAO,qBAE7B,IAAY,UAAU,OAAO,sBAC7B,GAAY,UAAU,IAAI,sBAG9B,CAAE,UAAW,EAAK,WAAY,SAG1B,EAAiB,SAAS,cAAc,sBAC9C,AAAI,GACF,EAAS,QAAQ",
   "names": []
 }
diff --git a/content/static/js/unit.ts b/content/static/js/unit.ts
index 9e8e5a6..fc292ec 100644
--- a/content/static/js/unit.ts
+++ b/content/static/js/unit.ts
@@ -35,10 +35,16 @@
 const readmeOutline = document.querySelector('.js-readmeOutline');
 const readmeExpand = document.querySelectorAll('.js-readmeExpand');
 const readmeCollapse = document.querySelector('.js-readmeCollapse');
+const mobileNavSelect = document.querySelector<HTMLSelectElement>('.DocNavMobile-select');
 if (readme && readmeContent && readmeOutline && readmeExpand.length && readmeCollapse) {
   if (window.location.hash.includes('readme')) {
     readme.classList.add('UnitReadme--expanded');
   }
+  mobileNavSelect?.addEventListener('change', e => {
+    if ((e.target as HTMLSelectElement).value.startsWith('readme-')) {
+      readme.classList.add('UnitReadme--expanded');
+    }
+  });
   readmeExpand.forEach(el =>
     el.addEventListener('click', e => {
       e.preventDefault();