ok in desktops and mobile app views

frontend/.gitignore

@@ -41,3 +41,4 @@ package-lock.json
 # vercel
 .vercel
 
+.todo

frontend/src/components/AppNavbar.js

@@ -108,6 +108,17 @@ const AppNavbar = () => {
       {!ui.isMobileView && (
         <>
           <Flex px={2}>
+            <RouterLink href="/" passHref>
+              <Image
+                w="160px"
+                py="0.75rem"
+                pl={1}
+                ml="15px"
+                src={PRIMARY_MOON_LOGO_URL}
+                alt="Moonstream To"
+                cursor="pointer"
+              />
+            </RouterLink>
             <Spacer />
             <Flex placeSelf="flex-end">
               <ButtonGroup variant="link" spacing={4}>

frontend/src/components/Sidebar.js

@@ -2,35 +2,17 @@ import {
   ProSidebar,
   Menu,
   MenuItem,
-  SidebarHeader,
   SidebarFooter,
   SidebarContent,
 } from "react-pro-sidebar";
 import { useContext } from "react";
 import RouterLink from "next/link";
-import {
-  Flex,
-  Image,
-  IconButton,
-  Divider,
-  Text,
-  Button,
-} from "@chakra-ui/react";
+import { Divider, Text, Button } from "@chakra-ui/react";
 import UIContext from "../core/providers/UIProvider/context";
 import React from "react";
-import {
-  HamburgerIcon,
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  LockIcon,
-} from "@chakra-ui/icons";
+import { LockIcon } from "@chakra-ui/icons";
 import { MdSettings, MdDashboard, MdTimeline } from "react-icons/md";
-import {
-  PRIMARY_MOON_LOGO_URL,
-  SITEMAP,
-  PAGETYPE,
-  BACKGROUND_COLOR,
-} from "../core/constants";
+import { SITEMAP, PAGETYPE, BACKGROUND_COLOR } from "../core/constants";
 import useDashboard from "../core/hooks/useDashboard";
 import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants";
 import OverlayContext from "../core/providers/OverlayProvider/context";
@@ -49,7 +31,7 @@ const Sidebar = () => {
       collapsed={ui.sidebarCollapsed}
       hidden={!ui.sidebarVisible}
     >
-      <SidebarHeader>
+      {/* <SidebarHeader>
         <Flex>
           <IconButton
             ml={4}
@@ -83,7 +65,7 @@ const Sidebar = () => {
             />
           </RouterLink>
         </Flex>
-      </SidebarHeader>
+      </SidebarHeader> */}
       <SidebarContent>
         <Divider borderColor={BACKGROUND_COLOR} />
         <Menu iconShape="square">

frontend/src/layouts/AppLayout.js

@@ -4,6 +4,7 @@ import React, { useContext, useEffect } from "react";
 import UIContext from "../core/providers/UIProvider/context";
 import AppNavbar from "../components/AppNavbar";
 import { BACKGROUND_COLOR } from "../core/constants";
+import Sidebar from "../components/Sidebar";
 
 const AppLayout = ({ children }) => {
   const ui = useContext(UIContext);
@@ -55,7 +56,17 @@ const AppLayout = ({ children }) => {
       >
         <AppNavbar />
       </Flex>
-      {ui.isAppReady && ui.isLoggedIn && children}
+      <Flex
+        direction="row"
+        // id="Bugout"
+        className="Main"
+        w="100%"
+        h="100%"
+        maxH="100%"
+      >
+        <Sidebar />
+        {ui.isAppReady && ui.isLoggedIn && children}
+      </Flex>
     </Flex>
   );
 };

frontend/src/layouts/RootLayout.js

@@ -1,6 +1,6 @@
 import { CloseIcon } from "@chakra-ui/icons";
 import { Flex, Center, Text, Link, IconButton } from "@chakra-ui/react";
-import React, { Suspense, useContext, useState } from "react";
+import React, { useContext, useState, Suspense } from "react";
 import UIContext from "../core/providers/UIProvider/context";
 const Sidebar = React.lazy(() => import("../components/Sidebar"));
 
@@ -17,9 +17,12 @@ const RootLayout = (props) => {
       h="100%"
       maxH="100%"
     >
-      <Suspense fallback="">
-        <Sidebar />
-      </Suspense>
+      {" "}
+      {!ui.isAppView && (
+        <Suspense fallback="">
+          <Sidebar />
+        </Suspense>
+      )}
       <Flex
         direction="column"
         flexGrow={1}