add programmatic links to navbars

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}>
+              <ButtonGroup spacing={4} colorScheme="secondary">
-                {/* <RouteButton variant="link" href="/docs">
+                {ALL_NAV_PATHES.map((item, idx) => (
-                  Docs
+                  <RouteButton
-                </RouteButton> */}
+                    key={`${idx}-${item.title}-landing-all-links`}
-                <RouteButton variant="link" href="/welcome">
+                    variant="link"
-                  Learn how to
+                    href={item.path}
-                </RouteButton>
+                    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

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 && (
+              {ALL_NAV_PATHES.map((item, idx) => (
-                <ButtonGroup spacing={4}>
+                <RouteButton
-                  {/* <RouteButton variant="link" href="/docs">
+                  key={`${idx}-${item.title}-landing-all-links`}
-                  Docs
+                  variant="link"
-                </RouteButton> */}
+                  href={item.path}
-                  <RouteButton variant="link" href="/welcome">
+                  color="white"
-                    Learn how to
+                  isActive={!!(router.pathname === item.path)}
-                  </RouteButton>
+                >
-                </ButtonGroup>
+                  {item.title}
-              )}
+                </RouteButton>
+              ))}
 
               {ui.isLoggedIn && (
                 <RouterLink href="/stream" passHref>