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

Question

当我在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>
)
}

当我切换侧边栏时，如果方法没有太大差异，我也想伸缩/最小化主页面的大小。我很感激任何帮助和想法。谢谢你

Answer 1

您可以在侧边栏打开时为导航栏的包装器设置左填充，并在侧边栏关闭时删除它。

这是一个导航条示例。