Update navigation frame

Author: handotdev

core-concepts/navigation.mdx

@@ -4,6 +4,12 @@ description: "Structure and customize your documentation's navigation hierarchy"
 icon: "map"
 ---
 
+export const LayoutFrame = ({ children }) => (
+  <div className="flex justify-center p-10 pointer-events-none border border-zinc-100 dark:border-zinc-800 rounded-2xl bg-zinc-100 dark:bg-zinc-900">
+    {children}
+  </div>
+)
+
 ## Introduction
 
 The `navigation` property in your [docs.json](/core-concepts/settings) defines how users will browse through your documentation. Think of it as the blueprint for your documentation's menu structure.
@@ -14,12 +20,10 @@ With proper navigation configuration, you can organize your content into a logic
 
 Pages are the most fundamental navigation component.
 
-<Frame>
-  <div className="flex justify-center p-10 pointer-events-none">
-    <img className="block dark:hidden w-52" src="/images/navigation/pages-light.png" />
-    <img className="hidden dark:block w-52" src="/images/navigation/pages-dark.png" />
-  </div>
-</Frame>
+<LayoutFrame>
+  <img className="block dark:hidden w-52" src="/images/navigation/pages-light.png" />
+  <img className="hidden dark:block w-52" src="/images/navigation/pages-dark.png" />
+</LayoutFrame>
 
 Pages is an array where each entry must be a reference to the path of a [page file](/core-concepts/pages).
 
@@ -42,12 +46,10 @@ Pages is an array where each entry must be a reference to the path of a [page fi
 
 Groups allow you to group your pages. Groups can also be nested within each other.
 
-<Frame>
-  <div className="flex justify-center p-10 pointer-events-none">
-    <img className="block dark:hidden w-52" src="/images/navigation/groups-light.png" />
-    <img className="hidden dark:block w-52" src="/images/navigation/groups-dark.png" />
-  </div>
-</Frame>
+<LayoutFrame>
+  <img className="block dark:hidden w-52" src="/images/navigation/groups-light.png" />
+  <img className="hidden dark:block w-52" src="/images/navigation/groups-dark.png" />
+</LayoutFrame>
 
 ```json
 {
@@ -79,12 +81,10 @@ Groups allow you to group your pages. Groups can also be nested within each othe
 Tabs help distinguish between different topics or sections of your
 documentation.
 
-<Frame>
-  <div className="flex justify-center p-10 pointer-events-none">
-    <img className="block dark:hidden w-52" src="/images/navigation/tabs-light.png" />
-    <img className="hidden dark:block w-52" src="/images/navigation/tabs-dark.png" />
-  </div>
-</Frame>
+<LayoutFrame>
+  <img className="block dark:hidden w-52" src="/images/navigation/tabs-light.png" />
+  <img className="hidden dark:block w-52" src="/images/navigation/tabs-dark.png" />
+</LayoutFrame>
 
 ```json
 "navigation": {
@@ -119,12 +119,10 @@ documentation.
 
 Anchors are another way to section your content. They show up on top of your side navigation.
 
-<Frame>
-  <div className="flex justify-center p-10 pointer-events-none">
+<LayoutFrame>
     <img className="block dark:hidden w-52" src="/images/navigation/anchors-light.png" />
     <img className="hidden dark:block w-52" src="/images/navigation/anchors-dark.png" />
-  </div>
-</Frame>
+</LayoutFrame>
 
 The configuration is very similar to tabs.
 
@@ -165,12 +163,10 @@ While not required, we highly recommend that you set an `icon` field as well.
 
 Dropdowns show up in the same place as anchors, but are consolidated into a single dropdown.
 
-<Frame>
-  <div className="flex justify-center p-10 pointer-events-none">
-    <img className="block dark:hidden w-52" src="/images/navigation/dropdowns-light.png" />
-    <img className="hidden dark:block w-52" src="/images/navigation/dropdowns-dark.png" />
-  </div>
-</Frame>
+<LayoutFrame>
+  <img className="block dark:hidden w-52" src="/images/navigation/dropdowns-light.png" />
+  <img className="hidden dark:block w-52" src="/images/navigation/dropdowns-dark.png" />
+</LayoutFrame>
 
 While not required, we also recommend that you set an icon for each dropdown item.
 
@@ -210,12 +206,10 @@ While not required, we also recommend that you set an icon for each dropdown ite
 
 Versions can be leveraged to partition your navigation into different versions.
 
-<Frame>
-  <div className="flex justify-center p-10 pointer-events-none">
-    <img className="block dark:hidden w-52" src="/images/navigation/versions-light.png" />
-    <img className="hidden dark:block w-52" src="/images/navigation/versions-dark.png" />
-  </div>
-</Frame>
+<LayoutFrame>
+  <img className="block dark:hidden w-52" src="/images/navigation/versions-light.png" />
+  <img className="hidden dark:block w-52" src="/images/navigation/versions-dark.png" />
+</LayoutFrame>
 
 ```json
 {
@@ -250,12 +244,10 @@ Versions can be leveraged to partition your navigation into different versions.
 
 Languages can be leveraged to partition your navigation into different languages.
 
-<Frame>
-  <div className="flex justify-center p-10 pointer-events-none">
-    <img className="block dark:hidden w-52" src="/images/navigation/languages-light.png" />
-    <img className="hidden dark:block w-52" src="/images/navigation/languages-dark.png" />
-  </div>
-</Frame>
+<LayoutFrame>
+  <img className="block dark:hidden w-52" src="/images/navigation/languages-light.png" />
+  <img className="hidden dark:block w-52" src="/images/navigation/languages-dark.png" />
+</LayoutFrame>
 
 We currently support the following languages: