Skip to content

Commit

Permalink
Update to new layout and sidenav (#11630)
Browse files Browse the repository at this point in the history 
Fixes #11263
Fixes #10536
Fixes #8505
Fixes #9000
Contributes to #8030
  • Loading branch information
@parlough
parlough authored Jan 29, 2025
1 parent 88a381e commit dbfeb9a
Show file tree
Hide file tree
Showing 18 changed files with 453 additions and 634 deletions.
201 changes: 92 additions & 109 deletions src/_includes/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
{% assign route = page.url|regex_replace:'/index$|/index\.html$|\.html$|/$' %}

<header class="site-header">
<nav class="navbar navbar-expand-md justify-content-start justify-content-md-between">
<nav class="navbar">
<button
class="navbar-toggler"
id="menu-toggle"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<i class="material-symbols">menu</i>
aria-controls="sidenav"
aria-label="Toggle navigation"
title="Toggle navigation">
<span class="material-symbols" aria-hidden="true">menu</span>
</button>

<a class="navbar-brand" href="/">
Expand All @@ -22,108 +20,93 @@
class="align-middle">
</a>

<div
id="navbarSupportedContent"
class="collapse navbar-collapse flex-grow-0">
<div
class="site-header__sheet-bg"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
</div>
<div class="site-header__sheet">
<ul class="navbar-nav">
<div class="site-sidebar site-sidebar--header d-md-none">
{% render sidenav-level-1.html, url:page.url, nav:sidenav, base_id:"header", active_nav:activeNav %}
<div class="navbar-contents">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="platform-navbar-dropdown"
href="{{site.main-url}}/multi-platform"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Multi-Platform
</a>
<div class="dropdown-menu" aria-labelledby="platform-navbar-dropdown">
<a class="dropdown-item" href="{{site.main-url}}/multi-platform/mobile">Mobile</a>
<a class="dropdown-item" href="{{site.main-url}}/multi-platform/web">Web</a>
<a class="dropdown-item" href="{{site.main-url}}/multi-platform/desktop">Desktop</a>
<a class="dropdown-item" href="{{site.main-url}}/multi-platform/embedded">Embedded</a>
</div>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="platform-navbar-dropdown"
href="{{site.main-url}}/multi-platform"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Multi-Platform
</a>
<div class="dropdown-menu" aria-labelledby="platform-navbar-dropdown">
<a class="dropdown-item" href="{{site.main-url}}/multi-platform/mobile">Mobile</a>
<a class="dropdown-item" href="{{site.main-url}}/multi-platform/web">Web</a>
<a class="dropdown-item" href="{{site.main-url}}/multi-platform/desktop">Desktop</a>
<a class="dropdown-item" href="{{site.main-url}}/multi-platform/embedded">Embedded</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dev-navbar-dropdown"
href="{{site.main-url}}/"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Development
</a>
<div class="dropdown-menu" aria-labelledby="dev-navbar-dropdown">
<a class="dropdown-item" href="{{site.main-url}}/learn">Learn</a>
<a class="dropdown-item" href="https://pub.dev/flutter/favorites" target="_blank">Flutter Favorites</a>
<a class="dropdown-item" href="https://pub.dev/" target="_blank">Packages</a>
<a class="dropdown-item" href="{{site.main-url}}/ai" target="_blank">AI</a>
<a class="dropdown-item" href="{{site.main-url}}/monetization">Monetization</a>
<a class="dropdown-item" href="{{site.main-url}}/games">Games</a>
<a class="dropdown-item" href="{{site.main-url}}/news">News</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="ecosystem-navbar-dropdown"
href="{{site.main-url}}/ecosystem"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Ecosystem
</a>
<div class="dropdown-menu" aria-labelledby="ecosystem-navbar-dropdown">
<a class="dropdown-item" href="{{site.main-url}}/community">Community</a>
<a class="dropdown-item" href="{{site.main-url}}/events">Events</a>
<a class="dropdown-item" href="{{site.main-url}}/culture">Culture</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="{{site.main-url}}/showcase">Showcase</a>
</li>
<li class="nav-item dropdown docs-item">
<a class="nav-link dropdown-toggle{% if route == '/' %} active{% endif %}"
id="docs-navbar-dropdown"
href="/"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Docs
</a>
<div class="dropdown-menu" aria-labelledby="docs-navbar-dropdown">
<a class="dropdown-item {% if route == '/release/whats-new' %} active{% endif %}"
href="/release/whats-new">What's new</a>
<a class="dropdown-item {% if route contains '/get-started/editor' %} active{% endif %}"
href="/get-started/editor">Editor support</a>
<a class="dropdown-item {% if route contains '/tools/hot-reload' %} active{% endif %}"
href="/tools/hot-reload">Hot reload</a>
<a class="dropdown-item {% if route contains '/perf/ui-performance' %} active{% endif %}"
href="/perf/ui-performance">Profiling</a>
<a class="dropdown-item {% if route contains '/get-started/install' %} active{% endif %}"
href="/get-started/install">Install Flutter</a>
<a class="dropdown-item {% if route contains '/tools/devtools' %} active{% endif %}"
href="/tools/devtools">DevTools</a>
<a class="dropdown-item {% if route contains '/cookbook' %} active{% endif %}"
href="/cookbook">Cookbook</a>
<a class="dropdown-item {% if route contains '/codelabs' %} active{% endif %}"
href="/codelabs">Codelabs</a>
</div>
</li>
</ul>
<form action="/search/" class="site-header__search form-inline">
<input
class="site-header__searchfield form-control search-field"
type="search" name="q" id="q" autocomplete="off"
placeholder="Search" aria-label="Search">
</form>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dev-navbar-dropdown"
href="{{site.main-url}}/"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Development
</a>
<div class="dropdown-menu" aria-labelledby="dev-navbar-dropdown">
<a class="dropdown-item" href="{{site.main-url}}/learn">Learn</a>
<a class="dropdown-item" href="https://pub.dev/flutter/favorites" target="_blank">Flutter Favorites</a>
<a class="dropdown-item" href="https://pub.dev/" target="_blank">Packages</a>
<a class="dropdown-item" href="{{site.main-url}}/ai" target="_blank">AI</a>
<a class="dropdown-item" href="{{site.main-url}}/monetization">Monetization</a>
<a class="dropdown-item" href="{{site.main-url}}/games">Games</a>
<a class="dropdown-item" href="{{site.main-url}}/news">News</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="ecosystem-navbar-dropdown"
href="{{site.main-url}}/ecosystem"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Ecosystem
</a>
<div class="dropdown-menu" aria-labelledby="ecosystem-navbar-dropdown">
<a class="dropdown-item" href="{{site.main-url}}/community">Community</a>
<a class="dropdown-item" href="{{site.main-url}}/events">Events</a>
<a class="dropdown-item" href="{{site.main-url}}/culture">Culture</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="{{site.main-url}}/showcase">Showcase</a>
</li>
<li class="nav-item dropdown docs-item">
<a class="nav-link dropdown-toggle{% if route == '/' %} active{% endif %}"
id="docs-navbar-dropdown"
href="/"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Docs
</a>
<div class="dropdown-menu" aria-labelledby="docs-navbar-dropdown">
<a class="dropdown-item {% if route == '/release/whats-new' %} active{% endif %}"
href="/release/whats-new">What's new</a>
<a class="dropdown-item {% if route contains '/get-started/editor' %} active{% endif %}"
href="/get-started/editor">Editor support</a>
<a class="dropdown-item {% if route contains '/tools/hot-reload' %} active{% endif %}"
href="/tools/hot-reload">Hot reload</a>
<a class="dropdown-item {% if route contains '/perf/ui-performance' %} active{% endif %}"
href="/perf/ui-performance">Profiling</a>
<a class="dropdown-item {% if route contains '/get-started/install' %} active{% endif %}"
href="/get-started/install">Install Flutter</a>
<a class="dropdown-item {% if route contains '/tools/devtools' %} active{% endif %}"
href="/tools/devtools">DevTools</a>
<a class="dropdown-item {% if route contains '/cookbook' %} active{% endif %}"
href="/cookbook">Cookbook</a>
<a class="dropdown-item {% if route contains '/codelabs' %} active{% endif %}"
href="/codelabs">Codelabs</a>
</div>
</li>
</ul>
<form action="/search/" class="site-header__search">
<input
class="site-header__searchfield form-control search-field"
type="search" name="q" id="q" autocomplete="off"
placeholder="Search" aria-label="Search">
</form>
<a
class="site-header__cta btn btn-primary"
href="/get-started/install/">Get started
</a>
</div>
<a
class="site-header__cta btn btn-primary"
href="/get-started/install/">Get started
</a>
</nav>
</header>
4 changes: 2 additions & 2 deletions src/_includes/inline-toc.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@
</header>
<ul class="section-nav">
{% for topLevel in tocContents.toc %}
<li class="toc-entry toc-h2">
<li class="toc-entry">
<a href="{{topLevel.id}}">{{topLevel.text}}</a>
{% if topLevel.children and topLevel.children.size > 0 %}
<ul>
{% for child in topLevel.children %}
<li class="toc-entry toc-h3">
<li class="toc-entry">
<a href="{{child.id}}">{{child.text}}</a>
</li>
{% endfor -%}
Expand Down
6 changes: 3 additions & 3 deletions src/_includes/side-toc.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
{% if tocContents.count > 1 -%}
<div id="site-toc--side" class="site-toc fixed-col col-xl-2 order-3" data-fixed-column>
<div id="site-toc--side" class="site-toc">
<header class="site-toc__title">
Contents
</header>
<ul class="section-nav">
{% for topLevel in tocContents.toc %}
<li class="toc-entry nav-item toc-h2">
<li class="toc-entry nav-item">
<a class="nav-link" href="{{topLevel.id}}">{{topLevel.text}}</a>
{% if topLevel.children and topLevel.children.size > 0 %}
<ul class="nav">
{% for child in topLevel.children %}
<li class="toc-entry nav-item toc-h3">
<li class="toc-entry nav-item">
<a class="nav-link" href="{{child.id}}">{{child.text}}</a>
</li>
{% endfor -%}
Expand Down
30 changes: 19 additions & 11 deletions src/_includes/sidenav-level-1.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
{% assign page_url_path = url | regex_replace: '/index$|/index\.html$|\.html$|/$' -%}
{% assign active_entries = page_url_path | active_nav_for_page: active_nav -%}
{% assign pageUrlPath = url | regex_replace: '/index$|/index\.html$|\.html$|/$' -%}
{% assign activeEntries = pageUrlPath | active_nav_for_page: activeNav -%}

<ul class="nav flex-column">
<nav>
<ul>
{%- for entry in nav -%}
{% if entry == 'divider' -%}
<li aria-hidden="true"><div class="sidebar-primary-divider"></div></li>
<li aria-hidden="true"><div class="sidenav-divider"></div></li>
{% elsif entry.header -%}
<li class="nav-header">{{entry.header}}</li>
{% else -%}
{% assign id = base_id | append: '-sidenav-' | append: forloop.index -%}
{% if forloop.index == active_entries[0] -%}
{% assign id = 'sidenav-' | append: forloop.index -%}
{% if forloop.index == activeEntries[0] -%}
{% assign isActive = true -%}
{% assign class = 'active' -%}
{% else -%}
Expand All @@ -26,12 +27,15 @@
{% assign show = '' -%}
{% endif -%}
<li class="nav-item">
<a class="nav-link {{class}} collapsible" data-toggle="collapse" href="#{{id}}" role="button" aria-expanded="{{expanded}}" aria-controls="{{id}}">{{entry.title}}</a>
<ul class="nav flex-column flex-nowrap collapse {{show}}" id="{{id}}">
<button class="nav-link {{class}} collapsible" data-toggle="collapse" data-target="#{{id}}" role="button" aria-expanded="{{expanded}}" aria-controls="{{id}}">
<span>{{entry.title}}</span>
<span class="material-symbols expander" aria-hidden="true">expand_more</span>
</button>
<ul class="nav collapse {{show}}" id="{{id}}">
{% if isActive -%}
{%- render sidenav-level-2.html, parent_id:id, children:entry.children, active_entries:active_entries -%}
{%- render sidenav-level-2.html, parentId:id, children:entry.children, activeEntries:activeEntries -%}
{% else -%}
{%- render sidenav-level-2.html, parent_id:id, children:entry.children -%}
{%- render sidenav-level-2.html, parentId:id, children:entry.children -%}
{% endif -%}
</ul>
</li>
Expand All @@ -44,10 +48,14 @@
<li class="nav-item">
<a class="nav-link {{class}}" href="{{entry.permalink}}"
{%- if isExternal %} target="_blank" rel="noopener" {%- endif -%}>
{{entry.title}}
<div>
<span>{{entry.title}}</span>
{%- if isExternal %}<span class="material-symbols" aria-hidden="true">open_in_new</span>{%- endif -%}
</div>
</a>
</li>
{% endif -%}
{% endif -%}
{%- endfor -%}
</ul>
</nav>
25 changes: 15 additions & 10 deletions src/_includes/sidenav-level-2.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% for entry in children -%}

