“This is the 14th day of my participation in the First Challenge 2022.

Project source: gitee.com/yang-yiming…

This article implements the left navigation component

new

Create components under the MainMenu folder to store components. Let’s name this component MainItem

MenuItem/index.tsx

The following Iprops is the TS syntax, which defines the data type of props.

• Name is a string that corresponds to ongoing, I’m handling, etc.
• Count is numeric and corresponds to the number in progress.
• The React node icon corresponds to the icon element, which we won’t add yet.
• Active is a Boolean that corresponds to the active state of a click.
• OnClick is a function of type null return value, corresponding to the click event.

import { ReactNode } from 'react';
import styles from './index.less';
interface Iprops{
    name:string,
    count:number, icon? :ReactNode,active:boolean,
    onClick:() = >void
}
export default function MenuItem(props:Iprops) {
    const {name,count,icon,active,onClick} = props
  return (
    <button className={` ${styles.menu_item} ${active?styles.active:"'} `}onClick={onClick}>
      <span className={styles.menu_item_name}>{name}</span>
      <span className={styles.menu_item_count}>{count}</span>
    </button>
  );
}
Copy the code

Reference the MenuItem component

import MenuItem from './components/MenuItem';
import styles from './index.less';

export default function MainMenu() {
  return (
    <div className={styles.main_menu}>
      <h1 className={styles.title}>The main menu</h1>// Pass the dead argument first<MenuItem name={'test'}onClick={()= >console.log('test')} count={1}/>
    </div>
  );
}
Copy the code

Because I’m using a native Button, the style is a little ugly.

To change the style

MainMenu

The container MainMenu for MainItem should be modified first.

MainMenu/index.less

Let main_menu inside also flex layout, vertical orientation.

.main_menu {
  background: rgb(121.242.157);
  width: 20%;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  padding: 4px;
}
Copy the code

Remove the background color of main_menu

MenuItem/index.less

Add styles to buttons

.menu_item{/ / shadowbox-shadow: 0 0 1px 1px #dddadaad;
  background: white;
  border: 0;
  padding: 6px 10px;
  border-radius: 2px; // A hand appears when you hover over the mousecursor: pointer; // Animation effecttransition: all .4s cubic-bezier(.215.610.355.1); // Align text lefttext-align: left; // Change menu_item_count to absoluteposition: relative; // Spacing at the bottom of each buttonmargin-bottom: 8px; // Hover style &:hover {
    box-shadow: 0 0 2px 2px #c2bfbfad;
  }

  .menu_item_count{// Absolute positionposition: absolute;
    background: rgb(236.69.69);
    width: 20px;
    text-align: center;
    border-radius: 50%;
    line-height: 20px; // According to the right distanceright: 10px;
    color: white;
    font-weight: bold;
    font-size: 12px; }} // Click the button's active state.active {
  background-color: #edf4fe;

  .menu_item_name {
    color: #3372fe;
    font-weight: bolder; }}Copy the code

Results the following

A dynamic variable generates a MenuItem

The new config. TSX

Store MenuItem data

const config = [
    {
        name:'in progress'.key:'doing'.count:1
    },
    {
        name:'Done'.key:'done'.count:10}]export default config;
Copy the code

MainMenu/index.tsx

Dynamically render MenuItem components.

import { useState } from 'react';
import MenuItem from './components/MenuItem';
import config from './config';
import styles from './index.less';

export default function MainMenu() {
  const [activeKy,setActiveKey] = useState('doing');
  return (
    <div className={styles.main_menu}>
      <h1 className={styles.title}>The main menu</h1>
      {
        config.map((item)=>(
          <MenuItem name={item.name} active={activeKy= =item.key} onClick={()= >setActiveKey(item.key)} count={item.count} key={item.key}/>
        ))
      }
    </div>
  );
}
Copy the code

Here’s a question:

// Use curly braces to write return
map((item= >{return <div>11</div>}))
// Use curly braces to write return
map((item= >(<div>11</div>)))
Copy the code