From f01c6b3543c3b6ab2bf816a2f11309b6f6bbb64d Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Fri, 20 Aug 2021 15:07:25 +0200
Subject: [PATCH] add programmatic links to navbars

---
 frontend/src/components/AppNavbar.js     | 39 +++++++++++++++++++-----
 frontend/src/components/LandingNavbar.js | 23 ++++++++------
 2 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/AppNavbar.js b/frontend/src/components/AppNavbar.js
index 2f6c11f6..3ab8280c 100644
--- a/frontend/src/components/AppNavbar.js
+++ b/frontend/src/components/AppNavbar.js
@@ -28,6 +28,7 @@ import useRouter from "../core/hooks/useRouter";
 import UIContext from "../core/providers/UIProvider/context";
 import AccountIconButton from "./AccountIconButton";
 import RouteButton from "./RouteButton";
+import { USER_NAV_PATHES, ALL_NAV_PATHES } from "../core/constants";
 
 const AppNavbar = () => {
   const ui = useContext(UIContext);
@@ -97,13 +98,37 @@ const AppNavbar = () => {
           <Flex width="100%" px={2}>
             <Spacer />
             <Flex placeSelf="flex-end">
-              <ButtonGroup spacing={4}>
-                {/* <RouteButton variant="link" href="/docs">
-                  Docs
-                </RouteButton> */}
-                <RouteButton variant="link" href="/welcome">
-                  Learn how to
-                </RouteButton>
+              <ButtonGroup spacing={4} colorScheme="secondary">
+                {ALL_NAV_PATHES.map((item, idx) => (
+                  <RouteButton
+                    key={`${idx}-${item.title}-landing-all-links`}
+                    variant="link"
+                    href={item.path}
+                    color="white"
+                    isActive={!!(router.nextRouter.pathname === item.path)}
+                  >
+                    {item.title}
+                  </RouteButton>
+                ))}
+                {USER_NAV_PATHES.map((item, idx) => {
+                  console.log(
+                    "item.path:",
+                    item.path,
+                    "pathname:",
+                    router.nextRouter.pathname
+                  );
+                  return (
+                    <RouteButton
+                      key={`${idx}-${item.title}-navlink`}
+                      variant="link"
+                      href={item.path}
+                      color="white"
+                      isActive={!!(router.nextRouter.pathname === item.path)}
+                    >
+                      {item.title}
+                    </RouteButton>
+                  );
+                })}
               </ButtonGroup>
               <SupportPopover />
               <AccountIconButton
diff --git a/frontend/src/components/LandingNavbar.js b/frontend/src/components/LandingNavbar.js
index a210a1ba..d87a12af 100644
--- a/frontend/src/components/LandingNavbar.js
+++ b/frontend/src/components/LandingNavbar.js
@@ -14,6 +14,8 @@ import useModals from "../core/hooks/useModals";
 import UIContext from "../core/providers/UIProvider/context";
 import ChakraAccountIconButton from "./AccountIconButton";
 import RouteButton from "./RouteButton";
+import { ALL_NAV_PATHES } from "../core/constants";
+import router from "next/router";
 
 const LandingNavbar = () => {
   const ui = useContext(UIContext);
@@ -53,16 +55,17 @@ const LandingNavbar = () => {
               spacing={4}
               pr={16}
             >
-              {ui.isLoggedIn && (
-                <ButtonGroup spacing={4}>
-                  {/* <RouteButton variant="link" href="/docs">
-                  Docs
-                </RouteButton> */}
-                  <RouteButton variant="link" href="/welcome">
-                    Learn how to
-                  </RouteButton>
-                </ButtonGroup>
-              )}
+              {ALL_NAV_PATHES.map((item, idx) => (
+                <RouteButton
+                  key={`${idx}-${item.title}-landing-all-links`}
+                  variant="link"
+                  href={item.path}
+                  color="white"
+                  isActive={!!(router.pathname === item.path)}
+                >
+                  {item.title}
+                </RouteButton>
+              ))}
 
               {ui.isLoggedIn && (
                 <RouterLink href="/stream" passHref>