chore: Move menu components to a subfolder

src/widgets/Menu/Menu.tsx

@@ -4,12 +4,12 @@ import throttle from "lodash/throttle";
 import Overlay from "../../components/Overlay/Overlay";
 import Flex from "../../components/Box/Flex";
 import { useMatchBreakpoints } from "../../hooks";
-import Logo from "./Logo";
-import Panel from "./Panel";
-import UserBlock from "./UserBlock";
+import Logo from "./components/Logo";
+import Panel from "./components/Panel";
+import UserBlock from "./components/UserBlock";
 import { NavProps } from "./types";
+import Avatar from "./components/Avatar";
 import { MENU_HEIGHT, SIDEBAR_WIDTH_REDUCED, SIDEBAR_WIDTH_FULL } from "./config";
-import Avatar from "./Avatar";
 
 const Wrapper = styled.div`
   position: relative;

src/widgets/Menu/Accordion.tsx → src/widgets/Menu/components/Accordion.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-import { MENU_ENTRY_HEIGHT } from "./config";
+import { MENU_ENTRY_HEIGHT } from "../config";
 import { MenuEntry, LinkLabel } from "./MenuEntry";
-import { PushedProps } from "./types";
-import { ArrowDropDownIcon, ArrowDropUpIcon } from "../../components/Svg";
+import { PushedProps } from "../types";
+import { ArrowDropDownIcon, ArrowDropUpIcon } from "../../../components/Svg";
 
 interface Props extends PushedProps {
   label: string;

src/widgets/Menu/Avatar.tsx → src/widgets/Menu/components/Avatar.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import { Profile } from "./types";
-import NoProfileAvatar from "../../components/Svg/Icons/NoProfileAvatar";
+import { Profile } from "../types";
+import NoProfileAvatar from "../../../components/Svg/Icons/NoProfileAvatar";
 
 interface AvatarProps {
   profile: Profile;

src/widgets/Menu/Logo.tsx → src/widgets/Menu/components/Logo.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
-import { LogoIcon } from "../../components/Svg";
-import Flex from "../../components/Box/Flex";
-import { HamburgerIcon, HamburgerCloseIcon, LogoIcon as LogoWithText } from "./icons";
+import { LogoIcon } from "../../../components/Svg";
+import Flex from "../../../components/Box/Flex";
+import { HamburgerIcon, HamburgerCloseIcon, LogoIcon as LogoWithText } from "../icons";
 import MenuButton from "./MenuButton";
 
 interface Props {

src/widgets/Menu/MenuButton.tsx → src/widgets/Menu/components/MenuButton.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import Button from "../../components/Button/Button";
+import Button from "../../../components/Button/Button";
 
 const MenuButton = styled(Button)`
   color: ${({ theme }) => theme.colors.text};

src/widgets/Menu/MenuEntry.tsx → src/widgets/Menu/components/MenuEntry.tsx

@@ -1,5 +1,5 @@
 import styled, { keyframes, DefaultTheme } from "styled-components";
