cavenel · Oct 12, 2026 · Oct 12, 2026
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -22,6 +22,12 @@ const config: Config = {
   tagline: "Spatial Biology Visualization",
   favicon: "img/favicon.ico",
 
+  // Per browser tab, so that a closed announcement bar comes back in a new tab
+  // (also the color mode and the docs version)
+  storage: {
+    type: "sessionStorage",
+  },
+
   // Lato, the SciLifeLab typeface
   stylesheets: [
     "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap",
@@ -139,6 +145,12 @@ const config: Config = {
         src: "img/logo.svg",
       },
       items: [
+        {
+          to: "pathname:///app/",
+          label: "Open app",
+          position: "left",
+          className: "navbar-app",
+        },
         {
           to: "/getting-started",
           label: "Getting started",
@@ -161,9 +173,12 @@ const config: Config = {
           position: "left",
         },
         {
-          type: "docsVersionDropdown",
+          href: "https://github.com/TissUUmaps/TissUUmaps",
           position: "right",
+          className: "navbar-github",
+          "aria-label": "GitHub repository",
         },
+        // Last in the mobile menu; first on the right of the navbar (CSS order)
         {
           type: "custom-partnerLogos",
           position: "right",

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -47,6 +47,7 @@
   --ifm-navbar-height: 4.5rem;
   --ifm-navbar-link-color: var(--scilifelab-teal);
   --tm-band-background: #f2f2f2;
+  --tm-github-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
@@ -99,3 +100,49 @@
   margin-top: 3rem;
   font-size: 2rem;
 }
+
+/* Navbar: GitHub icon, apart from the partner logos */
+.navbar__link.navbar-github {
+  margin-left: 0.5rem;
+  padding-left: 1.5rem;
+  border-left: 1px solid var(--ifm-toc-border-color);
+}
+
+.navbar-github::before {
+  content: "";
+  display: block;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-color: currentColor;
+  mask: var(--tm-github-icon) center / contain no-repeat;
+}
+
+/* The partner logos are hidden there, see PartnerLogosNavbarItem.module.css */
+@media screen and (max-width: 1300px) {
+  .navbar__link.navbar-github {
+    border-left: none;
+  }
+}
+
+/* The mobile menu shows the icon with a label */
+.menu__link.navbar-github {
+  gap: 0.5rem;
+}
+
+.menu__link.navbar-github::after {
+  content: "GitHub";
+}
+
+/* Navbar: app button, next to the site title */
+.navbar__link.navbar-app {
+  margin-right: 1rem;
+  padding: 0.4rem 1.1rem;
+  white-space: nowrap;
+  border-radius: 999px;
+  background: var(--scilifelab-teal);
+  color: #fff;
+}
+
+.navbar__link.navbar-app:hover {
+  background: var(--scilifelab-grape);
+}
diff --git a/src/theme/DocSidebarItems/index.tsx b/src/theme/DocSidebarItems/index.tsx
@@ -0,0 +1,29 @@
+import DocSidebarItems from "@theme-original/DocSidebarItems";
+import type { Props } from "@theme/DocSidebarItems";
+import DocsVersionDropdownNavbarItem from "@theme/NavbarItem/DocsVersionDropdownNavbarItem";
+import type { ReactNode } from "react";
+
+import styles from "./styles.module.css";
+
+/**
+ * Adds the docs version dropdown at the top of the docs sidebar, on desktop
+ * and in the mobile menu
+ */
+export default function DocSidebarItemsWrapper(props: Props): ReactNode {
+  return (
+    <>
+      {props.level === 1 && (
+        <li className={styles.version}>
+          Version
+          <DocsVersionDropdownNavbarItem
+            position="right"
+            items={[]}
+            dropdownItemsBefore={[]}
+            dropdownItemsAfter={[]}
+          />
+        </li>
+      )}
+      <DocSidebarItems {...props} />
+    </>
+  );
+}
diff --git a/src/theme/DocSidebarItems/styles.module.css b/src/theme/DocSidebarItems/styles.module.css
@@ -0,0 +1,15 @@
+.version {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+  padding: 0 0 0.5rem var(--ifm-menu-link-padding-horizontal);
+  border-bottom: 1px solid var(--ifm-toc-border-color);
+  color: var(--ifm-color-content-secondary);
+  font-size: 0.9rem;
+}
+
+/* Infima hides navbar items on mobile, but this one is in the docs menu */
+.version :global(.navbar__item) {
+  display: block;
+}
diff --git a/src/theme/NavbarItem/PartnerLogosNavbarItem.module.css b/src/theme/NavbarItem/PartnerLogosNavbarItem.module.css
@@ -7,9 +7,31 @@
   display: flex;
   align-items: flex-start;
   gap: 2rem;
+}
+
+/* Before the GitHub link, which comes first in the navbar items */
+.desktop {
+  order: -1;
   margin-right: 1rem;
 }
 
+/* At the bottom of the mobile menu, which fills the height of the drawer */
+:global(.menu__list):has(> .mobile) {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+/* Scaled down to fit the menu width of a phone on one row */
+.mobile {
+  zoom: 0.85;
+  flex-wrap: wrap;
+  gap: 1rem 1.5rem;
+  margin-top: auto;
+  padding: 1rem var(--ifm-menu-link-padding-horizontal);
+  border-top: 1px solid var(--ifm-toc-border-color);
+}
+
 .partners a {
   display: flex;
 }
@@ -31,8 +53,8 @@
   margin-top: 0.7rem;
 }
 
-@media screen and (max-width: 1200px) {
-  .partners {
+@media screen and (max-width: 1300px) {
+  .desktop {
     display: none;
   }
 }
diff --git a/src/theme/NavbarItem/PartnerLogosNavbarItem.tsx b/src/theme/NavbarItem/PartnerLogosNavbarItem.tsx
@@ -1,5 +1,6 @@
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import ThemedImage from "@theme/ThemedImage";
+import clsx from "clsx";
 import type { ReactNode } from "react";
 
 import styles from "./PartnerLogosNavbarItem.module.css";
@@ -48,22 +49,20 @@ function PartnerLogo({
 }
 
 /**
- * The partner logos on the right of the navbar (navbar item type
- * `custom-partnerLogos`, see ComponentTypes.tsx); not in the mobile menu
+ * The partner logos on the right of the navbar, and at the bottom of the
+ * mobile menu (navbar item type `custom-partnerLogos`, see ComponentTypes.tsx)
  */
 export default function PartnerLogosNavbarItem({
   mobile,
 }: {
   mobile?: boolean;
 }): ReactNode {
-  if (mobile) {
-    return null;
-  }
-  return (
-    <div className={styles.partners}>
-      {partners.map((partner) => (
-        <PartnerLogo key={partner.name} {...partner} />
-      ))}
-    </div>
+  const logos = partners.map((partner) => (
+    <PartnerLogo key={partner.name} {...partner} />
+  ));
+  return mobile ? (
+    <li className={clsx(styles.partners, styles.mobile)}>{logos}</li>
+  ) : (
+    <div className={clsx(styles.partners, styles.desktop)}>{logos}</div>
   );
 }