{% if active_entries and forloop.index == active_entries[1] -%}
{% if activeEntries and forloop.index == activeEntries[1] -%}
{% assign isActive = true -%}
{% assign class = 'nav-link active' -%}
{% else -%}
Expand All @@ -10,7 +10,7 @@


{% if entry == 'divider' -%}
<div class="dropdown-divider"></div>
<div class="sidenav-divider"></div>
{% elsif entry.header -%}
<li class="nav-header">{{entry.header}}</li>
{%- elsif entry.children -%}
Expand All @@ -26,22 +26,24 @@
{% assign show = '' -%}
{% endif -%}

{% assign id = parent_id | append: '-' | append: forloop.index -%}
{% assign id = parentId | append: '-' | append: forloop.index -%}
{% assign href = entry.permalink -%}
{% unless href -%}
{% assign href = '#' | append: id -%}
{% endunless -%}

<li class="nav-item">
<a class="{{class}}"
<button class="{{class}}"
data-toggle="collapse" data-target="#{{id}}"
href="{{href}}" role="button"
aria-expanded="{{expanded}}" aria-controls="{{id}}">{{entry.title}}</a>
<ul class="nav flex-column flex-nowrap collapse {{show}}" id="{{id}}">
role="button" aria-expanded="{{expanded}}" aria-controls="{{id}}">
<span>{{entry.title}}</span>
<span class="material-symbols expander" aria-hidden="true">expand_more</span>
</button>
<ul class="nav collapse {{show}}" id="{{id}}">
{% if isActive -%}
{% render sidenav-level-3.html, parent_id:id, children:entry.children, active_entries:active_entries -%}
{% render sidenav-level-3.html, parentId:id, children:entry.children, activeEntries:activeEntries -%}
{% else -%}
{% render sidenav-level-3.html, parent_id:id, children:entry.children -%}
{% render sidenav-level-3.html, parentId:id, children:entry.children -%}
{% endif -%}
</ul>
</li>
Expand All @@ -55,7 +57,10 @@
<li class="nav-item">
<a class="{{class}}" href="{{entry.permalink}}"
{%- if isExternal %} target="_blank" rel="noopener" {%- endif -%}>
{{entry.title}}
<div>
<span>{{entry.title}}</span>
{%- if isExternal %}<span class="material-symbols" aria-hidden="true">open_in_new</span>{%- endif -%}
</div>
</a>
</li>

Expand Down
Loading

0 comments on commit dbfeb9a

Please sign in to comment.