切换侧边栏时如何在导航栏中移动/动画文本值

Posted 2023-03-05

【中文标题】切换侧边栏时如何在导航栏中移动/动画文本值

【英文标题】：How to move/animate text values in navbar when I toggle the sidebar

【发布时间】：2021-12-06 04:46:09

【问题描述】：

当我在 ReactJS 中打开/关闭侧边栏时，如何调整导航栏的内容？在我当前的网站中，我的侧边栏与导航栏重叠，所以当我打开它时，超过一半的标题被覆盖（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>
    )

如果操作方法没有太大差异，我还想在切换侧边栏时灵活/最小化主页的大小。我将不胜感激任何帮助和想法。谢谢

【参考方案1】：

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

这是一个例子navbar。

【讨论】：

这很好用，尤其是当我也为它添加了一个过渡。谢谢！