feat: Create a new sidebar menu component

src/ResetCSS.tsx

@@ -68,6 +68,18 @@ const ResetCSS = createGlobalStyle`
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  /* Scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.colors.textSubtle}; 
+    border-radius: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px ${({ theme }) => theme.colors.input}; 
+    border-radius: 10px;
+  }
 `;
 
 export default ResetCSS;

src/components/Dropdown/Dropdown.tsx

@@ -1,14 +1,29 @@
 import React from "react";
 import styled from "styled-components";
-import { DropdownProps } from "./types";
+import { DropdownProps, PositionProps, Position } from "./types";
 
-const DropdownContent = styled.div`
+const getLeft = ({ position }: PositionProps) => {
+  if (position === "top-right") {
+    return "100%";
+  }
+  return "50%";
+};
+
+const getBottom = ({ position }: PositionProps) => {
+  if (position === "top" || position === "top-right") {
+    return "100%";
+  }
+  return "auto";
+};
+
+const DropdownContent = styled.div<{ position: Position }>`
   width: max-content;
   display: none;
   flex-direction: column;
   position: absolute;
-  left: 50%;
   transform: translate(-50%, 0);
+  left: ${getLeft};
+  bottom: ${getBottom};
   background-color: ${({ theme }) => theme.nav.background};
   box-shadow: ${({ theme }) => theme.shadows.level1};
   padding: 16px;
@@ -25,13 +40,16 @@ const Container = styled.div`
   }
 `;
 
