diff --git a/src/_includes/header.html b/src/_includes/header.html
index 776d91ef9e..d2bb5a482f 100644
--- a/src/_includes/header.html
+++ b/src/_includes/header.html
@@ -5,23 +5,47 @@
Skip to main content
diff --git a/src/_sass/components/_header.scss b/src/_sass/components/_header.scss
index 3595ca3890..c59af88260 100644
--- a/src/_sass/components/_header.scss
+++ b/src/_sass/components/_header.scss
@@ -14,12 +14,12 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
- padding: .5rem 1rem;
+ padding: 0.5rem 0.75rem;
min-height: $site-header-height;
#menu-toggle {
- margin-right: 0.75rem;
+ margin-left: 0.25rem;
@media (min-width: 1024px) {
display: none;
@@ -72,7 +72,7 @@
padding: 0.5rem 1rem !important;
display: none;
- @media (min-width: 768px) {
+ @media (min-width: 1024px) {
display: unset;
}
}
diff --git a/src/_sass/components/_site-switcher.scss b/src/_sass/components/_site-switcher.scss
new file mode 100644
index 0000000000..632def0167
--- /dev/null
+++ b/src/_sass/components/_site-switcher.scss
@@ -0,0 +1,123 @@
+@use '../base/mixins';
+@use '../base/variables' as *;
+
+.dropdown {
+ position: relative;
+ display: inline-flex;
+ justify-content: center;
+}
+
+button.dropdown-button {
+ padding: 0.4rem 0.6rem;
+ border-radius: 0.25rem;
+
+ .material-symbols:last-child {
+ margin-left: 0.4rem;
+ color: rgba(85, 85, 85, 0.6);
+ font-size: 1rem;
+ width: 0.7rem;
+ }
+
+ &:hover {
+ .material-symbols {
+ color: rgba(85, 85, 85, 0.8);
+ }
+ }
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: var(--site-switcher-bg, #ffffff);
+ box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.2);
+ z-index: 1060;
+ border-radius: 0.4rem;
+ width: max-content;
+ top: 2.25rem;
+ transform: scale(0.9);
+
+ &.show {
+ display: block;
+ }
+
+ .dropdown-menu {
+ padding: 0.4rem;
+
+ ul {
+ display: flex;
+ flex-direction: column;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+ li {
+ padding: 0.3rem;
+
+ a {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+
+ text-decoration: none;
+ }
+ }
+ }
+
+ .dropdown-divider {
+ background-color: #e7e8ed;
+ border-radius: 0.5rem;
+ height: 0.125rem;
+ margin: 0.25rem;
+ padding: 0;
+ }
+ }
+}
+
+.site-wordmark {
+ padding: 0.4rem 0.6rem;
+ border-radius: 0.25rem;
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ cursor: pointer;
+
+ font-variant-ligatures: none;
+ font-size: 1.75rem;
+ line-height: 1.25em;
+ letter-spacing: 0.015em;
+ font-family: 'Google Sans', sans-serif;
+ user-select: none;
+
+ > img {
+ width: 28px;
+ margin-right: 0.75rem;
+ }
+
+ &.current-site {
+ background-color: rgba(194, 229, 255, 0.4);
+ }
+
+ &:hover {
+ @include mixins.interaction-style(4%);
+ }
+
+ &:active {
+ @include mixins.interaction-style(6%);
+ }
+
+ span {
+ color: #4a4a4a;
+ }
+
+ span.subtype {
+ padding: 0 0.3rem;
+ font-size: 1.25rem;
+ font-weight: 500;
+ color: $site-color-body;
+ line-height: 1.3;
+ border-radius: 0.25rem;
+ background-color: rgb(194, 229, 255);
+ margin-left: 0.4rem;
+ letter-spacing: normal;
+ }
+}
diff --git a/src/_sass/site.scss b/src/_sass/site.scss
index cbd34cb5a5..9d3ef2f0a1 100644
--- a/src/_sass/site.scss
+++ b/src/_sass/site.scss
@@ -21,6 +21,7 @@
@use 'components/next-prev-nav';
@use 'components/pill';
@use 'components/sidebar';
+@use 'components/site-switcher';
@use 'components/tabs';
@use 'components/toc';
diff --git a/src/content/assets/images/branding/dart/logo.svg b/src/content/assets/images/branding/dart/logo.svg
new file mode 100755
index 0000000000..5c0b2c20c9
--- /dev/null
+++ b/src/content/assets/images/branding/dart/logo.svg
@@ -0,0 +1,26 @@
+
+
diff --git a/src/content/assets/js/main.js b/src/content/assets/js/main.js
index bb7522f602..2c811c375d 100644
--- a/src/content/assets/js/main.js
+++ b/src/content/assets/js/main.js
@@ -253,9 +253,56 @@ function setUpCodeBlockButtons() {
});
}
+function setupSiteSwitcher() {
+ const siteSwitcher = document.getElementById('site-switcher');
+
+ if (!siteSwitcher) {
+ return;
+ }
+
+ const siteSwitcherButton = siteSwitcher.querySelector('.dropdown-button');
+ const siteSwitcherMenu = siteSwitcher.querySelector('#site-switcher-menu');
+ if (!siteSwitcherButton || !siteSwitcherMenu) {
+ return;
+ }
+
+ function _closeMenusAndToggle() {
+ siteSwitcherMenu.classList.remove('show');
+ siteSwitcherButton.ariaExpanded = 'false';
+ }
+
+ siteSwitcherButton.addEventListener('click', (_) => {
+ if (siteSwitcherMenu.classList.contains('show')) {
+ _closeMenusAndToggle();
+ } else {
+ siteSwitcherMenu.classList.add('show');
+ siteSwitcherButton.ariaExpanded = 'true';
+ }
+ });
+
+ document.addEventListener('keydown', (event) => {
+ // If pressing the `esc` key in the menu area, close the menu.
+ if (event.key === 'Escape' && event.target.closest('#site-switcher')) {
+ _closeMenusAndToggle();
+ }
+ });
+
+ siteSwitcher.addEventListener('focusout', (e) => {
+ // If focus leaves the site-switcher, hide the menu.
+ if (e.relatedTarget && !e.relatedTarget.closest('#site-switcher')) {
+ _closeMenusAndToggle();
+ }
+ });
+
+ document.addEventListener('click', (event) => {
+ // If not clicking inside the site switcher, close the menu.
+ if (!event.target.closest('#site-switcher')) {
+ _closeMenusAndToggle();
+ }
+ });
+}
+
document.addEventListener("DOMContentLoaded", function(_) {
- adjustToc();
- setupInlineToc();
scrollSidenavIntoView();
initCookieNotice();
@@ -263,5 +310,9 @@ document.addEventListener("DOMContentLoaded", function(_) {
setUpCodeBlockButtons();
setupSearch();
+ setupSiteSwitcher();
setupTabs();
+
+ adjustToc();
+ setupInlineToc();
});