не могу создать вертикальное меню на телефоне в React - PullRequest
Новая
       100

не могу создать вертикальное меню на телефоне в React

0 голосов
/ 14 июля 2020

Я пытаюсь создать вертикально расположенные меню, когда ширина страницы уменьшается до размера телефона, я использую ширину: 100% в пунктах меню, чтобы это произошло, но, похоже, это не работает. вот мой код для компонента Menus 

import React, { Component } from 'react';
import { Menu, Row, Col } from 'antd';
import Profile from './Profile';
import Skills from './Skills';
import Contact from './Contact';
import Completed from './Completed';
import styled from 'styled-components';

const Styles= styled.div`
.menu-item{
    width: 25%;
    float:left;
}



@media only screen and (max-width: 768px) {
    .menu-item{
        width:100%;
    }
    
  }
  @media only screen and (max-width: 468px) {
    .menu-item{
        width:100%;
    }
  }


`

export default class Menus extends Component{
    state={
        showHideProfile: false,
        showHideSkills: false,
        showHideContact: false,
        showHideCompleted: false,
        current: 'profile'
    }

    handleClick = e => {
        console.log('click ', e);
        this.setState({ current: e.key });
        this.hideComponent(e.key);
      };

    hideComponent= (name) => {
        console.log(name);
        switch(name){
            case "profile":
                this.setState({
                    showHideProfile: !this.state.showHideProfile,
                    showHideSkills:false,
                    showHideContact: false,
                    showHideCompleted: false
                });
                break;
            case "skills":
                this.setState({
                    showHideProfile: false,
                    showHideSkills: !this.state.showHideSkills,
                    showHideContact: false,
                    showHideCompleted: false
                });
                break;
            case "contact":
                this.setState({
                    showHideProfile: false,
                    showHideSkills: false,
                    showHideContact: !this.state.showHideContact,
                    showHideCompleted: false
                });
                break;
            case "completed":
                this.setState({
                    showHideProfile: false,
                    showHideSkills: false,
                    showHideContact:false,
                    showHideCompleted: !this.state.showHideCompleted
                    });
                    break;
            default:
                null;
        }


    };

    render(){
        const { showHideProfile, showHideSkills, showHideContact, showHideCompleted, current} = this.state;
        return(
            <Styles>
            <Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
                <Menu.Item className="menu-item" key="profile">
                 Profile
                </Menu.Item>
                <Menu.Item className="menu-item" key="skills">
                Skills
                </Menu.Item>
                <Menu.Item className="menu-item" key="contact">
                Contact
                </Menu.Item>
                <Menu.Item className="menu-item" key="completed">
                Completed
                </Menu.Item>
                </Menu>
                <Row>
                    <Profile showHideProfile={showHideProfile}/>
                </Row>
                <Row>
                    <Skills showHideSkills={showHideSkills}/>
                </Row>
                <Row>
                    <Contact showHideContact={showHideContact}/>
                </Row>
                <Row>
                    <Completed showHideCompleted={showHideCompleted}/>
                </Row>

            </Styles>
            

        )
    }
}

Кроме того, когда я пытаюсь выровнять элементы меню с помощью Row, Col внутри меню, макет становится отзывчивым с использованием макета сетки, но меню становятся не кликабельными и теряются их функции могут помочь мне понять это. спасибо.

...