Update Navigation for Blog site

@theme/components/Footer/BlogFooter.tsx

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { useTranslate } from '@portal/hooks';
+import { useLocation } from 'react-router-dom'; 
+
+export function BlogFooter(props) {
+    const themeConfig = useThemeConfig();
+    const { pathname } = useLocation();
+    const { translate } = useTranslate();
+
+    // Provide different footer links for the Blog site.
+    if (pathname.includes("blog")) {
+      themeConfig.footer.items = [
+        {
+          label: translate("Learn"),
+          type: "group",
+          items: [
+            {
+              type: "link",
+              fsPath: "about/index.page.tsx",
+              label: translate("Overview"),
+              link: "/about/",
+            },
+            {
+              type: "link",
+              fsPath: "about/uses.page.tsx",
+              label: translate("Uses"),
+              link: "/about/uses",
+            },
+            {
+              type: "link",
+              fsPath: "about/history.page.tsx",
+              label: translate("History"),
+              link: "/about/history",
+            },
+            {
+              type: "link",
+              fsPath: "about/impact.page.tsx",
+              label: translate("Impact"),
+              link: "/about/impact",
+            },
+            {
+              type: "link",
+              fsPath: "about/impact.page.tsx",
+              label: translate("Carbon Calculator"),
+              link: "/about/impact",
+            },
+          ],
+        },
+        {
+          label: translate("Explore"),
+          type: "group",
+          items: [
+            {
+              type: "link",
+              fsPath: "/docs/introduction/crypto-wallets.md",
+              label: translate("Wallets"),
+              link: "/docs/introduction/crypto-wallets",
+            },
+            {
+              type: "link",
+              fsPath: "about/xrp.page.tsx",
+              label: translate("Exchanges"),
+              link: "/about/xrp",
+            },
+            {
+              type: "link",
+              fsPath: "about/uses.page.tsx",
+              label: translate("Businesses"),
+              link: "/about/uses",
+            },
+            {
+              type: "link",
+              fsPath: "",
+              label: translate("Ledger Explorer"),
+              link: "https://livenet.xrpl.org/",
+            },
+          ],
+        },
+        {
+          label: translate("Build"),
+          type: "group",
+          items: [
+            {
+              type: "link",
+              fsPath: "/docs/tutorials/index.md",
+              label: translate("Get Started"),
+              link: "/docs/tutorials",
+            },
+            {
+              type: "link",
+              fsPath: "/docs/index.page.tsx",
+              label: translate("Docs"),
+              link: "/docs/",
+            },
+            {
+              type: "link",
+              fsPath: "/resources/dev-tools/index.page.tsx",
+              label: translate("Dev Tools"),
+              link: "/resources/dev-tools/",
+            },
+            {
+              type: "link",
+              fsPath: "/blog/index.page.tsx",
+              label: translate("Dev Blog"),
+              link: "/blog/",
+            },
+          ],
+        },
+        {
+          label: translate("Contribute"),
+          type: "group",
+          items: [
+            {
+              type: "link",
+              fsPath: "/resources/contribute-code/index.md",
+              label: translate("How to Contribute"),
+              link: "/resources/contribute-code",
+            },
+            {
+              type: "link",
+              fsPath: "",
+              label: translate("XRPL on Github"),
+              link: "https://github.com/XRPLF/xrpl-dev-portal",
+              external: true,
+            },
+          ],
+        },
+      ];
+    }
+
+    // NOTE: We don't render anything because we only want to change the footer data, 
+    // but the design should remain the same.
+    return null;
+}

@theme/components/Navbar/Navbar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { LanguagePicker } from '@theme/i18n/LanguagePicker';
-import { useI18n } from '@portal/hooks';
+import { useI18n, useTranslate } from '@portal/hooks';
 
 import { slugify } from '../../helpers';
 
