feat: add Menu List Example

src/pages/examples/[folder].tsx

@@ -1,6 +1,6 @@
 import fs from 'fs'
 import path from 'path'
-import ListExample from 'views/Examples/ListExample'
+import ListExample from 'views/Examples/ListExample/ListExample'
 
 function readDirExamples(dir) {
   const filePath = [process.cwd(), 'src', 'examples', dir].join('/')

src/views/Examples/ListExample/ListExample.module.scss

@@ -0,0 +1,7 @@
+#anchor {
+  :global {
+    .ant-anchor-wrapper .ant-anchor-link:not(.ant-anchor-link-active) {
+      display: none;
+    }
+  }
+}

src/views/Examples/ListExample.tsx → src/views/Examples/ListExample/ListExample.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import Content from 'components/Content/Content'
-import { Anchor, Col, Row } from 'antd'
-import DemoIndex from 'views/Examples/DemoIndex'
+import { Col, Row } from 'antd'
+import DemoIndex from 'views/Examples/ListExample/partials/DemoIndex'
 import Head from 'next/dist/next-server/lib/head'
 import Title from 'components/Typography/Title'
 import Text from 'components/Typography/Text'
+import MenuList from 'views/Examples/ListExample/partials/MenuList'
 
-interface ListExampleProps {
+export interface ListExampleProps {
   index: {
     title: string
     description: string
@@ -67,18 +68,10 @@ function ListExample(props: ListExampleProps) {
         >
           {metaData?.children}
         </Text>
-        <Title>Examples</Title>
+
+        <MenuList {...props} />
 
         <Row gutter={[0, 15]}>
-          <Col xs={24}>
-            <Anchor>
-              {index.map((item) => {
-                return (
-                  <Anchor.Link href={`#${item.filename}`} title={item.title} />
-                )
-              })}
-            </Anchor>
-          </Col>
           {index.map((item) => {
             return (
               <Col xs={24} key={item.filename}>

src/views/Examples/ListExample/partials/MenuList.tsx

@@ -0,0 +1,69 @@
+import React, { useMemo } from 'react'
+import { Anchor, Button, Col, Drawer, Row } from 'antd'
+import MenuOutlined from '@ant-design/icons/lib/icons/MenuOutlined'
+import Title from 'components/Typography/Title'
+import cssListExample from 'views/Examples/ListExample/ListExample.module.scss'
+import { ListExampleProps } from 'views/Examples/ListExample/ListExample'
+import useToggle from 'hooks/useToggle'
+
+function MenuList(props: ListExampleProps) {
+  const { index } = props
+  const stateDrawer = useToggle()
+
+  const elAnchor = useMemo(() => {
+    return (
+      <Anchor targetOffset={10}>
+        {index.map((item) => {
+          return (
+            <Anchor.Link
+              href={`#${item.filename}`}
+              key={item.filename}
+              title={item.title}
+            />
+          )
+        })}
+      </Anchor>
+    )
+  }, [])
+
+  return (
+    <React.Fragment>
+      <div
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'white',
+          padding: '5px 0',
+        }}
+      >
+        <Row align={'middle'} gutter={[10, 0]}>
+          <Col flex={'none'}>
+            <Button
+              icon={<MenuOutlined />}
+              onClick={() => stateDrawer.toggle()}
+            />
+          </Col>
+          <Col flex={'auto'}>
+            <Title noMargin>Examples</Title>
+          </Col>
+          <Col id={cssListExample.anchor} flex={'none'}>
+            {elAnchor}
+          </Col>
+        </Row>
+      </div>
+
+      <Drawer
+        title="Examples"
+        placement={'left'}
+        closable={false}
+        onClose={() => stateDrawer.untoggle()}
+        visible={stateDrawer.isToggled}
+      >
+        {elAnchor}
+      </Drawer>
+    </React.Fragment>
+  )
+}
+
+export default MenuList