fix(aio): use a special version of the TopBar if the screen is narrow

If there is a `TopBarNarrow` nav view then use this when the screen is narrow.
Otherwise just use the normal `TopBar`.

This commit also creates such a narrow topbar view where the "Docs" item is
in a different position

Closes #16940

aio/content/navigation.json

@@ -18,6 +18,25 @@
     }
   ],
 
+  "TopBarNarrow": [
+    {
+      "url": "features",
+      "title": "Features"
+    },
+    {
+      "url": "resources",
+      "title": "Resources"
+    },
+    {
+      "url": "events",
+      "title": "Events"
+    },
+    {
+      "url": "docs",
+      "title": "Docs:"
+    }
+  ],
+
   "SideNav": [
     {
       "url": "docs",