feat: icon sidebar

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#192](https://github.com/alleslabs/celatone-frontend/pull/192) Add alternative sidebar with only icons
 - [#210](https://github.com/alleslabs/celatone-frontend/pull/210) New design for token card, currently support price
 - [#189](https://github.com/alleslabs/celatone-frontend/pull/189) Add skeleton for the account details page
 - [#193](https://github.com/alleslabs/celatone-frontend/pull/193) Get data for account details page
@@ -52,6 +53,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#195](https://github.com/alleslabs/celatone-frontend/pull/195) Make code name cell for migration table to be editable in contract detail page
 - [#213](https://github.com/alleslabs/celatone-frontend/pull/213) Fix `window.crypto.randomUUID()` in old safari version (< 15.4) and `at()` of array
 
+
 ## v1.0.0
 
 ### Features

src/lib/layout/index.tsx

@@ -1,20 +1,24 @@
 import { Grid, GridItem } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import type { ReactNode } from "react";
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
 
+import { useMobile } from "lib/hooks";
 import { scrollToTop } from "lib/utils";
 
 import Footer from "./Footer";
 import Header from "./Header";
-import Navbar from "./Navbar";
+import Navbar from "./navbar";
 
 type LayoutProps = {
   children: ReactNode;
 };
 
 const Layout = ({ children }: LayoutProps) => {
   const router = useRouter();
+  const isMobile = useMobile();
+
+  const [isExpand, setIsExpand] = useState(!isMobile);
 
   useEffect(() => {
     scrollToTop();
@@ -24,7 +28,7 @@ const Layout = ({ children }: LayoutProps) => {
       templateAreas={`"header header"
     "nav main"`}
       gridTemplateRows="70px 1fr"
-      gridTemplateColumns="224px 1fr"
+      gridTemplateColumns={isExpand ? "224px 1fr" : "48px 1fr"}
       h="100vh"
       overflowX="hidden"
       bg="background.main"
@@ -33,7 +37,7 @@ const Layout = ({ children }: LayoutProps) => {
         <Header />
       </GridItem>
       <GridItem bg="pebble.900" area="nav" overflowY="auto">
-        <Navbar />
+        <Navbar isExpand={isExpand} setIsExpand={setIsExpand} />
       </GridItem>
       <GridItem area="main" overflowY="auto" id="content">
         <div style={{ minHeight: `calc(100vh - 129px)` }}>{children}</div>

src/lib/layout/navbar/Collapse.tsx

@@ -0,0 +1,99 @@
+import { Box, Flex, Icon, IconButton, Image, Tooltip } from "@chakra-ui/react";
+import { MdDoubleArrow } from "react-icons/md";
+
+import { AppLink } from "lib/components/AppLink";
+import { useMobile } from "lib/hooks";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+
+import type { NavMenuProps } from "./type";
+
+export const CollapseNavMenu = ({
+  navMenu,
+  isCurrentPage,
+  setIsExpand,
+}: NavMenuProps) => {
+  const isMobile = useMobile();
+
+  return (
+    <Box overflowY="auto" overflowX="hidden">
+      {navMenu.map((item) => (
+        <Box
+          minW="fit-content"
+          key={item.category}
+          borderBottom="1px solid"
+          borderColor="pebble.700"
+          sx={{
+            "&:last-of-type": {
+              borderBottom: "none",
+              paddingBottom: "0px",
+              marginBottom: "0px",
+            },
+          }}
+        >
+          <Flex justifyContent="space-between" alignItems="center">
+            {!isMobile && item.category === "Overview" && (
+              <Tooltip
+                label="Expand"
+                hasArrow
+                placement="right"
+                bg="honeydew.darker"
+              >
+                <IconButton
+                  aria-label="overview"
+                  variant="ghost-info"
+                  fontSize="24px"
+                  height="fit-content"
+                  minW="fit-content"
+                  p={1}
+                  mt={2}
+                  mx={2}
+                  icon={<MdDoubleArrow />}
+                  onClick={() => setIsExpand(true)}
+                />
+              </Tooltip>
+            )}
+          </Flex>
+          {item.submenu.map((submenu) => (
+            <AppLink
+              href={submenu.slug}
+              key={submenu.slug}
+              onClick={() => AmpTrack(AmpEvent.USE_SIDEBAR)}
+            >
+              <Tooltip
+                label={submenu.name}
+                hasArrow
+                placement="right"
+                bg="honeydew.darker"
+              >
+                <Flex
+                  cursor="pointer"
+                  p={1}
+                  m={2}
+                  _hover={{ bg: "pebble.700", borderRadius: "8px" }}
+                  transition="all .25s ease-in-out"
+                  alignItems="center"
+                  bgColor={
+                    isCurrentPage(submenu.slug) ? "pebble.800" : "transparent"
+                  }
+                  borderRadius={isCurrentPage(submenu.slug) ? "8px" : "0px"}
+                >
+                  {submenu.icon && (
+                    <Icon as={submenu.icon} color="pebble.600" boxSize={6} />
+                  )}
+                  {submenu.logo && (
+                    <Image
+                      src={submenu.logo}
+                      borderRadius="full"
+                      alt={submenu.slug}
+                      boxSize={6}
+                    />
+                  )}
+                </Flex>
+              </Tooltip>
+            </AppLink>
+          ))}
+        </Box>
+      ))}
+    </Box>
+  );
+};

src/lib/layout/navbar/Expand.tsx

@@ -0,0 +1,96 @@
+import { Box, Button, Flex, Icon, Image, Text } from "@chakra-ui/react";
+import { MdAdd, MdDoubleArrow } from "react-icons/md";
+
+import { AppLink } from "lib/components/AppLink";
+import { CreateNewListModal } from "lib/components/modal";
+import { AmpEvent, AmpTrack } from "lib/services/amplitude";
+
+import type { NavMenuProps } from "./type";
+
+export const ExpandNavMenu = ({
+  navMenu,
+  isCurrentPage,
+  setIsExpand,
+}: NavMenuProps) => (
+  <Box px={4} py={2} overflowY="auto">
+    {navMenu.map((item) => (
+      <Box
+        pb="4"
+        mb="4"
+        key={item.category}
+        borderBottom="1px solid"
+        borderColor="pebble.700"
+        sx={{
+          "&:last-of-type": {
+            borderBottom: "none",
+            paddingBottom: "0px",
+            marginBottom: "0px",
+          },
+        }}
+      >
+        <Flex justifyContent="space-between" alignItems="center">
+          <Text py="2" variant="body3" fontWeight="600">
+            {item.category}
+          </Text>
+          {item.category === "Overview" && (
+            <Button
+              variant="ghost-info"
+              size="xs"
+              leftIcon={<MdDoubleArrow transform="rotate(180)" />}
+              onClick={() => setIsExpand(false)}
+            >
+              HIDE
+            </Button>
+          )}
+          {item.category === "Contracts" && (
+            <CreateNewListModal
+              buttonProps={{
+                variant: "ghost-info",
+                size: "xs",
+                leftIcon: <MdAdd />,
+                children: "NEW LIST",
+                onClick: () => AmpTrack(AmpEvent.USE_SIDEBAR),
+              }}
+            />
+          )}
+        </Flex>
+        {item.submenu.map((submenu) => (
+          <AppLink
+            href={submenu.slug}
+            key={submenu.slug}
+            onClick={() => AmpTrack(AmpEvent.USE_SIDEBAR)}
+          >
+            <Flex
+              gap="2"
+              p={2}
+              cursor="pointer"
+              _hover={{ bg: "pebble.700", borderRadius: "8px" }}
+              my="1px"
+              transition="all .25s ease-in-out"
+              alignItems="center"
+              bgColor={
+                isCurrentPage(submenu.slug) ? "pebble.800" : "transparent"
+              }
+              borderRadius={isCurrentPage(submenu.slug) ? "8px" : "0px"}
+            >
+              {submenu.icon && (
+                <Icon as={submenu.icon} color="pebble.600" boxSize="4" />
+              )}
+              {submenu.logo && (
+                <Image
+                  src={submenu.logo}
+                  borderRadius="full"
+                  alt={submenu.slug}
+                  boxSize={4}
+                />
+              )}
+              <Text variant="body2" className="ellipsis">
+                {submenu.name}
+              </Text>
+            </Flex>
+          </AppLink>
+        ))}
+      </Box>
+    ))}
+  </Box>
+);