+}
diff --git a/src/components/DocsNavigation/DocsNavigationMobile/productNavigation.module.css b/src/components/DocsNavigation/DocsNavigationMobile/productNavigation.module.css
new file mode 100644
index 00000000000..1f521bec887
--- /dev/null
+++ b/src/components/DocsNavigation/DocsNavigationMobile/productNavigation.module.css
@@ -0,0 +1,143 @@
+.root {
+ display: initial;
+}
+
+.logo {
+ margin-right: var(--space-2x);
+ width: var(--space-5x);
+ height: var(--space-5x);
+}
+
+.icon {
+ width: var(--space-5x);
+ height: var(--space-5x);
+}
+
+.caret {
+ width: var(--space-4x);
+ height: var(--space-4x);
+ border-radius: 50%;
+ position: absolute;
+ right: var(--space-4x);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.caret span {
+ width: var(--space-2x);
+ height: var(--space-2x);
+ border-right: 2px solid var(--gray-600);
+ border-bottom: 2px solid var(--gray-600);
+ transform: rotate(45deg);
+ transition: transform 0.2s ease;
+ margin-bottom: 1px;
+}
+
+.menuContent {
+ position: fixed;
+ top: 0;
+ left: 0;
+ background: var(--white);
+ height: 100vh;
+ height: 100dvh;
+ width: 100vw;
+ width: 100dvw;
+ display: flex;
+ overflow: hidden;
+ z-index: 11;
+}
+
+.hidden {
+ display: none;
+}
+
+.content {
+ width: 200vw;
+ display: flex;
+ transition: transform 0.3s;
+}
+
+.main {
+ transform: translateX(0vw);
+}
+
+.submenu {
+ transform: translateX(-100vw);
+}
+
+.closeButton {
+ position: absolute;
+ top: var(--space-6x);
+ left: var(--space-8x);
+ z-index: 12;
+}
+
+.productContent,
+.subProductContent {
+ overflow: scroll;
+ padding: var(--space-4x) var(--space-6x);
+ list-style: none;
+ width: 100vw;
+ padding-bottom: 56px;
+}
+.subProductContent {
+ display: flex;
+ flex-direction: column;
+}
+
+@keyframes slideFromLeft {
+ from {
+ transform: translateX(-100%);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideToLeft {
+ from {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(-100%);
+ }
+}
+
+.menuContent[data-state="open"] {
+ animation: slideFromLeft 0.3s forwards;
+}
+
+.menuContent[data-state="closed"] {
+ animation: slideToLeft 0.3s forwards;
+}
+
+.trigger {
+ display: flex;
+ align-items: center;
+ padding-right: var(--space-16x);
+ gap: var(--space-2x);
+ isolation: isolate;
+ z-index: 100;
+ position: relative;
+ flex: none;
+ order: 0;
+ flex-grow: 0;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.trigger span {
+ /* todo: This was manually set on request. Should be changed with Design System */
+ color: var(--Page-Foreground-Muted, #6c7585);
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 22px;
+}
+
+@media screen and (min-width: 992px) {
+ .logo,
+ .trigger {
+ display: none;
+ }
+}
diff --git a/src/components/Header/Nav/ProductNavigation/Mobile/subProductContent.module.css b/src/components/DocsNavigation/DocsNavigationMobile/subProductContent.module.css
similarity index 100%
rename from src/components/Header/Nav/ProductNavigation/Mobile/subProductContent.module.css
rename to src/components/DocsNavigation/DocsNavigationMobile/subProductContent.module.css
diff --git a/src/components/DocsNavigation/index.tsx b/src/components/DocsNavigation/index.tsx
new file mode 100644
index 00000000000..39522a7e790
--- /dev/null
+++ b/src/components/DocsNavigation/index.tsx
@@ -0,0 +1,13 @@
+import DocsNavigationDesktop from "./DocsNavigationDesktop/DocsNavigationDesktop"
+import DocsNavigationMobile from "./DocsNavigationMobile/DocsNavigationMobile"
+
+function DocsNavigation({ pathname }: { pathname: string }) {
+ return (
+ <>
+
+
+
+ )
+}
+
+export default DocsNavigation
diff --git a/src/components/DocsSwitcher/DocsPicker.tsx b/src/components/DocsSwitcher/DocsPicker.tsx
new file mode 100644
index 00000000000..f54a712dd05
--- /dev/null
+++ b/src/components/DocsSwitcher/DocsPicker.tsx
@@ -0,0 +1,46 @@
+import { useState } from "react"
+import { isMatchedPath } from "../Header/Nav/isMatchedPath"
+import { getNavigationProps } from "../Header/getNavigationProps"
+import styles from "./docsPicker.module.css"
+import { clsx } from "../Header/Nav/utils"
+
+function DocsPicker({ pathname }: { pathname: string }) {
+ const [productMenuOpen, setProductMenuOpen] = useState(false)
+ const { subProductsNav } = getNavigationProps()
+ const subProductTrigger = subProductsNav?.find(({ href }) => isMatchedPath(pathname, href))
+
+ const label = subProductTrigger?.label || "Resources"
+ const icon = subProductTrigger?.label ? subProductTrigger.icon : undefined
+
+ // MENU
+ return (
+ setProductMenuOpen(true)}
+ onMouseLeave={() => setProductMenuOpen(false)}
+ >
+
{label}
+
+
+
+ {productMenuOpen && (
+
+
+ {subProductsNav
+ .filter((item) => !item.hideFromDropdown)
+ .map((item) => (
+ -
+
+
+ {item.label}
+
+
+ ))}
+
+
+ )}
+
{title}
diff --git a/src/components/HeadCommon.astro b/src/components/HeadCommon.astro
index 6cfe10de0f5..aff2315d557 100644
--- a/src/components/HeadCommon.astro
+++ b/src/components/HeadCommon.astro
@@ -17,15 +17,8 @@ const { title } = Astro.props
-
-
+
+
diff --git a/src/components/HeadSEO.astro b/src/components/HeadSEO.astro
index 7d5e2acf4ae..c7753c3518a 100644
--- a/src/components/HeadSEO.astro
+++ b/src/components/HeadSEO.astro
@@ -48,15 +48,8 @@ if (metadata?.image) {
-
-
+
+