-const Dropdown: React.FC<DropdownProps> = ({ target, children }) => {
+const Dropdown: React.FC<DropdownProps> = ({ target, position = "bottom", children }) => {
   return (
     <Container>
       {target}
-      <DropdownContent>{children}</DropdownContent>
+      <DropdownContent position={position}>{children}</DropdownContent>
     </Container>
   );
 };
+Dropdown.defaultProps = {
+  position: "bottom",
+};
 
 export default Dropdown;

src/components/Dropdown/index.stories.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import Button from "../Button/Button";
+import Flex from "../Flex/Flex";
 import Dropdown from "./Dropdown";
 
 export default {
@@ -19,3 +20,20 @@ export const Default: React.FC = () => {
     </div>
   );
 };
+
+export const Top: React.FC = () => {
+  return (
+    <Flex justifyContent="space-between" style={{ marginTop: "400px" }}>
+      <Dropdown position="top-right" target={<Button>Top right</Button>}>
+        {[...Array(20)].map(() => (
+          <div>Content</div>
+        ))}
+      </Dropdown>
+      <Dropdown position="top" target={<Button>Top</Button>}>
+        {[...Array(20)].map(() => (
+          <div>Content</div>
+        ))}
+      </Dropdown>
+    </Flex>
+  );
+};

src/components/Dropdown/types.ts

@@ -1,3 +1,9 @@
-export interface DropdownProps {
+export type Position = "top" | "top-right" | "bottom";
+
+export interface PositionProps {
+  position?: Position;
+}
+
+export interface DropdownProps extends PositionProps {
   target: React.ReactElement;
 }

src/components/Link/Link.tsx

@@ -7,7 +7,6 @@ import { LinkProps } from "./types";
 const StyledLink = styled(Text)<LinkProps>`
   display: flex;
   align-items: center;
-  color: ${({ theme }) => theme.colors.primary};
   width: fit-content;
   &:hover {
     text-decoration: underline;
@@ -19,4 +18,8 @@ const Link: React.FC<LinkProps> = ({ external, ...props }) => {
   return <StyledLink as="a" bold {...internalProps} {...props} />;
 };
 
+Link.defaultProps = {
+  color: "primary",
+};
+
 export default Link;

src/components/Link/index.stories.tsx

@@ -25,6 +25,11 @@ export const Default: React.FC = () => {
       <div>
         <Link href="/">Default</Link>
       </div>
+      <div>
+        <Link href="/" color="text">
+          Custom color
+        </Link>
+      </div>
       <div>
         <Link external href="/">
           External

src/components/Skeleton/Skeleton.tsx

@@ -26,19 +26,21 @@ const pulse = keyframes`
 const Root = styled.div<{ variant: SkeletonProps["variant"]; width?: number; height?: number }>`
   min-height: 20px;
   display: block;
-  background-color: ${({ theme }) => theme.colors.textDisabled};
+  background-color: ${({ theme }) => theme.colors.backgroundDisabled};
   width: ${({ width }) => (width ? `${width}px` : "100%")};
   height: ${({ height }) => (height ? `${height}px` : "100%")};
   border-radius: ${({ variant, theme }) => (variant === VARIANT.CIRCLE ? theme.radii.circle : theme.radii.small)};
 `;
 
 const Pulse = styled(Root)`
   animation: ${pulse} 2s infinite ease-out;
+  transform: translate3d(0, 0, 0);
 `;
 
 const Waves = styled(Root)`
   position: relative;
   overflow: hidden;
+  transform: translate3d(0, 0, 0);
   &:before {
     content: "";
     position: absolute;

src/components/Svg/Icons/ArrowDropDown.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Svg from "../Svg";
+import { SvgProps } from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path d="M8.71005 11.71L11.3001 14.3C11.6901 14.69 12.3201 14.69 12.7101 14.3L15.3001 11.71C15.9301 11.08 15.4801 10 14.5901 10H9.41005C8.52005 10 8.08005 11.08 8.71005 11.71Z" />
+    </Svg>
+  );
+};
+
+export default Icon;

src/components/Svg/Icons/ArrowDropUp.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Svg from "../Svg";
+import { SvgProps } from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path d="M8.71005 12.29L11.3001 9.69997C11.6901 9.30997 12.3201 9.30997 12.7101 9.69997L15.3001 12.29C15.9301 12.92 15.4801 14 14.5901 14H9.41005C8.52005 14 8.08005 12.92 8.71005 12.29Z" />
+    </Svg>
+  );
+};
+
+export default Icon;

src/components/Svg/Icons/Cog.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import Svg from "../Svg";
+import { SvgProps } from "../types";
+
+const Icon: React.FC<SvgProps> = (props) => {
+  return (
+    <Svg viewBox="0 0 24 24" {...props}>
+      <path d="M19.43 12.98C19.47 12.66 19.5 12.34 19.5 12C19.5 11.66 19.47 11.34 19.43 11.02L21.54 9.37C21.73 9.22 21.78 8.95 21.66 8.73L19.66 5.27C19.54 5.05 19.27 4.97 19.05 5.05L16.56 6.05C16.04 5.65 15.48 5.32 14.87 5.07L14.49 2.42C14.46 2.18 14.25 2 14 2H9.99996C9.74996 2 9.53996 2.18 9.50996 2.42L9.12996 5.07C8.51996 5.32 7.95996 5.66 7.43996 6.05L4.94996 5.05C4.71996 4.96 4.45996 5.05 4.33996 5.27L2.33996 8.73C2.20996 8.95 2.26996 9.22 2.45996 9.37L4.56996 11.02C4.52996 11.34 4.49996 11.67 4.49996 12C4.49996 12.33 4.52996 12.66 4.56996 12.98L2.45996 14.63C2.26996 14.78 2.21996 15.05 2.33996 15.27L4.33996 18.73C4.45996 18.95 4.72996 19.03 4.94996 18.95L7.43996 17.95C7.95996 18.35 8.51996 18.68 9.12996 18.93L9.50996 21.58C9.53996 21.82 9.74996 22 9.99996 22H14C14.25 22 14.46 21.82 14.49 21.58L14.87 18.93C15.48 18.68 16.04 18.34 16.56 17.95L19.05 18.95C19.28 19.04 19.54 18.95 19.66 18.73L21.66 15.27C21.78 15.05 21.73 14.78 21.54 14.63L19.43 12.98ZM12 15.5C10.07 15.5 8.49996 13.93 8.49996 12C8.49996 10.07 10.07 8.5 12 8.5C13.93 8.5 15.5 10.07 15.5 12C15.5 13.93 13.93 15.5 12 15.5Z" />
+    </Svg>
+  );
+};
+
+export default Icon;

src/components/Svg/Icons/Logo.tsx

@@ -4,29 +4,29 @@ import { SvgProps } from "../types";
 
 const Icon: React.FC<SvgProps> = (props) => {
   return (
-    <Svg viewBox="0 0 25 26" {...props}>
+    <Svg viewBox="0 0 32 32" {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M4.38998 4.50021C4.01476 2.49093 5.55649 0.634644 7.60049 0.634644C9.40427 0.634644 10.8665 2.09689 10.8665 3.90066V7.92716C11.3177 7.89532 11.7761 7.87898 12.2404 7.87898C12.6865 7.87898 13.1272 7.89406 13.5612 7.92348V3.90066C13.5612 2.09689 15.0234 0.634644 16.8272 0.634644C18.8712 0.634644 20.4129 2.49094 20.0377 4.50021L19.1539 9.23314C22.1872 10.5574 24.4809 12.8576 24.4809 15.7478V17.4965C24.4809 19.8733 22.9085 21.8633 20.7102 23.2067C18.4948 24.5605 15.4978 25.3653 12.2404 25.3653C8.98304 25.3653 5.98604 24.5605 3.77065 23.2067C1.57242 21.8633 0 19.8733 0 17.4965V15.7478C0 12.8729 2.2701 10.5816 5.27785 9.25465L4.38998 4.50021ZM18.0212 9.85496L19.0555 4.31678C19.3159 2.92223 18.2459 1.63386 16.8272 1.63386C15.5753 1.63386 14.5604 2.64874 14.5604 3.90066V9.02467C14.2324 8.9826 13.8991 8.94928 13.5612 8.92512C13.128 8.89413 12.6873 8.8782 12.2404 8.8782C11.7753 8.8782 11.3168 8.89547 10.8665 8.929C10.5286 8.95417 10.1953 8.98849 9.86729 9.03157V3.90066C9.86729 2.64874 8.85241 1.63386 7.60049 1.63386C6.18184 1.63386 5.11179 2.92223 5.37222 4.31678L6.40988 9.87333C3.16599 11.0783 0.999219 13.2584 0.999219 15.7478V17.4965C0.999219 21.2905 6.03208 24.3661 12.2404 24.3661C18.4488 24.3661 23.4817 21.2905 23.4817 17.4965V15.7478C23.4817 13.2457 21.2927 11.0561 18.0212 9.85496Z"
+        d="M5.84199 5.00181C5.35647 2.40193 7.35138 0 9.9962 0C12.3302 0 14.2222 1.89206 14.2222 4.22603V9.43607C14.806 9.39487 15.3992 9.37374 16 9.37374C16.5772 9.37374 17.1474 9.39324 17.709 9.43131V4.22603C17.709 1.89206 19.601 0 21.935 0C24.5798 0 26.5747 2.40193 26.0892 5.00181L24.9456 11.1259C28.8705 12.8395 31.8384 15.8157 31.8384 19.5556V21.8182C31.8384 24.8936 29.8038 27.4686 26.9594 29.2068C24.0928 30.9586 20.2149 32 16 32C11.7851 32 7.90719 30.9586 5.04062 29.2068C2.19624 27.4686 0.161621 24.8936 0.161621 21.8182V19.5556C0.161621 15.8355 3.09899 12.8708 6.99084 11.1538L5.84199 5.00181ZM23.48 11.9305L24.8183 4.76446C25.1552 2.96 23.7707 1.29293 21.935 1.29293C20.3151 1.29293 19.0019 2.60612 19.0019 4.22603V10.8562C18.5774 10.8018 18.1462 10.7586 17.709 10.7274C17.1484 10.6873 16.5782 10.6667 16 10.6667C15.3982 10.6667 14.8049 10.689 14.2222 10.7324C13.785 10.765 13.3537 10.8094 12.9293 10.8651V4.22603C12.9293 2.60612 11.6161 1.29293 9.9962 1.29293C8.16055 1.29293 6.77597 2.96 7.11295 4.76446L8.45562 11.9543C4.25822 13.5135 1.45455 16.3344 1.45455 19.5556V21.8182C1.45455 26.7274 7.96677 30.7071 16 30.7071C24.0332 30.7071 30.5455 26.7274 30.5455 21.8182V19.5556C30.5455 16.318 27.7131 13.4847 23.48 11.9305Z"
         fill="#633001"
       />
       <path
-        d="M23.4817 17.4966C23.4817 21.2906 18.4488 24.3662 12.2405 24.3662C6.03213 24.3662 0.999268 21.2906 0.999268 17.4966V15.7479H23.4817V17.4966Z"
+        d="M30.5455 21.8183C30.5455 26.7275 24.0333 30.7072 16 30.7072C7.96681 30.7072 1.45459 26.7275 1.45459 21.8183V19.5557H30.5455V21.8183Z"
         fill="#FEDC90"
       />
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.37227 4.31683C5.11184 2.92228 6.18189 1.63391 7.60054 1.63391C8.85246 1.63391 9.86734 2.64879 9.86734 3.90071V9.03162C10.6324 8.93115 11.4263 8.87825 12.2405 8.87825C13.0358 8.87825 13.8118 8.92872 14.5605 9.02472V3.90071C14.5605 2.64879 15.5753 1.63391 16.8272 1.63391C18.2459 1.63391 19.316 2.92228 19.0555 4.31683L18.0213 9.85501C21.2928 11.0561 23.4817 13.2458 23.4817 15.7479C23.4817 19.5419 18.4488 22.6175 12.2405 22.6175C6.03213 22.6175 0.999268 19.5419 0.999268 15.7479C0.999268 13.2585 3.16604 11.0783 6.40993 9.87338L5.37227 4.31683Z"
+        d="M7.11298 4.7645C6.77601 2.96004 8.16058 1.29297 9.99624 1.29297C11.6161 1.29297 12.9293 2.60616 12.9293 4.22607V10.8652C13.9192 10.7351 14.9466 10.6667 16 10.6667C17.0291 10.6667 18.0333 10.732 19.0019 10.8562V4.22607C19.0019 2.60616 20.3151 1.29297 21.935 1.29297C23.7707 1.29297 25.1553 2.96004 24.8183 4.7645L23.4801 11.9306C27.7131 13.4847 30.5455 16.318 30.5455 19.5556C30.5455 24.4648 24.0333 28.4445 16 28.4445C7.96681 28.4445 1.45459 24.4648 1.45459 19.5556C1.45459 16.3345 4.25826 13.5135 8.45566 11.9543L7.11298 4.7645Z"
         fill="#D1884F"
       />
       <path
-        d="M9.11792 15.2482C9.11792 16.2829 8.55871 17.1217 7.8689 17.1217C7.17908 17.1217 6.61987 16.2829 6.61987 15.2482C6.61987 14.2134 7.17908 13.3746 7.8689 13.3746C8.55871 13.3746 9.11792 14.2134 9.11792 15.2482Z"
+        d="M11.9595 18.9091C11.9595 20.248 11.2359 21.3333 10.3433 21.3333C9.45075 21.3333 8.72717 20.248 8.72717 18.9091C8.72717 17.5702 9.45075 16.4849 10.3433 16.4849C11.2359 16.4849 11.9595 17.5702 11.9595 18.9091Z"
         fill="#633001"
       />
       <path
-        d="M17.7361 15.2482C17.7361 16.2829 17.1769 17.1217 16.4871 17.1217C15.7972 17.1217 15.238 16.2829 15.238 15.2482C15.238 14.2134 15.7972 13.3746 16.4871 13.3746C17.1769 13.3746 17.7361 14.2134 17.7361 15.2482Z"
+        d="M23.1111 18.9091C23.1111 20.248 22.3875 21.3333 21.4949 21.3333C20.6024 21.3333 19.8788 20.248 19.8788 18.9091C19.8788 17.5702 20.6024 16.4849 21.4949 16.4849C22.3875 16.4849 23.1111 17.5702 23.1111 18.9091Z"
         fill="#633001"
       />
     </Svg>

src/components/Svg/Svg.tsx

@@ -5,6 +5,7 @@ import { SvgProps } from "./types";
 
 const Svg = styled.svg<SvgProps>`
   fill: ${({ theme, color }) => getThemeValue(`colors.${color}`, color)(theme)};
+  flex-shrink: 0;
   ${space}
 `;
 

src/components/Svg/index.tsx

@@ -1,6 +1,8 @@
 export { default as AddIcon } from "./Icons/Add";
-export { default as ArrowForwardIcon } from "./Icons/ArrowForward";
 export { default as ArrowDownIcon } from "./Icons/ArrowDown";
+export { default as ArrowDropDownIcon } from "./Icons/ArrowDropDown";
+export { default as ArrowDropUpIcon } from "./Icons/ArrowDropUp";
+export { default as ArrowForwardIcon } from "./Icons/ArrowForward";
 export { default as BinanceIcon } from "./Icons/Binance";
 export { default as BlockIcon } from "./Icons/Block";
 export { default as CardViewIcon } from "./Icons/CardView";
@@ -9,9 +11,9 @@ export { default as CheckmarkCircleIcon } from "./Icons/CheckmarkCircle";
 export { default as ChevronDownIcon } from "./Icons/ChevronDown";
 export { default as ChevronUpIcon } from "./Icons/ChevronUp";
 export { default as CloseIcon } from "./Icons/Close";
+export { default as CogIcon } from "./Icons/Cog";
 export { default as CommunityIcon } from "./Icons/Community";
 export { default as ErrorIcon } from "./Icons/Error";
-export { default as HamburgerIcon } from "./Icons/Hamburger";
 export { default as HelpIcon } from "./Icons/Help";
 export { default as InfoIcon } from "./Icons/Info";
 export { default as ListViewIcon } from "./Icons/ListView";

src/index.ts

@@ -21,12 +21,8 @@ export * from "./components/Toggle";
 export { default as useParticleBurst } from "./hooks";
 
 // Widgets
-export { default as Footer } from "./widgets/Footer";
 export * from "./widgets/Modal";
-
-export { default as Nav } from "./widgets/Nav";
-export type { NavProps, MenuLink, MenuDropdown } from "./widgets/Nav/types";
-
+export * from "./widgets/Menu";
 export * from "./widgets/WalletModal";
 
 // Theme

src/theme/dark.ts

@@ -4,7 +4,7 @@ import { dark as darkButton } from "../components/Button/theme";
 import { dark as darkCard } from "../components/Card/theme";
 import { dark as darkRadio } from "../components/Radio/theme";
 import { dark as darkToggle } from "../components/Toggle/theme";
-import { dark as darkNav } from "../widgets/Nav/theme";
+import { dark as darkNav } from "../widgets/Menu/theme";
 import { dark as darkModal } from "../widgets/Modal/theme";
 import base from "./base";
 import { darkColors } from "./colors";

src/theme/index.ts

@@ -3,7 +3,7 @@ import { ButtonTheme } from "../components/Button/types";
 import { CardTheme } from "../components/Card/types";
 import { RadioTheme } from "../components/Radio/types";
 import { ToggleTheme } from "../components/Toggle/types";
-import { NavTheme } from "../widgets/Nav/types";
+import { NavTheme } from "../widgets/Menu/types";
 import { ModalTheme } from "../widgets/Modal/types";
 import { Colors, Breakpoints, MediaQueries, Spacing, Shadows, Radii, ZIndices } from "./types";
 

src/theme/light.ts

@@ -4,7 +4,7 @@ import { light as lightButton } from "../components/Button/theme";
 import { light as lightCard } from "../components/Card/theme";
 import { light as lightRadio } from "../components/Radio/theme";
 import { light as lightToggle } from "../components/Toggle/theme";
-import { light as lightNav } from "../widgets/Nav/theme";
+import { light as lightNav } from "../widgets/Menu/theme";
 import { light as lightModal } from "../widgets/Modal/theme";
 import base from "./base";
 import { lightColors } from "./colors";