feat: sidebar fix

subsquid · Jul 1, 2024 · d5295b8 · d5295b8
1 parent dae6c9d
commit d5295b8
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 63 deletions.
diff --git a/src/components/Logo/Logo.tsx b/src/components/Logo/Logo.tsx
@@ -1,16 +1,17 @@
 import React from 'react';
 
 import { Box, styled, useMediaQuery, useTheme } from '@mui/material';
-import { upperFirst } from 'lodash-es';
 
 import { getSubsquidNetwork } from '@network/useSubsquidNetwork';
 
+import { LogoCompact } from './LogoCompact';
+import { LogoFull } from './LogoFull';
+
 export const LogoWrapper = styled('div', {
   name: 'LogoWrapper',
-})(({theme}) => ({
+})(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center',
   '& img': {
     // display: 'block',
     // marginRight: 2,
@@ -41,14 +42,15 @@ export const LogoSecondary = styled(Box, {
 
 export function Logo({ color = '#fff' }: { color?: string }) {
   const theme = useTheme();
-  const narrow = useMediaQuery(theme.breakpoints.down('lg'));
+  const compact = useMediaQuery(theme.breakpoints.down('xl'));
   const size = 40;
 
   const network = getSubsquidNetwork();
 
   return (
     <LogoWrapper>
-      <img width={size} height={size} src="/logo.png" />
+      {compact ? <LogoCompact /> : <LogoFull />}
+      {/* <img width={size} height={size} src="/logo.png" /> */}
       {/* {!narrow ? (
         <>
           <LogoPrimary sx={{ color }}>SUBSQUID</LogoPrimary>

diff --git a/src/components/Logo/LogoCompact.tsx b/src/components/Logo/LogoCompact.tsx
@@ -0,0 +1,18 @@
+export function LogoCompact() {
+  return (
+    <svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M2.1589 10.512C1.42727 10.512 0.707639 10.4595 0 10.3663V16.2794C0.664461 16.3654 1.38409 16.4132 2.17089 16.4132C6.82691 16.4132 9.12014 14.7671 11.5477 13.0278C14.1456 11.1642 16.8346 9.23622 22.1863 9.23622C23.4936 9.23622 24.6402 9.3509 25.6669 9.55397V3.1965H15.8127C12.8766 7.60206 7.85359 10.5144 2.1589 10.5144V10.512Z"
+        fill="black"
+      />
+      <path
+        d="M22.1863 11.3867C17.5302 11.3867 15.237 13.0328 12.8095 14.7745C10.2116 16.638 7.52256 18.566 2.17089 18.566C1.39369 18.566 0.671657 18.523 0 18.449V28.7604H25.6669V11.757C24.6618 11.5229 23.52 11.3867 22.1863 11.3867Z"
+        fill="black"
+      />
+      <path
+        d="M0 8.19956C0.70524 8.30707 1.42487 8.36202 2.1589 8.36202C6.57264 8.36202 10.5234 6.34799 13.1333 3.19434H0V8.19717V8.19956Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/Logo/LogoFull.tsx b/src/components/Logo/LogoFull.tsx
@@ -0,0 +1,44 @@
+export function LogoFull() {
+  return (
+    <svg
+      width="112"
+      height="32"
+      viewBox="0 0 112 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M38.5434 20.6134L41.7386 19.2707C42.3431 21.1796 43.7272 22.7708 46.2123 22.7708C48.0594 22.7708 49.3019 21.71 49.3019 20.4366C49.3019 16.5829 39.3254 19.0939 39.3254 12.3398C39.3254 9.54695 41.7746 7.46124 45.6438 7.46124C49.0165 7.46124 51.8566 9.2292 52.6362 11.8453L49.441 13.188C48.9805 11.42 47.3109 10.4309 45.6774 10.4309C44.0438 10.4309 42.9092 11.1023 42.9092 12.2706C42.9092 15.7014 52.9553 13.0829 52.9553 20.4032C52.9553 23.4804 50.2566 25.848 46.2099 25.848C41.8441 25.848 39.359 23.1602 38.541 20.6158L38.5434 20.6134Z"
+        fill="black"
+      />
+      <path
+        d="M68.8256 32V23.5138C67.7246 24.9282 65.6305 25.848 63.4644 25.848C58.1031 25.848 54.8384 22.0302 54.8384 16.6546C54.8384 11.2791 57.9616 7.46124 63.2509 7.46124C65.736 7.46124 67.8301 8.55785 68.8256 10.0081V7.74555H72.6949V32H68.8256ZM69.0751 16.6546C69.0751 13.1187 67.017 10.8204 63.8914 10.8204C60.7658 10.8204 58.7076 13.1187 58.7076 16.6546C58.7076 20.1905 60.7658 22.4889 63.8914 22.4889C67.017 22.4889 69.0751 20.1547 69.0751 16.6546Z"
+        fill="black"
+      />
+      <path
+        d="M75.2158 16.6546C75.2158 11.279 78.3054 7.46122 83.7002 7.46122C86.0079 7.46122 88.102 8.48616 89.1671 9.9722V-3.05176e-05H93.0363V25.5637H89.1671V23.3012C88.3155 24.7872 86.1494 25.848 83.7698 25.848C78.303 25.848 75.2134 22.0301 75.2134 16.6546H75.2158ZM89.4525 16.6546C89.4525 13.1187 87.3944 10.8203 84.2688 10.8203C81.1432 10.8203 79.085 13.1187 79.085 16.6546C79.085 20.1905 81.1432 22.4888 84.2688 22.4888C87.3944 22.4888 89.4525 20.1547 89.4525 16.6546Z"
+        fill="black"
+      />
+      <path
+        d="M100.501 0.96278H98.532V0.0357971H103.536V0.96278H101.566V6.39088H100.499V0.96278H100.501Z"
+        fill="black"
+      />
+      <path
+        d="M104.675 0.0357971H105.906L107.938 4.86423L109.969 0.0357971H111.2V6.39088H110.18V2.02355L108.357 6.39088H107.527L105.695 2.02355V6.39088H104.675V0.0357971Z"
+        fill="black"
+      />
+      <path
+        d="M2.1589 10.512C1.42727 10.512 0.707639 10.4595 0 10.3663V16.2794C0.664461 16.3654 1.38409 16.4132 2.17089 16.4132C6.82691 16.4132 9.12014 14.7671 11.5477 13.0278C14.1456 11.1642 16.8346 9.23622 22.1863 9.23622C23.4936 9.23622 24.6402 9.3509 25.6669 9.55397V3.1965H15.8127C12.8766 7.60206 7.85359 10.5144 2.1589 10.5144V10.512Z"
+        fill="black"
+      />
+      <path
+        d="M22.1863 11.3867C17.5302 11.3867 15.237 13.0328 12.8095 14.7745C10.2116 16.638 7.52256 18.566 2.17089 18.566C1.39369 18.566 0.671657 18.523 0 18.449V28.7604H25.6669V11.757C24.6618 11.5229 23.52 11.3867 22.1863 11.3867Z"
+        fill="black"
+      />
+      <path
+        d="M0 8.19956C0.70524 8.30707 1.42487 8.36202 2.1589 8.36202C6.57264 8.36202 10.5234 6.34799 13.1333 3.19434H0V8.19717V8.19956Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/src/icons/OpenInNewIcon.tsx b/src/icons/OpenInNewIcon.tsx
@@ -2,20 +2,10 @@ import React from 'react';
 
 export function OpenInNewIcon({ size = 20, fill = '#A0A1A6' }: { size?: number; fill?: string }) {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        d="M15.9643 4.49693C15.9498 4.48421 15.9409 4.46625 15.9394 4.44689C15.9144 4.39684 15.9144 4.37191 15.8893 4.34697V4.29693L15.6893 4.09692H15.6393L15.5394 4.04688L10.5649 4.04705C10.297 4.04705 10.0494 4.18986 9.91551 4.42195C9.78142 4.65404 9.78142 4.93986 9.91551 5.17194C10.0494 5.40403 10.297 5.54684 10.5649 5.54684H13.4397L10.115 8.79664C9.97131 8.93352 9.89006 9.12324 9.89006 9.32169C9.89006 9.51995 9.97131 9.70984 10.115 9.84656C10.2534 9.98797 10.4421 10.0687 10.6399 10.0715C10.8395 10.078 11.0318 9.99565 11.1649 9.84656L14.4896 6.52181V9.39668C14.4896 9.66452 14.6325 9.91213 14.8644 10.0461C15.0965 10.1801 15.3823 10.1801 15.6144 10.0461C15.8465 9.91213 15.9893 9.66452 15.9893 9.39668V4.72203C15.993 4.67077 15.9844 4.6195 15.9644 4.57207L15.9643 4.49693Z"
-        fill={fill}
-      />
-      <path
-        d="M13.1897 14.4711H5.49046V6.79665H8.01529V5.29667L4.74049 5.29685C4.53962 5.2897 4.34467 5.36642 4.20255 5.50871C4.06027 5.65082 3.98355 5.84577 3.99069 6.04666V15.221C3.98354 15.4218 4.06027 15.6168 4.20255 15.7589C4.34466 15.9012 4.53961 15.9779 4.74049 15.9708H13.9396C14.1385 15.9708 14.3291 15.8918 14.4698 15.7512C14.6105 15.6105 14.6895 15.4198 14.6895 15.221V11.9461H13.1896L13.1897 14.4711Z"
-        fill={fill}
+        d="M1.36087 9.31087L0.116699 8.0667L6.30003 1.88337H0.877532V0.116699H9.31087V8.55003H7.5442V3.12753L1.36087 9.31087Z"
+        fill="#3E4A5C"
       />
     </svg>
   );

diff --git a/src/layouts/NetworkLayout/NetworkLayout.tsx b/src/layouts/NetworkLayout/NetworkLayout.tsx
@@ -31,7 +31,7 @@ import { UserMenu } from './UserMenu';
 const APP_BAR_HEIGHT = 60;
 const SIDEBAR_WIDTH = {
   M: 56,
-  L: 56,
+  L: 240,
 };
 
 export const Main = styled('div', {
@@ -115,9 +115,9 @@ export const Content = styled('div', {
       paddingLeft: 0,
     },
 
-    // [theme.breakpoints.up('xl')]: {
-    //   paddingLeft: SIDEBAR_WIDTH.L,
-    // },
+    [theme.breakpoints.up('xl')]: {
+      paddingLeft: SIDEBAR_WIDTH.L,
+    },
   };
 });
 
@@ -153,24 +153,25 @@ const Sidebar = styled('div', {
 
   return {
     display: 'flex',
-    flexFlow: 'column',
+    flexDirection: 'column',
     alignItems: 'stretch',
     // marginTop: APP_BAR_HEIGHT + bannerHeight,
     background: theme.palette[variant].main,
     position: 'fixed',
     top: 0,
-    // paddingTop: theme.spacing(0),
+    // paddingLeft: theme.spacing(1),
+    // paddingTop: theme.spacing(1),
     bottom: 0,
     // paddingBottom: theme.spacing(3),
     zIndex: theme.zIndex.appBar + 1,
     // boxShadow: '-5px 4px 20px rgba(0, 0, 0, 0.25)',
-    width: theme.spacing(7),
+    width: SIDEBAR_WIDTH.M,
     overflowY: 'auto',
     overflowX: 'hidden',
 
-    // [theme.breakpoints.up('xl')]: {
-    //   width: SIDEBAR_WIDTH.L,
-    // },
+    [theme.breakpoints.up('xl')]: {
+      width: SIDEBAR_WIDTH.L,
+    },
 
     '&.guideActive': {
       zIndex: theme.zIndex.guide.highlight,
@@ -208,9 +209,9 @@ const SidebarLogo = styled('div', {
 })(({ theme, color }) => {
   return {
     display: 'flex',
-    flexFlow: 'column',
     height: APP_BAR_HEIGHT,
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
+    padding: theme.spacing(0, 2),
   };
 });
 

diff --git a/src/layouts/NetworkLayout/NetworkMenu.tsx b/src/layouts/NetworkLayout/NetworkMenu.tsx
@@ -1,12 +1,11 @@
 import React, { ForwardedRef, forwardRef } from 'react';
 
-import { Box, Button, styled } from '@mui/material';
+import { Box, Button, styled, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 
 import { useIsWorkerOperator } from '@api/subsquid-network-squid';
 import { ContactsIcon } from '@icons/ContactsIcon';
 import { DashboardIcon } from '@icons/DashboardIcon';
-import { DoorIcon } from '@icons/DoorIcon';
 import { HandIcon } from '@icons/HandIcon';
 import { NetworkNodeIcon } from '@icons/NetworkNodeIcon';
 import { OpenInNewIcon } from '@icons/OpenInNewIcon';
@@ -17,28 +16,39 @@ interface NetworkMenuProps {
   onItemClick: () => void;
 }
 
-const MenuItem = styled(Button)(({ theme: { palette, spacing } }) => ({
+const MenuItem = styled(Button)(({ theme: { palette, spacing, breakpoints } }) => ({
   display: 'flex',
   alignItems: 'center',
   height: spacing(7),
-  width: '100%',
-  minWidth: 0,
+  alignSelf: 'center',
+  justifyContent: 'center',
+
+  padding: spacing(0),
+  [breakpoints.up('xl')]: {
+    justifyContent: 'flex-start',
+    alignSelf: 'stretch',
+    padding: spacing(0, 2.5),
+  },
 
-  fontWeight: 500,
-  textAlign: 'center',
-  padding: spacing(0, 2),
   borderRadius: 0,
   '& .leftIcon': {
     display: 'flex',
-    width: '20px',
     alignItems: 'center',
+    marginRight: spacing(0),
+
+    [breakpoints.up('xl')]: {
+      marginRight: spacing(1.5),
+    },
   },
+
   '& .rightIcon': {
-    height: '20px',
-  },
-  '& svg:not(.badge) path': {
-    transition: 'fill 300ms ease-out',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: spacing(1),
   },
+  // '& svg:not(.badge) path': {
+  //   transition: 'fill 300ms ease-out',
+  // },
   // ['&:hover']: {
   //   backgroundColor: palette.background.paper,
   //   color: palette.info.contrastText,
@@ -67,12 +77,6 @@ const MenuItem = styled(Button)(({ theme: { palette, spacing } }) => ({
   // },
 }));
 
-const Text = styled(Box)({
-  fontSize: '0.875rem',
-  flex: 1,
-  textAlign: 'left',
-});
-
 export const Item = forwardRef(
   (
     {
@@ -101,32 +105,43 @@ export const Item = forwardRef(
     const location = useLocation();
     const active = forceActive || (!forceInactive && location.pathname.startsWith(path));
 
+    const theme = useTheme();
+    const compact = useMediaQuery(theme.breakpoints.down('xl'));
+
     const button = (
       <MenuItem
         ref={ref}
         onClick={onClick}
         className={active ? 'selected' : undefined}
         disabled={disabled}
+        // @ts-expect-error: satisfy the compiler
+        component={Link}
+        to={path}
+        target={target}
+        rel={target ? 'noreferrer' : undefined}
       >
-        <Box className="leftIcon" justifyContent="center" alignContent="center">
+        <Box className="leftIcon">
           <LeftIcon variant={active ? 'filled' : 'outlined'} />
         </Box>
-        {/* <Text>{label}</Text>
-        {RightIcon ? (
-          <Box className="rightIcon">
-            <RightIcon />
-          </Box>
-        ) : null} */}
+        {!compact ? (
+          <>
+            <Typography variant="body1">{label}</Typography>
+            {RightIcon ? (
+              <Box className="rightIcon">
+                <RightIcon />
+              </Box>
+            ) : null}
+          </>
+        ) : null}
       </MenuItem>
     );
 
     if (disabled) return button;
 
-    return (
-      <Link to={path} target={target} rel={target ? 'noreferrer' : undefined}>
-        {button}
-      </Link>
-    );
+    return button;
+    // <Link to={path} target={target} rel={target ? 'noreferrer' : undefined}>
+    // { button }
+    // </Link>
   },
 );
 
@@ -153,15 +168,15 @@ export const NetworkMenu = ({ onItemClick }: NetworkMenuProps) => {
       {/*/>*/}
       {isWorkerOperator ? (
         <Item
-          label="Operators chat"
+          label="Operators Chat"
           path={workersChatUrl || '/null'}
           target="_blank"
           LeftIcon={ContactsIcon}
           RightIcon={OpenInNewIcon}
         />
       ) : null}
       <Item
-        label="Community chat"
+        label="Community Chat"
         path={process.env.DISCORD_API_URL || '/null'}
         target="_blank"
         LeftIcon={ContactsIcon}