Merge pull request #9650 from circleci/move-component-switcher

rosieyohannan · web-flow · commit 4c4edccc910c · 2025-10-06T22:36:26.000+01:00
DOCSS-1939 Move component switcher
diff --git a/ui/src/layouts/home.hbs b/ui/src/layouts/home.hbs
@@ -6,6 +6,7 @@
   <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}} tracking-normal leading-[1.6] text-[16px]">
 {{> header}}
 {{> navigation class="w-full lg:hidden flex-initial"}}
+{{> mobile-component-dropdown}}
 {{> landing}}
   </body>
 </html>
diff --git a/ui/src/partials/article-toolbar.hbs b/ui/src/partials/article-toolbar.hbs
@@ -1,3 +1,3 @@
-<div role="navigation" aria-label="Article Toolbar" class="flex flex-col max-w-[800px] md:items-center mx-4 md:ml-[3.5rem] lg:ml-12 mt-8 md:mt-12 md:flex-row text-sm font-light" >
+<div role="navigation" aria-label="Article Toolbar" class="flex flex-col max-w-[800px] md:items-center mx-4 md:ml-[3.5rem] lg:ml-12 mt-6 md:mt-12 md:flex-row text-sm font-light" >
   {{> breadcrumbs}}
 </div>
diff --git a/ui/src/partials/body.hbs b/ui/src/partials/body.hbs
@@ -1,6 +1,7 @@
 <div class="flex h-full w-full">
 {{> navigation class= "w-full lg:w-2/6 flex-initial lg:max-w-[420px] lg:min-w-[360px]"}}
   <div class="flex flex-col w-full xl:items-center">
+    {{> mobile-component-dropdown}}
     {{> main}}
     {{> footer class="px-12"}}
   </div>
diff --git a/ui/src/partials/dropdown-menu.hbs b/ui/src/partials/dropdown-menu.hbs
@@ -1,6 +1,6 @@
 <ul
     data-dropdown-menu
-    class="w-full absolute top-10 py-2 left-0 rounded-xl shadow-default bg-white max-h-60 overflow-y-scroll z-10 hidden"
+    class="w-full absolute top-10 py-2 left-0 rounded-xl shadow-default bg-white max-h-60 overflow-y-scroll z-50 hidden"
     role="listbox"
     tabindex="-1"
   >
diff --git a/ui/src/partials/mobile-component-dropdown.hbs b/ui/src/partials/mobile-component-dropdown.hbs
@@ -0,0 +1,4 @@
+<!-- Component Dropdown for Mobile -->
+<div class="md:hidden flex justify-center px-4 mt-6 mb-4">
+  {{> dropdown options=(components-to-nav-list) class="w-full max-w-[320px]" }}
+</div>
diff --git a/ui/src/partials/navigation.hbs b/ui/src/partials/navigation.hbs
@@ -7,7 +7,6 @@
     </div>
     {{> search-bar class="md:hidden mb-12" }}
     {{> search-results class="hidden"}}
-    {{> dropdown options=(components-to-nav-list) class="w-full md:hidden m-auto mt-8 mb-10" }}
     {{> component-explorer-nav class="hidden" options=(components-to-nav-list)}}
     <div class="flex flex-col space-between">
       {{> left-side-nav}}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<ul`
`2`	`2`	`data-dropdown-menu`
`3`		`- class="w-full absolute top-10 py-2 left-0 rounded-xl shadow-default bg-white max-h-60 overflow-y-scroll z-10 hidden"`
	`3`	`+ class="w-full absolute top-10 py-2 left-0 rounded-xl shadow-default bg-white max-h-60 overflow-y-scroll z-50 hidden"`
`4`	`4`	`role="listbox"`
`5`	`5`	`tabindex="-1"`
`6`	`6`	`>`