Updated mobile menu on Dev portal page (#1363)

* Updated mobile menu on Dev portal page * Small fix * remove unnecessary padding from the top of the mobile menu * rollback paddings fonts and offsets in documentation left menu --------- Co-authored-by: generall <andrey@vasnetsov.com>
2026-09-25 22:18:30 +02:00 · 2025-01-04 21:00:19 +00:00
parent c95f596866
commit 42637b1443
14 changed files with 325 additions and 235 deletions
@@ -10,18 +10,23 @@ menuItems:
  - id: menu-0
    name: Qdrant
    url: /documentation/
+    icon: menu-documentation-white.svg
  - id: menu-1
    name: Cloud
    url: /documentation/cloud-intro/
+    icon: cloud-white.svg
  - id: menu-2
    name: Build
    url: /documentation/build/
+    icon: blog-white.svg
  - id: menu-3
    name: Learn
    url: /articles/
+    icon: rocket-white.svg
  - id: menu-4
    name: API Reference
    url: https://api.qdrant.tech/api-reference
    external: true
+    icon: roadmap-white.svg
 sitemapExclude: true
 ---
@@ -7,7 +7,7 @@
  width: 100%;
  height: 100%;
  z-index: 2;
-  padding-top: pxToRem(52);
+  padding-top: pxToRem(12);
  background-color: $neutral-94;
  display: none;
  gap: $spacer * 3;
@@ -11,7 +11,6 @@
  }

  .main-menu {
-    border-bottom: pxToRem(1) solid $neutral-20;

    &__links {
      margin-right: auto;
@@ -20,10 +19,10 @@

    &__buttons {
      &-input {
-        width: pxToRem(300);
-        height: pxToRem(35);
+        width: 100%;
+        padding: 0 $spacer;
+        height: $spacer * 2.5;
        position: relative;
-        margin-right: $spacer * 1.5;

        svg {
          position: absolute;
@@ -33,12 +32,11 @@
        }

        button {
+          position: relative;
          height: 100%;
          padding-left: $spacer * 2.5;
          color: $neutral-70;
          text-align: left;
-          font-size: pxToRem(14);
-          line-height: pxToRem(18);

          &:after {
            content: '';
@@ -57,13 +55,132 @@
  }

  .menu-mobile {
-    padding-top: pxToRem(12);
+    gap: $spacer * 1.5;
+    background: $neutral-20;
+    padding-top: 0;
+
+    &__header {
+      padding: pxToRem(12) $spacer * 1.25 $spacer * 1.5;
+      border-bottom: pxToRem(1) solid $neutral-40;
+    }
+
+    &__close {
+      width: $spacer * 2.5;
+      height: $spacer * 2.5;
+      padding: $spacer * 0.5;
+      border-radius: $spacer * 0.5;
+      z-index: 1;
+      background: linear-gradient($neutral-30, #141B2E);
+    }
+
+    &__items {
+      padding: 0 $spacer;
+    }
+
+    &__item {
+      border-bottom: none;
+      font-size: $spacer;
+      line-height: $spacer * 1.5;
+
+      &-content {
+        padding: $spacer * 0.5 pxToRem(12);
+        min-height: 0;
+      }
+
+      a {
+        display: flex;
+        align-items: center;
+        gap: pxToRem(12);
+        color: $neutral-94;
+
+        svg {
+          height: $spacer;
+          width: $spacer;
+        }
+
+        &.active {
+          color: $primary-50;
+
+          svg {
+            fill: $primary-50;
+          }
+        }
+      }
+
+      &:nth-of-type(4) {
+        a {
+          &.active {
+            svg {
+              fill: none;
+              stroke: $primary-50;
+            }
+          }
+        }
+      }
+    }
+
+    [data-theme='light'] & {
+      background: $neutral-94;
+
+      &__item {
+        a {
+          color: $neutral-30;
+
+          svg {
+            fill: $neutral-30;
+          }
+
+          &.active {
+            color: $primary-50;
+
+            svg {
+              fill: $primary-50;
+            }
+          }
+        }
+
+        &:nth-of-type(4) {
+          a {
+            svg {
+              fill: none;
+              stroke: $neutral-30;
+            }
+
+            &.active {
+              svg {
+                fill: none;
+                stroke: $primary-50;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .docs-menu {
+    display: block;
  }

  @include media-breakpoint-up(xl) {
    .main-menu {
      height: $spacer * 5;
      padding: pxToRem(22) $spacer * 1.5;
+      border-bottom: pxToRem(1) solid $neutral-20;
+
+      &__buttons {
+        &-input {
+          width: pxToRem(300);
+          height: pxToRem(35);
+          margin-right: $spacer * 1.5;
+          padding: 0;
+
+          button {
+            font-size: pxToRem(14);
+            line-height: pxToRem(18);
+          }
+        }
+      }
    }
  }
 }
@@ -2,43 +2,12 @@
@use 'sass:math';

 .docs-menu {
+  display: none;
  background-color: $neutral-20;
-  border-top: 1px solid $neutral-30;
-  margin: 0 (-$spacer) $spacer * 2;
  scrollbar-width: none;

-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: pxToRem(15) pxToRem(20);
-    cursor: pointer;
-    .docs-menu__button svg {
-      transition: transform 0.2s;
-    }
-
-    &.active {
-      .docs-menu__button svg {
-        transform: rotate(180deg);
-      }
-    }
-
-    h2 {
-      font-size: pxToRem(18);
-      line-height: pxToRem(27);
-      font-weight: 400;
-      color: $neutral-90;
-      margin: 0;
-    }
-  }
-
  &__content {
-    display: none;
-    padding: pxToRem(12) $spacer * 1.5;
-
-    &.active {
-      display: block;
-    }
+    padding: 0 $spacer $spacer * 1.5;
  }

  &__input {
@@ -85,15 +54,15 @@
  &__links {
    &-title {
      margin-bottom: 0;
-      padding: math.div($spacer, 2);
+      padding: pxToRem(12) math.div($spacer, 2) math.div($spacer, 4);
      color: $neutral-98;
      font-weight: bold;
      font-size: $spacer;
      line-height: $spacer * 1.5;

      &:not(:nth-of-type(1)) {
-        margin-top: pxToRem(12);
-        padding-top: $spacer;
+        margin-top: $spacer;
+        padding-top: pxToRem(20);
      }
    }

@@ -101,6 +70,7 @@
      &-heading {
        display: block;
        position: relative;
+
        // hide native details marker
        &::-webkit-details-marker {
          display: none;
@@ -111,8 +81,6 @@
          justify-content: space-between;
          align-items: center;
          color: $neutral-70;
-          font-size: pxToRem(14);
-          line-height: pxToRem(21);
          font-weight: 400;
        }
      }
@@ -123,7 +91,7 @@
        width: pxToRem(10);
        height: pxToRem(10);
        position: absolute;
-        top: pxToRem(10);
+        top: pxToRem(15);
        right: $spacer;
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='11' viewBox='0 0 10 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.832764 3.41669L4.99943 7.58335L9.1661 3.41669' stroke='%238F98B3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        background-size: cover;
@@ -133,7 +101,7 @@
      }

      &.active {
-        .docs-menu__links-group-heading > a {
+        .docs-menu__links-group-heading>a {
          font-weight: 600;
          background-color: $neutral-30;
          color: $neutral-90;
@@ -141,7 +109,7 @@
        }

        summary:after {
-          top: pxToRem(10);
+          top: pxToRem(15);
        }
      }

@@ -152,8 +120,8 @@
      }

      a {
-        padding: math.div($spacer, 4) $spacer * 1.5 math.div($spacer, 4) math.div($spacer, 2);
-        // margin-bottom: math.div($spacer, 4);
+        margin-top: math.div($spacer, 4);
+        padding: math.div($spacer, 2) $spacer * 1.5 math.div($spacer, 2) math.div($spacer, 2);
      }

      &.external-link {
@@ -186,9 +154,7 @@
          justify-content: space-between;
          align-items: center;
          color: $neutral-70;
-          font-size: pxToRem(14);
          font-weight: 400;
-          line-height: pxToRem(21);
        }

        &.active {
@@ -212,6 +178,7 @@
  }

  @include media-breakpoint-up(xl) {
+    display: block;
    height: calc(100vh - 80px);
    width: pxToRem(256);
    flex-shrink: 0;
@@ -220,41 +187,62 @@
    top: $spacer * 5;
    padding: $spacer $spacer $spacer;
    background-color: transparent;
-    border-top: none;
-    margin: 0;
    border-right: pxToRem(1) solid $neutral-20;

-    &__header {
-      display: none;
-    }
-
    &__content {
-      display: block;
      padding: 0;
    }

-    &__input {
-      display: none;
-    }
-
    &__links {
      &-title {
+        padding: math.div($spacer, 2);
+
        &:not(:nth-of-type(1)) {
          border-top: pxToRem(1) solid $neutral-20;
+          margin-top: pxToRem(12);
+          padding-top: $spacer;
        }
      }

-      & > :last-child {
+      &> :last-child {
        padding-bottom: $spacer;
        border-bottom: pxToRem(1) solid $neutral-20;
      }
+
+      &-submenu-item {
+        a {
+          font-size: pxToRem(14);
+          line-height: pxToRem(21);
+        }
+      }
    }

+
    &__links-group {
      &.active {
-        .docs-menu__links-group-heading > a {
+        .docs-menu__links-group-heading>a {
          background-color: $neutral-20;
        }
+
+        summary:after {
+          top: pxToRem(10);
+        }
+      }
+
+      summary:after {
+        top: pxToRem(10);
+      }
+
+      &-heading {
+        a {
+          font-size: pxToRem(14);
+          line-height: pxToRem(21);
+        }
+      }
+
+      a {
+        padding: math.div($spacer, 4) $spacer * 1.5 math.div($spacer, 4) math.div($spacer, 2);
+        margin: 0;
      }
    }
  }
@@ -311,7 +299,7 @@
        }

        &.active {
-          .docs-menu__links-group-heading > a {
+          .docs-menu__links-group-heading>a {
            color: $primary-50;
            background: $neutral-90;
          }
@@ -347,7 +335,7 @@
      }
    }

-    &__links > :last-child,
+    &__links> :last-child,
    &__links-title:not(:nth-of-type(1)) {
      border-color: $neutral-80;
    }
@@ -357,7 +345,7 @@

      &__links-group {
        &.active {
-          .docs-menu__links-group-heading > a {
+          .docs-menu__links-group-heading>a {
            color: $neutral-30;
          }
        }
@@ -375,6 +363,7 @@
        }
      }
    }
+
    &__articles-link {
      &.active {
        background-color: $neutral-90;
@@ -387,4 +376,4 @@
      }
    }
  }
-}
+}
@@ -9,6 +9,7 @@
    @extend .container;
    margin: 0;
    max-width: 100%;
+    padding-top: $spacer * 1.5;
  }
  &__article-wrapper {
    width: 100%;
@@ -1,37 +1,10 @@
 import ThemeSwitch from './theme-switch.js';
-import { XL_BREAKPOINT } from './constants';
 import TableOfContents from './table-of-content';

 const themeSwitch = new ThemeSwitch();

 document.addEventListener('DOMContentLoaded', () => {
  themeSwitch.initSwitcher();
-  const sidebar = document.getElementById('sidebar');
-  const sidebarToggle = document.getElementById('sidebar-toggle');
-  const searchbar = document.getElementsByClassName('docs-menu__input')[0];
-  const docsMenu = document.getElementsByClassName('docs-menu')[0];
-
-  sidebarToggle.addEventListener('click', () => {
-    sidebarToggle.classList.toggle('active');
-    sidebar.classList.toggle('active');
-  });
-
-  const moveSearchButton = function () {
-    const checkIfFirstChildIsSearch = (element) => {
-      return element.children.length > 0 && element.children[0].classList.contains('docs-menu__input');
-    };
-
-    const isMobile = window.innerWidth <= XL_BREAKPOINT;
-    if (isMobile && !checkIfFirstChildIsSearch(docsMenu)) {
-      docsMenu.before(searchbar);
-    } else if (!isMobile && !checkIfFirstChildIsSearch(sidebar)) {
-      sidebar.before(searchbar);
-    }
-  };
-
-  moveSearchButton();
-
-  window.addEventListener('resize', moveSearchButton);

  // if #TableOfContents and .documentation-article exists on the page, initialize TableOfContents class
  if (document.getElementById('TableOfContents') && document.querySelector('.documentation-article')) {
@@ -1,59 +1,97 @@
 <header class="docs-header">
  {{ $partition := partial "get-partition.html" (dict "page" .) }}
-  {{ with (.Site.GetPage "/headless/docs-header") }}
    <div class="main-menu z-5">
-      <a href="{{ .Params.logoLink }}">
-        {{ partial "logo.html" . }}
-      </a>
+      {{ with (.Site.GetPage "/headless/docs-header") }}
+        <a href="{{ .Params.logoLink }}">
+          {{ partial "logo.html" . }}
+        </a>

-      <div class="d-flex d-xl-none justify-content-end align-items-center gap-4">
-        <div class="d-block d-xl-none">
-          {{ partial "theme-switch" . }}
+        <div class="d-flex d-xl-none justify-content-end align-items-center gap-4">
+          <div class="d-block d-xl-none">
+            {{ partial "theme-switch" . }}
+          </div>
+          <button type="button" class="main-menu__trigger">{{ partial "svg" "hamburger-menu-white.svg" }}</button>
        </div>
-        <button type="button" class="main-menu__trigger">{{ partial "svg" "hamburger-menu-white.svg" }}</button>
-      </div>

-      <ul class="main-menu__links">
-        {{ range $index, $element := .Params.menuItems }}
-          <li class="main-menu__item">
-            {{ if .url }}
-              <a
-                class="menu-link {{- if eq (lower .name) $partition }}active{{- end -}}"
-                href="{{ .url }}"
-                {{ if (eq $index 4) }}target="_blank"{{ end }}
-              >
-                {{ .name }}
-              </a>
-            {{ else }}
-              <span>{{ .name }}</span>
-            {{ end }}
+        <ul class="main-menu__links">
+          {{ range $index, $element := .Params.menuItems }}
+            <li class="main-menu__item">
+              {{ if .url }}
+                <a
+                  class="menu-link {{- if eq (lower .name) $partition }}active{{- end -}}"
+                  href="{{ .url }}"
+                  {{ if (eq $index 4) }}target="_blank"{{ end }}
+                >
+                  {{ .name }}
+                </a>
+              {{ else }}
+                <span>{{ .name }}</span>
+              {{ end }}
+
+              {{ if .subMenuItems }}
+                <ul class="main-menu__submenu">
+                  {{ if .url }}
+                    <li class="main-menu__section-link">
+                      <a class="link link_neutral link_sm" href="{{ .url }}">
+                        {{ .name }}
+                      </a>
+                    </li>
+                  {{ end }}
+                  {{ range .subMenuItems }}
+                    <li class="main-menu__submenu-item">
+                      <a
+                        href="{{ .url }}"
+                        {{ if strings.HasPrefix .url "http" }}target="_blank" rel="noopener noreferrer nofollow"{{ end }}
+                      >
+                        <img src="/img/menu/{{ .icon }}" draggable="false" />
+                        <span>{{ .name }}</span>
+                      </a>
+                    </li>
+                  {{ end }}
+                </ul>
+              {{ end }}
+            </li>
+          {{ end }}
+        </ul>
+        <div class="main-menu__buttons">
+          <div class="main-menu__buttons-input">
+            <button
+              class="qdr-search-input-btn q-input input_md input_light-bg"
+              type="button"
+              name="search"
+              data-target="#searchModal"
+            >
+              Search
+            </button>
+          </div>
+          {{ partial "theme-switch" . }}
+          <a data-metric-loc="nav" href="{{ .Params.logIn.url }}" class="menu-link mx-3" target="_blank"
+            >{{ .Params.logIn.text }}</a
+          >
+          <a
+            data-metric-loc="nav"
+            href="{{ .Params.startFree.url }}"
+            class="button button_contained button_sm"
+            target="_blank"
+          >
+            {{ .Params.startFree.text }}
+          </a>
+        </div>
+      {{end}}
+    </div>
+
+    <div class="menu-mobile">
+      {{ with (.Site.GetPage "/headless/docs-header") }}
+        <div class="menu-mobile__header">
+          {{ partial "logo.html" . }}
+          <div class="d-flex d-xl-none justify-content-end align-items-center gap-4">
+            <div class="d-block d-xl-none">
+              {{ partial "theme-switch" . }}
+            </div>
+            <button type="button" class="menu-mobile__close">{{ partial "svg" "close-white.svg" }}</button>
+          </div>
+        </div>

-            {{ if .subMenuItems }}
-              <ul class="main-menu__submenu">
-                {{ if .url }}
-                  <li class="main-menu__section-link">
-                    <a class="link link_neutral link_sm" href="{{ .url }}">
-                      {{ .name }}
-                    </a>
-                  </li>
-                {{ end }}
-                {{ range .subMenuItems }}
-                  <li class="main-menu__submenu-item">
-                    <a
-                      href="{{ .url }}"
-                      {{ if strings.HasPrefix .url "http" }}target="_blank" rel="noopener noreferrer nofollow"{{ end }}
-                    >
-                      <img src="/img/menu/{{ .icon }}" draggable="false" />
-                      <span>{{ .name }}</span>
-                    </a>
-                  </li>
-                {{ end }}
-              </ul>
-            {{ end }}
-          </li>
-        {{ end }}
-      </ul>
-      <div class="main-menu__buttons">
        <div class="main-menu__buttons-input">
          <button
            class="qdr-search-input-btn q-input input_md input_light-bg"
@@ -64,82 +102,25 @@
            Search
          </button>
        </div>
-        {{ partial "theme-switch" . }}
-        <a data-metric-loc="nav" href="{{ .Params.logIn.url }}" class="menu-link mx-3" target="_blank"
-          >{{ .Params.logIn.text }}</a
-        >
-        <a
-          data-metric-loc="nav"
-          href="{{ .Params.startFree.url }}"
-          class="button button_contained button_sm"
-          target="_blank"
-        >
-          {{ .Params.startFree.text }}
-        </a>
-      </div>
-    </div>

-    <div class="menu-mobile">
-      <div class="menu-mobile__header">
-        {{ partial "logo.html" . }}
-        <button type="button" class="menu-mobile__close">{{ partial "svg" "close.svg" }}</button>
-      </div>
-      <ul class="menu-mobile__items">
-        {{ range .Params.menuItems }}
-          <li class="menu-mobile__item" data-path="{{ .id }}">
-            <div class="menu-mobile__item-content">
-              {{ if and (not .subMenuItems) .url }}
-                <a href="{{ .url }}">
+        <ul class="menu-mobile__items">
+          {{ range $index, $element := .Params.menuItems }}
+            <li class="menu-mobile__item" data-path="{{ .id }}">
+              <div class="menu-mobile__item-content">
+                <a
+                  class="{{ if eq (lower .name) $partition }} active{{ end }}"
+                  href="{{ .url }}"
+                  {{ if (eq $index 4) }}target="_blank"{{ end }}
+                >
+                  {{ partial "svg" .icon }}
                  {{ .name }}
                </a>
-              {{ else }}
-                {{ .name }}
-              {{ end }}
+              </div>
+            </li>
+          {{ end }}
+        </ul>
+      {{ end }}

-              {{ if .subMenuItems }}
-                <button type="button" class="menu-mobile__expand">{{ partial "svg" "arrow-sm-down.svg" }}</button>
-              {{ end }}
-            </div>
-            {{ if .subMenuItems }}
-              <ul class="menu-mobile__subitems">
-                {{ if .url }}
-                  <li class="menu-mobile__section-link">
-                    <a class="link link_neutral link_sm" href="{{ .url }}">
-                      {{ .name }}
-                    </a>
-                  </li>
-                {{ end }}
-                {{ range .subMenuItems }}
-                  <a href="{{ .url }}">
-                    <li class="menu-mobile__subitem">
-                      <span style="background-image: url(/img/menu/{{ .icon }})"> </span>
-                      {{ .name }}
-                    </li>
-                  </a>
-                {{ end }}
-              </ul>
-            {{ end }}
-          </li>
-        {{ end }}
-      </ul>
-      <div class="menu-mobile__controls">
-        <a
-          data-metric-loc="mobile_nav"
-          href="{{ .Params.logIn.url }}"
-          class="button button_outlined button_lg menu-mobile__login"
-          target="_blank"
-        >
-          {{ .Params.logIn.text }}
-        </a>
-        <a
-          data-metric-loc="mobile_nav"
-          href="{{ .Params.startFree.url }}"
-          class="button button_contained button_lg"
-          target="_blank"
-        >
-          {{ .Params.startFree.text }}
-        </a>
-      </div>
+      {{ partial "documentation/sidebar-menu" (dict "context" . "partition" $partition) }}
    </div>
-  {{ end }}
 </header>
@@ -1,28 +1,12 @@
 {{ $partition := .partition }}
-{{ $section := .Section }}

 {{ $currentNode := .context }}
 <div class="docs-menu">
-  <div id="sidebar-toggle" class="docs-menu__header">
-    <h2>Docs Menu</h2>
-    <button type="button" class="docs-menu__button">{{ partial "svg" "arrow-sm-down-white.svg" }}</button>
-  </div>
  <div id="sidebar" class="docs-menu__content">
-    <div class="docs-menu__input">
-      <button
-        class="qdr-search-input-btn q-input input_md input_light-bg"
-        type="button"
-        name="search"
-        data-target="#searchModal"
-      >
-        Search
-      </button>
-    </div>

    {{ if eq $currentNode.Section "documentation" }}
      {{ $subject := site.GetPage "documentation" }}

-
      <nav class="docs-menu__links">
        {{ range $subject.Pages }}
          {{ if and (eq .Params.partition $partition) (not .Params.hideInSidebar) }}
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="#E1E5F0" xmlns="http://www.w3.org/2000/svg">
+<g id="Menu/Blog">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M0 1.5C0 1.22386 0.223858 1 0.5 1H5.5C5.77614 1 6 1.22386 6 1.5V6.5C6 6.77614 5.77614 7 5.5 7H0.5C0.223858 7 0 6.77614 0 6.5V1.5ZM1 2V6H5V2H1ZM8 2.5C8 2.22386 8.22386 2 8.5 2H15.5C15.7761 2 16 2.22386 16 2.5C16 2.77614 15.7761 3 15.5 3H8.5C8.22386 3 8 2.77614 8 2.5ZM8.5 6C8.22386 6 8 6.22386 8 6.5C8 6.77614 8.22386 7 8.5 7H15.5C15.7761 7 16 6.77614 16 6.5C16 6.22386 15.7761 6 15.5 6H8.5ZM0 10.5C0 10.2239 0.223858 10 0.5 10H15.5C15.7761 10 16 10.2239 16 10.5C16 10.7761 15.7761 11 15.5 11H0.5C0.223858 11 0 10.7761 0 10.5ZM0.5 14C0.223858 14 0 14.2239 0 14.5C0 14.7761 0.223858 15 0.5 15H15.5C15.7761 15 16 14.7761 16 14.5C16 14.2239 15.7761 14 15.5 14H0.5Z"/>
+</g>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Close">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M19.778 5.63606C20.1685 5.24554 20.1685 4.61237 19.778 4.22185C19.3874 3.83132 18.7543 3.83132 18.3637 4.22185L11.9998 10.5858L5.63586 4.22185C5.24534 3.83132 4.61217 3.83132 4.22165 4.22185C3.83112 4.61237 3.83112 5.24554 4.22165 5.63606L10.5856 12L4.2216 18.364C3.83108 18.7545 3.83108 19.3877 4.2216 19.7782C4.61213 20.1687 5.24529 20.1687 5.63582 19.7782L11.9998 13.4142L18.3638 19.7782C18.7543 20.1687 19.3875 20.1687 19.778 19.7782C20.1685 19.3877 20.1685 18.7545 19.778 18.364L13.414 12L19.778 5.63606Z" fill="#E1E5F0"/>
+</g>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="#E1E5F0" xmlns="http://www.w3.org/2000/svg">
+<g id="Menu/Cloud">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M7.5 2C4.57416 2 2.18128 4.28566 2.00983 7.16851C0.8403 7.57763 0 8.68965 0 10C0 11.6571 1.34286 13 3 13H13C14.6571 13 16 11.6571 16 10C16 8.34286 14.6571 7 13 7L12.9776 7.00009C12.7249 4.19714 10.3686 2 7.5 2ZM3.00107 7.48137L3.00008 7.47308C3.01457 5.0006 5.02412 3 7.5 3C9.97599 3 11.9856 5.00079 11.9999 7.47342L11.9987 7.4836C11.9969 7.50027 11.995 7.52348 11.995 7.551C11.995 7.701 12.0623 7.84308 12.1785 7.93804C12.2946 8.03301 12.4472 8.07082 12.5942 8.04106C12.726 8.01438 12.8617 8 13 8C14.1049 8 15 8.89514 15 10C15 11.1049 14.1049 12 13 12H3C1.89514 12 1 11.1049 1 10C1 9.03225 1.68901 8.22422 2.60364 8.04017C2.83708 7.9932 3.005 7.78812 3.005 7.55C3.005 7.52154 3.00291 7.49773 3.00107 7.48137Z"/>
+</g>
+</svg>
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="#E1E5F0" xmlns="http://www.w3.org/2000/svg">
+<g id="Menu/Documentation">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M4.25 1C3.14908 1 2.12753 1.23681 1.36311 1.64443C0.620129 2.04063 0 2.67297 0 3.5V14.5C0 14.7761 0.223858 15 0.5 15C0.776142 15 1 14.7761 1 14.5C1 14.222 1.21937 13.8544 1.83364 13.5268C2.42647 13.2107 3.27992 13 4.25 13C5.22008 13 6.07353 13.2107 6.66636 13.5268C7.28063 13.8544 7.5 14.222 7.5 14.5C7.5 14.7761 7.72386 15 8 15C8.27614 15 8.5 14.7761 8.5 14.5C8.5 14.222 8.71937 13.8544 9.33364 13.5268C9.92647 13.2107 10.7799 13 11.75 13C12.7201 13 13.5735 13.2107 14.1664 13.5268C14.7806 13.8544 15 14.222 15 14.5C15 14.7761 15.2239 15 15.5 15C15.7761 15 16 14.7761 16 14.5V3.5C16 2.67297 15.3799 2.04063 14.6369 1.64443C13.8725 1.23681 12.8509 1 11.75 1C10.6491 1 9.62753 1.23681 8.86311 1.64443C8.53799 1.8178 8.2364 2.03638 8 2.29671C7.7636 2.03638 7.46201 1.8178 7.13689 1.64443C6.37247 1.23681 5.35092 1 4.25 1ZM1.36311 12.6444C1.23778 12.7113 1.11595 12.7848 1 12.8649V3.5C1 3.22203 1.21937 2.85437 1.83364 2.52682C2.42647 2.21069 3.27992 2 4.25 2C5.22008 2 6.07353 2.21069 6.66636 2.52682C7.28063 2.85437 7.5 3.22203 7.5 3.5L7.5 12.8649C7.38405 12.7848 7.26222 12.7113 7.13689 12.6444C6.37247 12.2368 5.35092 12 4.25 12C3.14908 12 2.12753 12.2368 1.36311 12.6444ZM8.5 12.8649C8.61595 12.7848 8.73778 12.7113 8.86311 12.6444C9.62753 12.2368 10.6491 12 11.75 12C12.8509 12 13.8725 12.2368 14.6369 12.6444C14.7622 12.7113 14.8841 12.7848 15 12.8649V3.5C15 3.22203 14.7806 2.85437 14.1664 2.52682C13.5735 2.21069 12.7201 2 11.75 2C10.7799 2 9.92647 2.21069 9.33364 2.52682C8.71937 2.85437 8.5 3.22203 8.5 3.5V12.8649Z"/>
+</g>
+</svg>
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="#E1E5F0" xmlns="http://www.w3.org/2000/svg">
+<g id="Menu/Roadmap" clip-path="url(#clip0_7182_4311)">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M13.5 1C12.6716 1 12 1.67157 12 2.5C12 3.32843 12.6716 4 13.5 4C14.3284 4 15 3.32843 15 2.5C15 1.67157 14.3284 1 13.5 1ZM11 2.5C11 1.11929 12.1193 0 13.5 0C14.8807 0 16 1.11929 16 2.5C16 3.88071 14.8807 5 13.5 5C12.1193 5 11 3.88071 11 2.5ZM2.5 12C1.67157 12 1 12.6716 1 13.5C1 14.3284 1.67157 15 2.5 15C3.32843 15 4 14.3284 4 13.5C4 12.6716 3.32843 12 2.5 12ZM0 13.5C0 12.1193 1.11929 11 2.5 11C3.88071 11 5 12.1193 5 13.5C5 14.8807 3.88071 16 2.5 16C1.11929 16 0 14.8807 0 13.5ZM3.65901 1.65901C4.08097 1.23705 4.65326 1 5.25 1C5.84674 1 6.41903 1.23705 6.84099 1.65901C7.26295 2.08097 7.5 2.65326 7.5 3.25V12.75C7.5 13.612 7.84241 14.4386 8.4519 15.0481C9.0614 15.6576 9.88805 16 10.75 16C11.612 16 12.4386 15.6576 13.0481 15.0481C13.6576 14.4386 14 13.612 14 12.75V6.5C14 6.22386 13.7761 6 13.5 6C13.2239 6 13 6.22386 13 6.5V12.75C13 13.3467 12.7629 13.919 12.341 14.341C11.919 14.7629 11.3467 15 10.75 15C10.1533 15 9.58097 14.7629 9.15901 14.341C8.73705 13.919 8.5 13.3467 8.5 12.75V3.25C8.5 2.38805 8.15759 1.5614 7.5481 0.951903C6.9386 0.34241 6.11195 0 5.25 0C4.38805 0 3.5614 0.34241 2.9519 0.951903C2.34241 1.5614 2 2.38805 2 3.25V9.5C2 9.77614 2.22386 10 2.5 10C2.77614 10 3 9.77614 3 9.5V3.25C3 2.65326 3.23705 2.08097 3.65901 1.65901Z"/>
+</g>
+<defs>
+<clipPath id="clip0_7182_4311">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#E1E5F0" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M10.084 1.84094L14.143 5.89994" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8.49188 2.72406C7.27144 2.19364 5.89884 2.12931 4.63414 2.54326C3.36944 2.95721 2.30051 3.82068 1.62988 4.97006L3.96988 7.31006" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M13.2657 7.47302C13.8062 8.69691 13.8769 10.077 13.4645 11.3497C13.052 12.6225 12.1853 13.6988 11.0297 14.373L8.67969 12.023" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M6.81217 13.049L2.95117 9.188C2.95117 9.188 6.24917 0.983 15.5002 0.5C14.9772 9.711 6.81217 13.049 6.81217 13.049Z" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M3.59892 12.4008C3.34181 12.1441 2.99331 12 2.62995 12C2.2666 12 1.91809 12.1441 1.66098 12.4008C1.19433 12.8672 1.02967 14.3418 1.00167 14.633C0.997021 14.6793 1.0021 14.726 1.01659 14.7701C1.03108 14.8143 1.05465 14.8549 1.08579 14.8895C1.11693 14.924 1.15495 14.9516 1.19741 14.9705C1.23987 14.9895 1.28583 14.9994 1.33233 14.9995C1.34298 15.0002 1.35367 15.0002 1.36433 14.9995C1.65565 14.9715 3.1316 14.8063 3.59759 14.3405C3.85501 14.0834 3.99975 13.7346 4 13.3709C4.00025 13.0072 3.85599 12.6582 3.59892 12.4008Z" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M9 8C9.55228 8 10 7.55228 10 7C10 6.44772 9.55228 6 9 6C8.44772 6 8 6.44772 8 7C8 7.55228 8.44772 8 9 8Z"/>
+</g>
+</svg>