subMenu 1st

src/App.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import Button from "./components/Button/button";
 import Menu from "./components/Menu/menu";
 import MenuItem from "./components/Menu/menuItem";
+import SubMenu from "./components/Menu/subMenu";
 
 function App() {
   return (
@@ -14,10 +15,14 @@ function App() {
           onSelect={(index) => {
             alert(index);
           }}
-          mode="vertical"
+          // mode="vertical"
         >
           <MenuItem>cool link1</MenuItem>
           <MenuItem disabled>cool link2</MenuItem>
+          <SubMenu title="dropdown">
+            <MenuItem>down1</MenuItem>
+            <MenuItem>我是下拉菜单1</MenuItem>
+          </SubMenu>
           <MenuItem>cool link3</MenuItem>
           {/* <li></li> */}
         </Menu>

src/components/Menu/_style.scss

@@ -26,7 +26,66 @@
         $menu-item-active-color;
     }
   }
+  .submenu-item {
+    position: relative;
+    .submenu-title {
+      display: flex;
+      align-items: center;
+    }
+    .arrow-icon {
+      transition: transform 0.25s ease-in-out;
+      margin-left: 3px;
+    }
+    &:hover {
+      .arrow-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  .is-vertical {
+    .arrow-icon {
+      transform: rotate(0deg) !important;
+    }
+  }
+  .is-vertical.is-opened {
+    .arrow-icon {
+      transform: rotate(180deg) !important;
+    }
+  }
+  .fish-submenu {
+    //display: none;
+    list-style: none;
+    padding-left: 0;
+    white-space: nowrap;
+    //transition: $menu-transition;
+    .menu-item {
+      padding: $menu-item-padding-y $menu-item-padding-x;
+      cursor: pointer;
+      transition: $menu-transition;
+      color: $body-color;
+      &.is-active,
+      &:hover {
+        color: $menu-item-active-color !important;
+      }
+    }
+  }
+}
+
+.menu-horizontal {
+  > .menu-item {
+    border-bottom: $menu-item-active-border-width solid transparent;
+  }
+  .fish-submenu {
+    position: absolute;
+    background: $white;
+    z-index: 100;
+    top: calc(100% + 8px);
+    left: 0;
+    border: $menu-border-width solid $menu-border-color;
+    box-shadow: $submenu-box-shadow;
+  }
 }
+
 .menu-vertical {
   flex-direction: column;
   border-bottom: 0px;

src/components/Menu/menu.tsx

@@ -24,6 +24,7 @@ export const Menu: React.FC<MenuProps> = (props) => {
   const [currentActive, setActive] = useState(defaultIndex);
   const classes = classNames("fish-menu", className, {
     "menu-vertical": mode === "vertical",
+    "menu-horizontal": mode !== "vertical",
   });
   const handleClick = (index: number) => {
     setActive(index);
@@ -42,7 +43,7 @@ export const Menu: React.FC<MenuProps> = (props) => {
       const childElement =
         child as React.FunctionComponentElement<MenuItemProps>; //类型断言
       const { displayName } = childElement.type;
-      if (displayName === "MenuItem") {
+      if (displayName === "MenuItem" || displayName === "SubMenu") {
         return React.cloneElement(childElement, { index });
       } else {
         console.error(

src/components/Menu/subMenu.tsx

@@ -0,0 +1,42 @@
+import React, { useContext, FunctionComponentElement } from "react";
+import { MenuContext } from "./menu";
+import classNames from "classnames";
+import { MenuItemProps } from "./menuItem";
+
+export interface SubMenuProps {
+  index?: number;
+  title: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const SubMenu: React.FC<SubMenuProps> = (props) => {
+  const { index, title, className, children } = props;
+  const context = useContext(MenuContext);
+  const classes = classNames("menu-item submenu-item", className, {
+    "is-active": context.index === index,
+  });
+
+  const renderChildren = () => {
+    const childrenComponent = React.Children.map(children, (child, i) => {
+      const childElement = child as FunctionComponentElement<MenuItemProps>;
+      if (childElement.type.displayName === "MenuItem") {
+        return childElement;
+      } else {
+        console.error(
+          "Warning: SubMenu has a child which is not a MenuItem component"
+        );
+      }
+    });
+    return <ul className="fish-submenu">{childrenComponent}</ul>;
+  };
+  return (
+    <li key={index} className={classes}>
+      <div className="submenu-title">{title}</div>
+      {renderChildren()}
+    </li>
+  );
+};
+
+SubMenu.displayName = "SubMenu";
+export default SubMenu;

src/styles/_variables.scss

@@ -222,3 +222,8 @@ $menu-item-padding-x: 1rem !default;
 $menu-item-active-color: $primary !default;
 $menu-item-active-border-width: 2px !default;
 $menu-item-disabled-color: $gray-600 !default;
+
+//sub-menu
+//submenu
+$submenu-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
+  0 0 6px 0 rgba(0, 0, 0, 0.04);