Блог

Я сделал навигацию, которая работает в html и css, но когда я добавил в нее react, она не работала, а также я не могу добавить скрипт в файл, но он не работал. Я использовал шлем react, но и он мне не помог. На самом деле, когда я добавил навигационную панель начальной загрузки, это также не помогло мне. Поскольку я сталкиваюсь с проблемой, когда я добираюсь до px ниже 800, он показывает опцию меню гамбургеров, но когда я нажимаю на нее, меню не отображается . Еще одна вещь, когда он всегда показывает главное меню при низком px

это мой код JSX

  import React from 'react'
import './Heading.css'
import MenuIcon from '@material-ui/icons/Menu';
import Nav_items from './Nav_items'
import Nav_icons from './Nav_icons'
import useDocumentTitle from '../Document'
const Heading = () => {
    useDocumentTitle('Home')
    return (
       
        <div>
           <nav class="nav">
        <div class="nav-menu flex-row">
            <div class="nav-brand">
                <a href="/" class="text-gray" >NOOB-GEEKS</a>
            </div>
            <div class="toggle-collapse">
                <div class="toggle-icon"> 
                    <MenuIcon/>
                </div>
            </div>
            <div>
              <Nav_items/>
            
            </div>
           <Nav_icons/>
        </div>
    </nav>
   
        </div>
    )
   
    
}

export default Heading
 

это мои компоненты nav_items и nav_icons

 import React from 'react'
import { NavLink } from 'react-router-dom';

const Nav_items = () => {
    return (
        <div className="nav-items">
                    
                <NavLink activeClassName='nav-link' to="/">Home</NavLink>
                <NavLink className='nav-link' to="/category">Category</NavLink>
                <NavLink className='nav-link' to="/pages">Pages</NavLink>
                <NavLink className='nav-link' to="/archives">Archives</NavLink>
                <NavLink className='nav-link' to="/contact-us">Contact us</NavLink>
                <NavLink className='nav-link' to="/log-in">Log-in/Sign-up</NavLink>
               
                </div>
    )
}

export default Nav_items

 

 import React from 'react'
import FacebookIcon from '@material-ui/icons/Facebook';
import InstagramIcon from '@material-ui/icons/Instagram';
import LinkedInIcon from '@material-ui/icons/LinkedIn';
import TwitterIcon from '@material-ui/icons/Twitter';
import YouTubeIcon from '@material-ui/icons/YouTube';
const Nav_icons = () => {
    return (
        <div class="nav-social text-gray">
                <a href="" target='_blank' ><FacebookIcon/></a>
                <a href="" target='_blank'><InstagramIcon/></a>
                <a href="" target='_blank'><TwitterIcon/></a>
                <a href="" target='_blank'><LinkedInIcon/></a>
                <a href="" target='_blank'><YouTubeIcon/></a>
            </div>
    )
}

export default Nav_icons

 

this is my css code

 
.nav{
    background: white;
    padding: 0 2rem;
    height:0rem;
    min-height: 10vh;
    overflow:hidden;
    transition:height 1s ease-in-out ;
    border-bottom: 1px solid #d3d3d3;
}
.nav .nav-menu{

   justify-content: space-between;
}
.nav .toggle-collapse{
    position: absolute;
    top: 0%;
    width: 90%;
    cursor: pointer;
    display: none;
}
.nav .toggle-collapse .toggle-icon{
    display: flex;
    justify-content: flex-end;
    padding: 1.7rem 0;
}

nav.toggle-collapse .toggle-icon div{
font-size: 1.4rem;
color: var(--text-gray);
}
.collapse{
    height: 30rem;
}
.nav .nav-items{
   
    display: flex;
    margin: 0;
}
.nav .nav-items .nav-link{
    padding: 1.6rem 1rem;
    font-size: 1.1rem;
    position: relative;
    font-family: var(--Livvic);
    font-size: 1.1rem;
}
.nav .nav-items .nav-link:hover{
    background-color: var(--midnight);
}
.nav .nav-items  .nav-link:hover{
  color:var(--white);
}

.nav .nav-brand {
    font-size: 1.6rem;
    padding: 1rem 0;
    display: block;
    font-family: var(--Lexend);
    font-size: 1.6rem;
 }
.nav-social{
    padding: 1.4rem 0;
}
.nav-social a{
    padding: 0 .2rem;
}
.nav-social a:hover{
    color: #a1c4cf;
}
@media only screen and (max-width:800px) {
    .nav .nav-menu, .nav .nav-items{
        flex-direction: column;

    }
    .nav .toggle-collapse{
        display: initial;
    }
}
 

это мой сценарий, который я могу добавить

 $(document).ready(function() {`
    $nav = $('.nav');
    $toggleCollapse = $('.toggle-collapse');

    $toggleCollapse.click(function () {
        $nav.toggleClass('collapse');
        
    })
    //owl caraousel
    $('.owl-carousel').owlCarousel({
        loop: true,
        autoplay:true,
        autoplayTimeout:3000 ,
        dots:false,
        nav:true,
        navText:[$('.owl-navigation .owl-nav-prev'),$('.owl-navigation  .owl-nav-next')]
    });
`});
 

Пожалуйста, помогите…Как я снова говорю, моя проблема в том, что мое меню не открывается, когда я нажимаю на него

Чтобы переключиться в React, вам не нужен jQuery. Чтобы добавить или удалить класс в React, вы можете использовать следующий пример.

 const Heading = () => {
    useDocumentTitle('Home')
    //create a open state (true / false)
    const [ open, setOpen ] = useState(false);

    //a simple toggle function that switches between true/false
    const toggle = () => setOpen(!open)
    return (
       
        <div>
           // here we add the 'collapse' class when it's false
           <nav class={`nav ${ open ? '' : 'collapse' }`}>
        <div class="nav-menu flex-row">
            <div class="nav-brand">
                <a href="/" class="text-gray" >NOOB-GEEKS</a>
            </div>
            <div class="toggle-collapse">
                //here u can use a onClick event to toggle true/false
                <div class="toggle-icon" onClick={toggle} > 
                    <MenuIcon/>
                </div>
            </div>
            <div>
              <Nav_items/>
            
            </div>
           <Nav_icons/>
        </div>
    </nav>
   
        </div>
    )
   
    
}

export default Heading
 

Я не использую bootstrap, поэтому я не знаю, куда добавлять конкретные классы, вы должны разработать эту часть самостоятельно.