Add Sidebar item - Explore (#5313)

* Add Siderbar item - Explore * Move relevant docs to Explore * reorg explore bar - grouping apps - main index * moved Explore to sidebar top * home page layout --------- Co-authored-by: filippoweb3 <[email protected]>
w3f · Oct 28, 2023 · 1ead8e0 · 1ead8e0
1 parent 21f568f
commit 1ead8e0
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 85 deletions.
diff --git a/polkadot-wiki/docusaurus.config.js b/polkadot-wiki/docusaurus.config.js
@@ -212,6 +212,11 @@ module.exports = {
         src: "img/Polkadot_Logo_Horizontal_Pink-Black.svg",
       },
       items: [
+        {
+          to: "docs/explore-index",
+          label: "Explore",
+          position: "right",
+        },
         {
           to: "docs/learn-index",
           label: "Learn",

diff --git a/polkadot-wiki/sidebars.js b/polkadot-wiki/sidebars.js
@@ -1,5 +1,104 @@
 module.exports = {
   docs: [
+    {
+      type: "category",
+      label: "Explore",
+      description: 'Wallets and Apps in the Polkadot Ecosystem.',
+      link: {
+        type: 'generated-index',
+        title: 'Explore',
+        description: 'Explore Wallets, Apps and Programmes in Polkadot and Kusama ecosystems.',
+        slug: '/explore-index',
+      },
+      items: [
+        {
+          type: "category",
+          label: "Wallets",
+          description: 'Wallets in the Polkadot Ecosystem.',
+          link: {
+            type: 'generated-index',
+            title: 'Wallets',
+            description: 'Explore the different wallets and applications in the Polkadot and Kusama ecosystems.',
+            slug: '/wallets-index',
+          },
+          items: [
+            "general/wallets-and-extensions",
+            "general/multisig-apps",
+            "general/ledger",
+            "general/polkadot-vault",
+            "general/polkadotjs-ui",
+          ],
+        },
+        {
+          type: "category",
+          label: "Apps",
+          description: 'Apps in the Polkadot Ecosystem.',
+          link: {
+            type: 'generated-index',
+            title: 'Apps',
+            description: 'Explore the different applications in the Polkadot and Kusama ecosystems.',
+            slug: '/apps-index',
+          },
+          items: [
+            "general/staking-apps",
+            "general/governance-apps",
+            "general/parachains-apps",
+          ],
+        },
+        "general/polkadotjs",
+        {
+          type: "category",
+          label: "Dashboards",
+          description: 'Dashboards in the Polkadot Ecosystem.',
+          link: {
+            type: 'generated-index',
+            title: 'Dashboards',
+            description: 'Explore the different dashboards in the Polkadot and Kusama ecosystems.',
+            slug: '/dashboards-index',
+          },
+          items: [
+            "general/staking-dashboard",
+          ],
+        },
+        {
+          type: "category",
+          label: "Community & Contributors",
+          description: 'Polkadot Community and Wiki Contributors.',
+          link: {
+            type: 'generated-index',
+            title: 'Community & Contributors',
+            description: 'Learn about how to participate in the Polkadot community and how to contribute to the Polkadot Wiki.',
+            slug: '/community-index',
+          },
+          items: [
+            "general/community",
+            "general/contributing",
+            "general/contributors",
+          ],
+        },
+        {
+          type: "category",
+          label: "Programmes",
+          description: 'Programmes and Initiatives within the Polkadot Ecosystem.',
+          link: {
+            type: 'generated-index',
+            title: 'Programmes',
+            description: 'Learn about different programmes and initiatives within the Polkadot and Kusama ecosystems.',
+            slug: '/programmes-index',
+          },
+          items: [
+            "general/grants",
+            "general/bug-bounty",
+            "general/ambassadors",
+            "general/builders-program",
+            "general/doc-thousand-validators",
+            "general/doc-thousand-contributors",
+            "general/dev-heroes",
+          ],
+        },
+        "general/metadata",
+      ],
+    },
     {
       type: "category",
       label: "Learn",
@@ -53,81 +152,8 @@ module.exports = {
                 "general/how-to-dyor",
               ],
             },
-            {
-              type: "category",
-              label: "Wallets & Apps",
-              description: 'Wallets and Apps in the Polkadot Ecosystem.',
-              link: {
-                type: 'generated-index',
-                title: 'Wallets & Apps',
-                description: 'Explore the different wallets and applications in the Polkadot and Kusama ecosystems.',
-                slug: '/wallets-index',
-              },
-              items: [
-                "general/wallets-and-extensions",
-                "general/staking-apps",
-                "general/governance-apps",
-                "general/multisig-apps",
-                "general/parachains-apps",
-                {
-                  type: "category",
-                  label: "Dashboards",
-                  description: 'Dashboards in the Polkadot Ecosystem.',
-                  link: {
-                    type: 'generated-index',
-                    title: 'Dashboards',
-                    description: 'Explore the different dashboards in the Polkadot and Kusama ecosystems.',
-                    slug: '/dashboards-index',
-                  },
-                  items: [
-                    "general/staking-dashboard",
-                  ],
-                },
-                "general/ledger",
-                "general/polkadot-vault",
-                "general/polkadotjs-ui",
-              ],
-            },
-            "general/polkadotjs",
-            {
-              type: "category",
-              label: "Community & Contributors",
-              description: 'Polkadot Community and Wiki Contributors.',
-              link: {
-                type: 'generated-index',
-                title: 'Community & Contributors',
-                description: 'Learn about how to participate in the Polkadot community and how to contribute to the Polkadot Wiki.',
-                slug: '/community-index',
-              },
-              items: [
-                "general/community",
-                "general/contributing",
-                "general/contributors",
-              ],
-            },
-            {
-              type: "category",
-              label: "Programmes",
-              description: 'Programmes and Initiatives within the Polkadot Ecosystem.',
-              link: {
-                type: 'generated-index',
-                title: 'Programmes',
-                description: 'Learn about different programmes and initiatives within the Polkadot and Kusama ecosystems.',
-                slug: '/programmes-index',
-              },
-              items: [
-                "general/grants",
-                "general/bug-bounty",
-                "general/ambassadors",
-                "general/builders-program",
-                "general/doc-thousand-validators",
-                "general/doc-thousand-contributors",
-                "general/dev-heroes",
-              ],
-            },
             "general/start-building",
             "general/research",
-            "general/metadata",
             "general/faq",
             "general/glossary",
           ],

diff --git a/polkadot-wiki/src/pages/index.js b/polkadot-wiki/src/pages/index.js
@@ -20,17 +20,17 @@ function HomeNav() {
   const NavContainer = ({ children }) => (
     <section className="homeNavContainer">
       <Container className="h-100 px-5">
-        <Row className="h-100 d-flex align-items-center">{children}</Row>
+        <div className="row h-100 d-flex align-items-center justify-content-center">{children}</div>
       </Container>
     </section>
   );
-
+  
   const NavItem = ({ href, aosDelay, children }) => (
-    <Col xs={12} md={12} lg={4} className="homeNavItem rounded-lg">
+    <div className="col-xs-12 col-md-6 col-lg-6 homeNavItem rounded-lg"> {/* Adjusted column classes */}
       <a href={href} className="h-100" data-aos="fade-up" data-aos-delay={aosDelay}>
         <div className="mx-auto">{children}</div>
       </a>
-    </Col>
+    </div>
   );
 
   const NavItemTitle = ({ children }) => (
@@ -41,7 +41,27 @@ function HomeNav() {
 
   return (
     <NavContainer>
-      <NavItem href={useDocUrl("learn-index")} aosDelay="0">
+      <NavItem href={useDocUrl("explore-index")} aosDelay="0">
+        <NavItemContent>
+          <NavItemTitle>
+            <Translate
+              id="homePage.navContainer.explore.title"
+              description="Title of Explore Navigator in Home page"
+            >
+              Explore
+            </Translate>
+          </NavItemTitle>
+          <p className="mx-auto small text-secondary px-4">
+            <Translate
+              id="homePage.navContainer.explore.content"
+              description="Content of Explore Navigator in Home page"
+            >
+              Explore Wallets, Applications and Programmes within the Polkadot Ecosystem.
+            </Translate>
+          </p>
+        </NavItemContent>
+      </NavItem>
+      <NavItem href={useDocUrl("learn-index")} aosDelay="200">
         <NavItemContent>
           <NavItemTitle>
             <Translate
@@ -56,13 +76,12 @@ function HomeNav() {
               id="homePage.navContainer.learn.content"
               description="Content of Learn Navigator in Home page"
             >
-              Polkadot is a sharded protocol that enables blockchain networks to operate together
-              seamlessly.
+              Learn about Polkadot and how it provides Shared Security and Secure Interoperability to its Parachains.
             </Translate>
           </p>
         </NavItemContent>
       </NavItem>
-      <NavItem href={useDocUrl("build-index")} aosDelay="200">
+      <NavItem href={useDocUrl("build-index")} aosDelay="400">
         <NavItemContent>
           <NavItemTitle>
             <Translate
@@ -77,13 +96,13 @@ function HomeNav() {
               id="homePage.navContainer.build.content"
               description="Content of Build Navigator in Home page"
             >
-              Most up-to-date information on the status of the development tools in the Polkadot
-              ecosystem.
+              Most up-to-date Information on the Status of the Development Tools in the Polkadot
+              Ecosystem.
             </Translate>
           </p>
         </NavItemContent>
       </NavItem>
-      <NavItem href={useDocUrl("maintain-index")} aosDelay="400">
+      <NavItem href={useDocUrl("maintain-index")} aosDelay="600">
         <NavItemContent>
           <NavItemTitle>
             <Translate
@@ -98,7 +117,7 @@ function HomeNav() {
               id="homePage.navContainer.maintain.content"
               description="Content of Maintain Navigator in Home page"
             >
-              Information and guides on how to deploy a node and run the network.
+              Information and Guides on how to Deploy a Node and Run the Network.
             </Translate>
           </p>
         </NavItemContent>