切换侧边栏时如何 move/animate 导航栏中的文本值

Question

在 ReactJS 中切换侧边栏 on/off 时如何调整导航栏的内容？在我当前的网站中，我的侧边栏与导航栏重叠，所以当我打开它时，超过一半的标题被覆盖 (sample1, sample2)

这是我的Navbar.js

import React, { useState } from 'react'
import {Navbar, Container} from 'react-bootstrap'
import { Link } from 'react-router-dom';
import { useAuth } from "../contexts/AuthContext"
import './styles/styles.css';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import { IconContext } from 'react-icons';
import { SidebarItem } from './SidebarItem';

export default function Navubaru({component: Component, ...rest}) {
    const { currentUser } = useAuth()
    const [sidebar, setSidebar] = useState(false);

    const showSidebar = () => setSidebar(!sidebar);
    return (
        <div>
            
    <Navbar bg="myColor" variant="dark">
    <IconContext.Provider value={{ color: '#fff' }}>
        <Link to='#' className='menu-bars'>
              <FaIcons.FaBars onClick={showSidebar} />
        </Link>
        <nav className={sidebar ? 'nav-menu active' : 'nav-menu'}>
            <ul className='nav-menu-items' onClick={showSidebar}>
              <li className='navbar-toggle'>
                <Link to='#' className='menu-bars'>
                  <AiIcons.AiOutlineClose />
                </Link>
              </li>
              {SidebarItem.map((item, index) => {
                return (
                  <li key={index} className={item.cName}>
                    <Link to={item.path}>
                      {item.icon}
                      <span>{item.title}</span>
                    </Link>
                  </li>
                );
              })}
            </ul>
          </nav>
        
    
    
    </IconContext.Provider>
    <Container>
    
    <Navbar.Brand href="/">Welcome to my Website</Navbar.Brand>
    <Navbar.Toggle />
    <Navbar.Collapse className="justify-content-end">
      <Navbar.Text>
        Signed in as: <a href="/">{currentUser && currentUser.email}</a>
      </Navbar.Text>
    </Navbar.Collapse>
    </Container>
    </Navbar>
    </div>
    )
}

我还想flex/minimize切换侧边栏时主页的大小，如果这样做的方法没有太大区别的话。我将不胜感激任何帮助和想法。谢谢

Answer 1

您可以在侧边栏打开时将 padding-left 设置为导航栏的包装器，并在侧边栏关闭时将其移除。

这是一个例子navbar。

切换侧边栏时如何 move/animate 导航栏中的文本值

How to move/animate text values in navbar when I toggle the sidebar

html

css

frontend

reactjs

react-bootstrap