navbar routes to /welcome

frontend/src/components/AppNavbar.js

@@ -15,6 +15,7 @@ import {
   PopoverCloseButton,
   useBreakpointValue,
   Spacer,
+  ButtonGroup,
 } from "@chakra-ui/react";
 import {
   HamburgerIcon,
@@ -26,6 +27,7 @@ import { MdTimeline } from "react-icons/md";
 import useRouter from "../core/hooks/useRouter";
 import UIContext from "../core/providers/UIProvider/context";
 import AccountIconButton from "./AccountIconButton";
+import RouteButton from "./RouteButton";
 
 const AppNavbar = () => {
   const ui = useContext(UIContext);
@@ -95,6 +97,14 @@ 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>
               <SupportPopover />
               <AccountIconButton
                 colorScheme="primary"

frontend/src/components/LandingNavbar.js

@@ -13,6 +13,7 @@ import { HamburgerIcon } from "@chakra-ui/icons";
 import useModals from "../core/hooks/useModals";
 import UIContext from "../core/providers/UIProvider/context";
 import ChakraAccountIconButton from "./AccountIconButton";
+import RouteButton from "./RouteButton";
 
 const LandingNavbar = () => {
   const ui = useContext(UIContext);
@@ -52,6 +53,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>
+              )}
+
               {ui.isLoggedIn && (
                 <RouterLink href="/stream" passHref>
                   <Button

frontend/src/components/Sidebar.js

@@ -14,6 +14,7 @@ import React from "react";
 import { HamburgerIcon, ArrowLeftIcon, ArrowRightIcon } from "@chakra-ui/icons";
 import { MdTimeline, MdSettings } from "react-icons/md";
 import { ImStatsBars } from "react-icons/im";
+import { HiAcademicCap } from "react-icons/hi";
 
 const Sidebar = () => {
   const ui = useContext(UIContext);
@@ -79,6 +80,13 @@ const Sidebar = () => {
               <RouterLink href="/subscriptions">Subscriptions </RouterLink>
             </MenuItem>
           </Menu>
+          {ui.isMobileView && (
+            <Menu iconShape="square">
+              <MenuItem icon={<HiAcademicCap />}>
+                <RouterLink href="/welcome">Learn how to</RouterLink>
+              </MenuItem>
+            </Menu>
+          )}
         </SidebarContent>
       )}
       {!ui.isLoggedIn && (