Merge branch 'fixing-sidebar' of https://github.com/bugout-dev/moonstream into changing-menu

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/EntriesNavigation.js

@@ -222,6 +222,9 @@ const EntriesNavigation = () => {
       overflow="hidden"
       direction="column"
       flexGrow={1}
+      mt="10px"
+      mr="5px"
+      ml="5px"
     >
       {streamCache && !eventsIsLoading ? (
         <>
@@ -433,7 +436,7 @@ const EntriesNavigation = () => {
               w="100%"
               //onScroll={(e) => handleScroll(e)}
             >
-              <Stack direction="row" justifyContent="space-between">
+              <Stack mt="5px" direction="row" justifyContent="space-around">
                 {!loadNewerEventsIsFetching && !nextEventIsFetching ? (
                   <Button
                     onClick={() => {
@@ -452,53 +455,53 @@ const EntriesNavigation = () => {
                     colorScheme="green"
                   ></Button>
                 )}
-              </Stack>
-              {streamCache
-                .slice(
-                  cursor,
-                  streamCache.length <= cursor + PAGE_SIZE
-                    ? streamCache.length
-                    : cursor + PAGE_SIZE
-                )
-                .map((entry, idx) => (
-                  <StreamEntry
-                    showOnboardingTooltips={false}
-                    key={`entry-list-${idx}`}
-                    entry={entry}
-                    disableDelete={!canDelete}
-                    disableCopy={!canCreate}
-                    filterCallback={handleFilterStateCallback}
-                    filterConstants={{ DIRECTIONS, CONDITION, FILTER_TYPES }}
-                  />
-                ))}
-              {previousEvent &&
-              !loadOlderEventsIsFetching &&
-              !previousEventIsFetching ? (
-                <Center>
-                  <Button
-                    onClick={() => {
-                      loadPreviousEventHandler();
-                    }}
-                    variant="outline"
-                    colorScheme="green"
-                  >
-                    Load older events
-                  </Button>
-                </Center>
-              ) : (
-                <Center>
-                  {!previousEventIsFetching && !loadOlderEventsIsFetching ? (
-                    "Тransactions not found. You can subscribe to more addresses in Subscriptions menu."
-                  ) : (
+                {streamCache
+                  .slice(
+                    cursor,
+                    streamCache.length <= cursor + PAGE_SIZE
+                      ? streamCache.length
+                      : cursor + PAGE_SIZE
+                  )
+                  .map((entry, idx) => (
+                    <StreamEntry
+                      showOnboardingTooltips={false}
+                      key={`entry-list-${idx}`}
+                      entry={entry}
+                      disableDelete={!canDelete}
+                      disableCopy={!canCreate}
+                      filterCallback={handleFilterStateCallback}
+                      filterConstants={{ DIRECTIONS, CONDITION, FILTER_TYPES }}
+                    />
+                  ))}
+                {previousEvent &&
+                !loadOlderEventsIsFetching &&
+                !previousEventIsFetching ? (
+                  <Center>
                     <Button
-                      isLoading
-                      loadingText="Loading"
+                      onClick={() => {
+                        loadPreviousEventHandler();
+                      }}
                       variant="outline"
                       colorScheme="green"
-                    ></Button>
-                  )}
-                </Center>
-              )}
+                    >
+                      Load older events
+                    </Button>
+                  </Center>
+                ) : (
+                  <Center>
+                    {!previousEventIsFetching && !loadOlderEventsIsFetching ? (
+                      "Тransactions not found. You can subscribe to more addresses in Subscriptions menu."
+                    ) : (
+                      <Button
+                        isLoading
+                        loadingText="Loading"
+                        variant="outline"
+                        colorScheme="green"
+                      ></Button>
+                    )}
+                  </Center>
+                )}
+              </Stack>
             </Flex>
           </Flex>
         </>

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";
@@ -48,42 +30,8 @@ const Sidebar = () => {
       onToggle={ui.setSidebarToggled}
       collapsed={ui.sidebarCollapsed}
       hidden={!ui.sidebarVisible}
+      className={ui.isMobileView ? "t40" : "t0"}
     >
-      <SidebarHeader>
-        <Flex>
-          <IconButton
-            ml={4}
-            justifySelf="flex-start"
-            colorScheme="blackAlpha"
-            bgColor={BACKGROUND_COLOR}
-            aria-label="App navigation"
-            icon={
-              ui.isMobileView ? (
-                <HamburgerIcon />
-              ) : ui.sidebarCollapsed ? (
-                <ArrowRightIcon />
-              ) : (
-                <ArrowLeftIcon />
-              )
-            }
-            onClick={() => {
-              ui.isMobileView
-                ? ui.setSidebarToggled(!ui.sidebarToggled)
-                : ui.setSidebarCollapsed(!ui.sidebarCollapsed);
-            }}
-          />
-          <RouterLink href="/" passHref>
-            <Image
-              w="160px"
-              py="0.75rem"
-              pl={1}
-              src={PRIMARY_MOON_LOGO_URL}
-              alt="Moonstream To"
-              cursor="pointer"
-            />
-          </RouterLink>
-        </Flex>
-      </SidebarHeader>
       <SidebarContent>
         <Divider borderColor={BACKGROUND_COLOR} />
         <Menu iconShape="square">

frontend/src/components/SubscriptionCard.js

@@ -61,7 +61,6 @@ const SubscriptionCard = ({ subscription, isDesktopView, iconLink }) => {
     <>
       {!isDesktopView && (
         <AccordionItem
-          bgColor="blue.50"
           borderBottomColor="blue.500"
           key={`token-row-${subscription.id}`}
         >
@@ -108,7 +107,7 @@ const SubscriptionCard = ({ subscription, isDesktopView, iconLink }) => {
               <AccordionIcon />
             </AccordionButton>
           </h2>
-          <AccordionPanel pb={4} bgColor="blue.100" boxShadow="md">
+          <AccordionPanel pb={4} boxShadow="md">
             <Stack>
               <Stack fontSize="sm" h="min-content" pr={0}>
                 <Text placeSelf="flex-start">Address:</Text>

frontend/src/layouts/AppLayout.js

@@ -1,9 +1,10 @@
 import { Flex, Spinner, Box } from "@chakra-ui/react";
 import { getLayout as getSiteLayout } from "./RootLayout";
-import React, { useContext, useEffect } from "react";
+import React, { Suspense, 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,19 @@ const AppLayout = ({ children }) => {
       >
         <AppNavbar />
       </Flex>
-      {ui.isAppReady && ui.isLoggedIn && children}
+      <Flex
+        direction="row"
+        // id="Bugout"
+        className="Main"
+        w="100%"
+        h="100%"
+        maxH="100%"
+      >
+        <Suspense fallback="">
+          <Sidebar />
+        </Suspense>
+        {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}

frontend/styles/sidebar.css

@@ -29,6 +29,14 @@
   }
 }
 
+.t40 {
+  top: 40px;
+}
+
+.t0 {
+  top: 0px;
+}
+
 .pro-sidebar {
   height: 100%;
   width: 270px;