FixedNav 悬浮导航

import { FixedNav } from "@taroify/core"

const list = [
  {
    id: 1,
    text: "首页",
    icon: <WapHomeOutlined />,
  },
  {
    id: 2,
    text: "分类",
    icon: <AppsOutlined />,
  },
  {
    id: 3,
    text: "购物车",
    num: 2,
    icon: <ShoppingCartOutlined />,
  },
  {
    id: 4,
    text: "我的",
    icon: <UserOutlined />,
  },
]

const App = () => {
  const [open, setOpen] = useState(false)

  return <FixedNav open={open} onChange={setOpen} data={list} position={{ top: "150px" }} />
}

const list = [
  {
    id: 1,
    text: "首页",
    icon: <WapHomeOutlined />,
  },
  {
    id: 2,
    text: "分类",
    icon: <AppsOutlined />,
  },
  {
    id: 3,
    text: "购物车",
    num: 2,
    icon: <ShoppingCartOutlined />,
  },
  {
    id: 4,
    text: "我的",
    icon: <UserOutlined />,
  },
]

const App = () => {
  const [open, setOpen] = useState(false)

  return (
    <FixedNav
      open={open2}
      onChange={setOpen2}
      data={list}
      type="left"
      backdrop={false}
      position={{ top: "300px" }}
    />
  )
}

const CustomerFixedNav = () => {
  const [open, setOpen] = useState(false)

  return (
    <FixedNav
      open={open}
      onChange={setOpen}
      type="left"
      backdrop={false}
      position={{ top: "400px" }}
      content={
        <>
          <GiftOutlined color="#FFF" />
          <span className="fixed-nav-text">{open ? "开" : "关"}</span>
        </>
      }
    >
      <ul className="taroify-fixed-nav_content customer">
        <li className="taroify-fixed-nav_content_item">我</li>
        <li className="taroify-fixed-nav_content_item">是</li>
        <li className="taroify-fixed-nav_content_item">自</li>
        <li className="taroify-fixed-nav_content_item">定</li>
        <li className="taroify-fixed-nav_content_item">义</li>
      </ul>
    </FixedNav>
  )
}

.fixed-nav-demo {
  .fixed-nav-text {
    color: #fff;
    line-height: 26px;
    width: 48px;
    font-size: 24px;
  }

  .taroify-fixed-nav_content {
    &.customer {
      border-radius: 0 50px 50px 0;
      margin: 0;
      padding-left: 160px;
      padding-right: 40px;
      right: auto;
    }

    &_item {
      align-items: center;
      color: #1a1a1a;
      display: flex;
      flex: 1;
      flex-direction: column;
      flex-shrink: 0;
      height: 100%;
      justify-content: center;
      min-width: 100px;
      position: relative;
      font-size: 28px;
    }
  }
}