AppLayouts

In AppBars > AppBarSide.jsx, Code this:

import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
import * as React from "react";
import { Navbar } from "../AppBars/AppBarNavigation";
import { Sidebar } from "../AppBars/AppBarSide";

function MainLayout() {
  const isDesktop = useBreakpointValue({
    base: false,
    lg: true,
  });
  const AppLayout = (Content) => {
    return (
      <Flex height="100vh" bg='gray.50'>
        {isDesktop ? (
          <Box height="full" overflowY="auto" justifyContent="flex-end">
            <Sidebar />
          </Box>
        ) : null}
        <Box
          direction={{
            base: "row",
            lg: "column",
          }}
          bg="bg-canvas"
          flex="1"
          overflowY="auto"
        >
          {isDesktop ? null : <Navbar />}
          <Content />
        </Box>
      </Flex>
    );
  };

  return { AppLayout };
}

export default MainLayout;

In AppBar > AppBarNavigation.jsx:

import {
  Box,
  Container,
  Drawer,
  DrawerContent,
  DrawerOverlay,
  Flex,
  HStack,
  useBreakpointValue,
  useDisclosure
} from "@chakra-ui/react";
import * as React from "react";
import { Sidebar } from "./AppBarSide";
import { ToggleButton } from "../AppComponent/ToogleButton";
import AppFramerMotion from "../AppComponent/AppFramerMotion";

export const Navbar = () => {

  const isDesktop = useBreakpointValue({
    lg: true,
    md: false,
  });

  const { isOpen, onToggle, onClose } = useDisclosure();

  return (
    <Box as="nav" bg="#00c3ff" roundedBottomRight="2xl" roundedBottomLeft="2xl" color="on-accent" shadow="sm">
      <Container maxW="800px" p="2">
        <Flex justify="space-between">
          <HStack spacing="4">
            {isDesktop ? null : (
              <AppFramerMotion/>
            )}
          </HStack>
          {isDesktop ? (
            <></>
          ) : (
            <>
              <ToggleButton
                isOpen={isOpen}
                aria-label="Open Menu"
                onClick={onToggle}
              />
              <Drawer
                isOpen={isOpen}
                placement="left"
                onClose={onClose}
                isFullHeight
                preserveScrollBarGap // Only disabled for showcase
                trapFocus={false}
              >
                <DrawerOverlay />
                <DrawerContent maxW="fit-content" roundedTopRight="50px" roundedBottomRight="50px">
                  <Sidebar />
                </DrawerContent>
              </Drawer>
            </>
          )}
        </Flex>
      </Container>
    </Box>
  );
};