@@ -10,6 +10,8 @@ import { Link } from '@portal/Link';
 import { ColorModeSwitcher } from '@theme/components/ColorModeSwitcher/ColorModeSwitcher';
 import { Search } from '@theme/components/Search/Search';
 
+import { useLocation } from 'react-router-dom'; 
+
 // @ts-ignore
 // import navbar from '../../../top-nav.yaml';
 
@@ -44,6 +46,31 @@ export function Navbar(props) {
     }
   });
 
+ const { pathname } = useLocation();
+ const blogNavs = getBlogNavigationConfig();
+
+ const blogNavItems = [];
+ for (const blogNav of blogNavs) {
+   if (blogNav.type === "group") {
+     blogNavItems.push(
+       <NavDropdown
+         key={blogNav.index}
+         label={blogNav.label}
+         items={blogNav.items}
+         pathPrefix={pathPrefix}
+       />
+     );
+   } else {
+     blogNavItems.push(
+       <NavItem key={blogNav.index}>
+         <Link to={blogNav.link} className="nav-link">
+           {blogNav.label}
+         </Link>
+       </NavItem>
+     );
+   }
+ }
+
   React.useEffect(() => {
     // Turns out jQuery is necessary for firing events on Bootstrap v4
     // dropdowns. These events set classes so that the search bar and other
@@ -78,36 +105,73 @@ export function Navbar(props) {
   };
   },[]);
 
