Prepare top nav for the theme update

Move tutorial layout to the theme

Fix the top nav separator

Fix the search form

Update theme to v18

Author: dshevtsov

Gemfile.lock

@@ -1,8 +1,8 @@
 GIT
   remote: https://github.com/magento-devdocs/devdocs-theme.git
-  revision: f0516a2e640bbaf04472fc0cbb206432441a674f
+  revision: d7b7c5db1a65987873068a78aac045cb581ff0a3
   specs:
-    devdocs (17)
+    devdocs (18)
       jekyll (>= 4.0)
 
 GEM

src/_data/main-nav.yml

@@ -1,3 +1,4 @@
+---
 - label: Cloud
   children:
 
@@ -169,7 +170,6 @@
           url: /mbi/docs/getting-started.html
           versionless: true
 
-
 - label: Testing
   children:
 
@@ -192,6 +192,8 @@
     - label: Web API Functional Testing
       url: /get-started/web-api-functional-testing.html
 
+- separator: true
+
 - label: Functional Areas
   children:
 

src/_includes/layout/navigation.html

@@ -1,7 +1,7 @@
 <!-- Main Navigation -->
 {%- assign sections = site.data.main-nav -%}
 
-<ul class="nav-main spectrum-Tabs spectrum-Tabs--horizontal" role="menubar">
+<ul class="nav-main spectrum-Tabs spectrum-Tabs--sizeM spectrum-Tabs--horizontal" role="menubar">
 
 {%- for section in sections -%}
 {%- assign subsections = section.children -%}
@@ -25,23 +25,23 @@
               {%- endfor-%}
               </ul>
             </div>
-          {%- else if -%}
+          {%- else -%}
             {%- include layout/nav-item.html section=subsection menuClass="spectrum-Menu" itemClass="spectrum-Menu-item" labelClass="spectrum-Menu-itemLabel" -%}
           {%- endif -%}
         {%- endfor -%}
       {%- endcapture -%}
 
       {%- if subchildren -%}
         {{ nav }}
-      {%- else if -%}
+      {%- else -%}
         <ul>{{ nav }}</ul>
       {%- endif -%}
 
       </div>
     {%- endif -%}
 
   </li>
-  {%- else if -%}
+  {%- else if section.separator -%}
   <li class="nav-main-separator"></li>
   {%- endif -%}
 

src/_includes/layout/search-form.html

@@ -5,19 +5,20 @@
 {%- endif -%}
 
 <form class="spectrum-Search spectrum-Textfield search-form"
-  action="{{ site.baseurl }}/guides/v{{ search_version }}/search.html">
+      action="{{ site.baseurl }}/guides/v{{ search_version }}/search.html">
   <input type="search" placeholder="Looking for something specific?" name="query" value=""
     class="spectrum-Textfield-input spectrum-Search-input search-field form-control" autocomplete="off">
-  <svg class="spectrum-Icon spectrum-UIIcon-Magnifier spectrum-Search-icon" focusable="false" aria-hidden="true">
+    <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon spectrum-Search-icon" focusable="false" aria-hidden="true">
     <rect fill="#ff13dc" opacity="0" width="18" height="18" />
     <path class="a"
       d="M16.5865,15.107,12.7,11.2215A6.413,6.413,0,1,0,11.2215,12.7l3.886,3.886a1.05,1.05,0,0,0,1.479-1.479ZM3,7.5A4.5,4.5,0,1,1,7.5,12,4.5,4.5,0,0,1,3,7.5Z" />
   </svg>
-  <button type="reset" class="spectrum-ClearButton spectrum-Search-clearButton">
-    <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
-      <rect fill="#ff13dc" opacity="0" width="18" height="18" />
-      <path class="a"
-        d="M13.2425,3.343,9,7.586,4.7575,3.343a.5.5,0,0,0-.707,0L3.343,4.05a.5.5,0,0,0,0,.707L7.586,9,3.343,13.2425a.5.5,0,0,0,0,.707l.707.7075a.5.5,0,0,0,.707,0L9,10.414l4.2425,4.243a.5.5,0,0,0,.707,0l.7075-.707a.5.5,0,0,0,0-.707L10.414,9l4.243-4.2425a.5.5,0,0,0,0-.707L13.95,3.343a.5.5,0,0,0-.70711-.00039Z" />
-    </svg>
+  <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Search-clearButton">
+    <div class="spectrum-ClearButton-fill">
+      <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
+        <path class="a"
+          d="M13.2425,3.343,9,7.586,4.7575,3.343a.5.5,0,0,0-.707,0L3.343,4.05a.5.5,0,0,0,0,.707L7.586,9,3.343,13.2425a.5.5,0,0,0,0,.707l.707.7075a.5.5,0,0,0,.707,0L9,10.414l4.2425,4.243a.5.5,0,0,0,.707,0l.7075-.707a.5.5,0,0,0,0-.707L10.414,9l4.243-4.2425a.5.5,0,0,0,0-.707L13.95,3.343a.5.5,0,0,0-.70711-.00039Z" />
+      </svg>
+    </div>
   </button>
 </form>