-import { MENU_ENTRY_HEIGHT } from "./config";
+import { MENU_ENTRY_HEIGHT } from "../config";
 
 export interface Props {
   secondary?: boolean;
@@ -53,7 +53,7 @@ const MenuEntry = styled.div<Props>`
   flex-shrink: 0;
 
   &.rainbow {
-    -webkit-background-clip: text;
+    background-clip: text;
     animation: ${rainbowAnimation} 3s ease-in-out infinite;
     background: ${({ theme }) => theme.colors.gradients.bubblegum};
     background-size: 400% 100%;

src/widgets/Menu/Panel.tsx → src/widgets/Menu/components/Panel.tsx

@@ -2,8 +2,8 @@ import React from "react";
 import styled from "styled-components";
 import PanelBody from "./PanelBody";
 import PanelFooter from "./PanelFooter";
-import { SIDEBAR_WIDTH_REDUCED, SIDEBAR_WIDTH_FULL } from "./config";
-import { PanelProps, PushedProps } from "./types";
+import { SIDEBAR_WIDTH_REDUCED, SIDEBAR_WIDTH_FULL } from "../config";
+import { PanelProps, PushedProps } from "../types";
 
 interface Props extends PanelProps, PushedProps {
   showMenu: boolean;

src/widgets/Menu/PanelBody.tsx → src/widgets/Menu/components/PanelBody.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import styled from "styled-components";
 import { useLocation } from "react-router-dom";
-import { SvgProps } from "../../components/Svg";
-import * as IconModule from "./icons";
+import { SvgProps } from "../../../components/Svg";
+import * as IconModule from "../icons";
 import Accordion from "./Accordion";
 import { MenuEntry, LinkLabel } from "./MenuEntry";
 import MenuLink from "./MenuLink";
-import { PanelProps, PushedProps } from "./types";
+import { PanelProps, PushedProps } from "../types";
 
 interface Props extends PanelProps, PushedProps {
   isMobile: boolean;

src/widgets/Menu/PanelFooter.tsx → src/widgets/Menu/components/PanelFooter.tsx

@@ -1,17 +1,17 @@
 import React from "react";
 import styled from "styled-components";
-import { PancakeRoundIcon, CogIcon, SvgProps } from "../../components/Svg";
-import Text from "../../components/Text/Text";
-import Flex from "../../components/Box/Flex";
-import Dropdown from "../../components/Dropdown/Dropdown";
-import Link from "../../components/Link/Link";
-import Skeleton from "../../components/Skeleton/Skeleton";
-import Button from "../../components/Button/Button";
-import IconButton from "../../components/Button/IconButton";
+import { PancakeRoundIcon, CogIcon, SvgProps } from "../../../components/Svg";
+import Text from "../../../components/Text/Text";
+import Flex from "../../../components/Box/Flex";
+import Dropdown from "../../../components/Dropdown/Dropdown";
+import Link from "../../../components/Link/Link";
+import Skeleton from "../../../components/Skeleton/Skeleton";
+import Button from "../../../components/Button/Button";
+import IconButton from "../../../components/Button/IconButton";
 import MenuButton from "./MenuButton";
-import * as IconModule from "./icons";
-import { socials, MENU_ENTRY_HEIGHT } from "./config";
-import { PanelProps, PushedProps } from "./types";
+import * as IconModule from "../icons";
+import { socials, MENU_ENTRY_HEIGHT } from "../config";
+import { PanelProps, PushedProps } from "../types";
 
 interface Props extends PanelProps, PushedProps {}
 

src/widgets/Menu/UserBlock.tsx → src/widgets/Menu/components/UserBlock.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import Button from "../../components/Button/Button";
-import { useWalletModal } from "../WalletModal";
-import { Login } from "../WalletModal/types";
+import Button from "../../../components/Button/Button";
+import { useWalletModal } from "../../WalletModal";
+import { Login } from "../../WalletModal/types";
 
 interface Props {
   account?: string;

src/widgets/Menu/index.stories.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import noop from "lodash/noop";
 import { BrowserRouter } from "react-router-dom";
 import Flex from "../../components/Box/Flex";
 import Heading from "../../components/Heading/Heading";
 import Text from "../../components/Text/Text";
+import { MenuEntry } from "./components/MenuEntry";
 import Menu from "./Menu";
-import { MenuEntry } from "./MenuEntry";
 import { LangType } from "./types";
 import { links } from "./config";
 
@@ -17,22 +17,51 @@ export default {
 
 const langs: LangType[] = [...Array(20)].map((_, i) => ({ code: `en${i}`, language: `English${i}` }));
 
+// This hook is used to simulate a props change, and force a re rendering
+const useProps = () => {
+  const [props, setProps] = useState({
+    account: "0xbdda50183d817c3289f895a4472eb475967dc980",
+    login: noop,
+    logout: noop,
+    isDark: false,
+    toggleTheme: noop,
+    langs,
+    setLang: noop,
+    currentLang: "EN",
+    cakePriceUsd: 0.023158668932877668,
+    links,
+    profile: null,
+  });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProps({
+        account: "0xbdda50183d817c3289f895a4472eb475967dc980",
+        login: noop,
+        logout: noop,
+        isDark: false,
+        toggleTheme: noop,
+        langs,
+        setLang: noop,
+        currentLang: "EN",
+        cakePriceUsd: 0.023158668932877668,
+        links,
+        profile: null,
+      });
+    }, 2000);
+    return () => {
+      clearInterval(interval);
+    };
+  }, []);
+
+  return props;
+};
+
 export const Connected: React.FC = () => {
+  const props = useProps();
   return (
     <BrowserRouter>
-      <Menu
-        account="0xbdda50183d817c3289f895a4472eb475967dc980"
-        login={noop}
-        logout={noop}
-        isDark={false}
-        toggleTheme={noop}
-        langs={langs}
-        setLang={noop}
-        currentLang="EN"
-        cakePriceUsd={0.23158668932877668}
-        links={links}
-        profile={null}
-      >
+      <Menu {...props}>
         <div>
           <Heading as="h1" mb="8px">
             Page body