-  return (
-    <>
-      {/* <AlertBanner
+  // Render a different top nav for the Blog site.
+  if (pathname.includes("blog")) {
+    return (
+      <>
+        {/* <AlertBanner
         show={alertBanner.show}
         message={alertBanner.message}
         button={alertBanner.button}
         link={alertBanner.link}
       /> */}
-      <NavWrapper>
-        <LogoBlock to={href} img={logo} alt={altText} />
-        <NavControls>
-          <MobileMenuIcon />
-        </NavControls>
-        <TopNavCollapsible>
-          <NavItems>
-            {navItems}
-            <div id="topnav-search" className="nav-item search">
-              <Search className="topnav-search" />
-            </div>
-            <div id="topnav-language" className="nav-item">
-              <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
-            </div>
-            <div id="topnav-theme" className="nav-item">
-              <StyledColorModeSwitcher />
-            </div>
-          </NavItems>
-        </TopNavCollapsible>
-      </NavWrapper>
-    </>
-  );
+        <NavWrapper>
+          <LogoBlock to={href} img={logo} alt={altText} />
+          <NavControls>
+            <MobileMenuIcon />
+          </NavControls>
+          <TopNavCollapsible>
+            <NavItems>
+              {blogNavItems}
+              <div id="topnav-search" className="nav-item search">
+                <Search className="topnav-search" />
+              </div>
+              <div id="topnav-button" className="nav-item">
+                <GetStartedButton />
+              </div>
+              <div id="topnav-language" className="nav-item">
+                <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
+              </div>
+              <div id="topnav-theme" className="nav-item">
+                <StyledColorModeSwitcher />
+              </div>
+            </NavItems>
+          </TopNavCollapsible>
+        </NavWrapper>
+      </>
+    );
+  } else {
+    return (
+      <>
+        {/* <AlertBanner
+        show={alertBanner.show}
+        message={alertBanner.message}
+        button={alertBanner.button}
+        link={alertBanner.link}
+      /> */}
+        <NavWrapper>
+          <LogoBlock to={href} img={logo} alt={altText} />
+          <NavControls>
+            <MobileMenuIcon />
+          </NavControls>
+          <TopNavCollapsible>
+            <NavItems>
+              {navItems}
+              <div id="topnav-search" className="nav-item search">
+                <Search className="topnav-search" />
+              </div>
+              <div id="topnav-language" className="nav-item">
+                <LanguagePicker onChangeLanguage={changeLanguage} onlyIcon />
+              </div>
+              <div id="topnav-theme" className="nav-item">
+                <StyledColorModeSwitcher />
+              </div>
+            </NavItems>
+          </TopNavCollapsible>
+        </NavWrapper>
+      </>
+    );
+  }
 }
 
 const StyledColorModeSwitcher = styled(ColorModeSwitcher)`
@@ -260,6 +324,16 @@ export function MobileMenuIcon() {
   );
 }
 
+export function GetStartedButton() {
+  const { translate } = useTranslate();
+
+  return (
+    <a className="btn btn-primary" href={"/docs/tutorials"} style={{ height: "38px", paddingTop: "11px"}}>
+      {translate("Get Started")}
+    </a>
+  );
+}
+
 export function NavItems(props) {
   return (
     <ul className="nav navbar-nav" id="topnav-pages">
@@ -339,3 +413,131 @@ export class ThemeToggle extends React.Component {
     this.auto_update_theme();
   }
 }
+
+function getBlogNavigationConfig() {
+  const { translate } = useTranslate();
+
+  return [
+    {
+      index: "0",
+      label: translate("Learn"),
+      type: "group",
+      items: [
+        {
+          type: "group",
+          label: translate("XRP Ledger"),
+          items: [
+            {
+              type: "link",
+              fsPath: "about/index.page.tsx",
+              label: translate("Overview"),
+              link: "/about/",
+            },
+            {
+              type: "link",
+              fsPath: "about/uses.page.tsx",
+              label: translate("Uses"),
+              link: "/about/uses",
+            },
+            {
+              type: "link",
+              fsPath: "about/history.page.tsx",
+              label: translate("History"),
+              link: "/about/history",
+            },
+            {
+              type: "link",
+              fsPath: "about/impact.page.tsx",
+              label: translate("Impact"),
+              link: "/about/impact",
+            },
+            {
+              type: "link",
+              fsPath: "about/impact.page.tsx",
+              label: translate("Carbon Calculator"),
+              link: "/about/impact",
+            },
+          ],
+        },
+      ],
+      pathPrefix: "",
+    },
+    {
+      index: "1",
+      label: translate("Explore"),
+      type: "group",
+      items: [
+        {
+          type: "group",
+          label: translate("Explore the XRP Ledger"),
+          items: [
+            {
+              type: "link",
+              fsPath: "/docs/introduction/crypto-wallets.md",
+              label: translate("Wallets"),
+              link: "/docs/introduction/crypto-wallets",
+            },
+            {
+              type: "link",
+              fsPath: "about/xrp.page.tsx",
+              label: translate("Exchanges"),
+              link: "/about/xrp",
+            },
+            {
+              type: "link",
+              fsPath: "about/uses.page.tsx",
+              label: translate("Businesses"),
+              link: "/about/uses",
+            },
+            {
+              type: "link",
+              fsPath: "",
+              label: translate("Ledger Explorer"),
+              link: "https://livenet.xrpl.org/",
+            },
+          ],
+        },
+      ],
+      pathPrefix: "",
+    },
+    {
+      index: "2",
+      label: translate("Build"),
+      type: "group",
+      items: [
+        {
+          type: "group",
+          label: translate("Build with XRPL"),
+          items: [
+            {
+              type: "link",
+              fsPath: "/docs/index.page.tsx",
+              label: translate("Docs"),
+              link: "/docs/",
+            },
+            {
+              type: "link",
+              fsPath: "/resources/dev-tools/index.page.tsx",
+              label: translate("Dev Tools"),
+              link: "/resources/dev-tools/",
+            },
+            {
+              type: "link",
+              fsPath: "/blog/index.page.tsx",
+              label: translate("Dev Blog"),
+              link: "/blog/",
+            },
+          ],
+        },
+      ],
+      pathPrefix: "",
+    },
+    {
+      index: "3",
+      type: "link",
+      fsPath: "community/index.page.tsx",
+      label: translate("Contribute"),
+      link: "/community",
+    },
+  ];
+}