markdown 侧边菜单，悬停，图标

Posted 2021-05-05

with styled-component and material-ui

```tsx
import React from "react";
import { ReportablesNav } from "src/navigation/ReportablesNav";
import { PersonsNav } from "src/navigation/PersonsNav";
import { RitesNav } from "src/navigation/RitesNav";
import AssignmentIcon from "@material-ui/icons/Assignment";
import PeopleIcon from "@material-ui/icons/People";
import SpaIcon from "@material-ui/icons/Spa";
import styled, { css } from "styled-components";

const FlexCol = styled.div`
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  &:first-child {
    margin-top: 15px;
  }
`;

//reset Nav styles
const resetDeco = css`
  text-decoration: none;
`;

//hover effect
const effect = css`
  color: #c8d1da;
  transition: all 0.2s ease-in-out;
  :hover {
    color: #8e94f7;
    transform: scale(1.2);
  }
`;

//Wrap small Icon into bigger element. so that hover action can be reached easier.
const Wrapper = styled.div`
  /* make the clickable area bigger */
  padding: 15px;

  /* hovering effect */
  ${effect}

  /* to each Icon */
  & > * {
    ${resetDeco}
  }
`;

const SideMenu = () => {
  return (
    <FlexCol>
      <ReportablesNav>
        <Wrapper>
          <AssignmentIcon />
        </Wrapper>
      </ReportablesNav>
      <PersonsNav>
        <Wrapper>
          <PeopleIcon />
        </Wrapper>
      </PersonsNav>
      <RitesNav>
        <Wrapper>
          <SpaIcon />
        </Wrapper>
      </RitesNav>
    </FlexCol>
  );
};
export default SideMenu;
```