ReactJS中切换侧边栏时导航栏文本动效实现、内容自适应调整及主页面缩放方案咨询

Hey there! Let's tackle that annoying sidebar-Navbar overlap issue and hit all your requirements with some straightforward code changes. I'll break this down step by step so you can follow along easily.

Step 1: Restructure Components & Fix Layout Overlap #

First, the root issue is that your sidebar was nested inside the Navbar, causing it to overlay content. Let's separate them and add state-driven styling to make the Navbar adapt when the sidebar toggles.

Update your Navbar.js like this:

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 className="app-container">
      {/* Sidebar moved outside the Navbar to avoid overlap */}
      <IconContext.Provider value={{ color: '#fff' }}>
        <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>

      {/* Wrapper for Navbar + page content */}
      <div className={`main-content ${sidebar ? 'sidebar-open' : ''}`}>
        <Navbar bg="myColor" variant="dark" className="navbar-custom">
          <Container className="navbar-container">
            {/* Keep menu toggle in the Navbar */}
            <Link to='#' className='menu-bars' onClick={showSidebar}>
              <FaIcons.FaBars />
            </Link>
            <Navbar.Brand href="/" className="navbar-brand">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>

        {/* Render your page content component */}
        <Component {...rest} />
      </div>
    </div>
  )
}

Step 2: Add CSS for Animations & Adaptive Layout #

Now add these styles to your styles.css file to enable smooth transitions, fix overlap, and add the scaling effect:

/* Sidebar base styles */
.nav-menu {
  position: fixed;
  left: -100%;
  top: 0;
  width: 250px; /* Adjust to your sidebar width */
  height: 100vh;
  background-color: #1a1a1a;
  transition: left 0.3s ease;
  z-index: 1000; /* Ensure sidebar stays above main content */
}

.nav-menu.active {
  left: 0;
}

/* App container to handle sidebar + main content layout */
.app-container {
  display: flex;
}

/* Main content wrapper */
.main-content {
  flex: 1;
  transition: all 0.3s ease; /* Smooth transition for all state changes */
}

/* Adjust main content when sidebar is open */
.main-content.sidebar-open {
  margin-left: 250px; /* Match your sidebar width */
  /* Optional: Add main page scaling */
  transform: scale(0.95);
  transform-origin: top right;
}

/* Navbar adaptive styling */
.navbar-custom {
  transition: padding-left 0.3s ease;
}

.main-content.sidebar-open .navbar-container {
  padding-left: 1rem; /* Shift Navbar content to avoid crowding */
}

.navbar-brand {
  transition: transform 0.3s ease;
}

.main-content.sidebar-open .navbar-brand {
  transform: translateX(10px); /* Animate title movement */
}

/* Ensure menu button doesn't get hidden */
.menu-bars {
  margin-right: 1rem;
  cursor: pointer;
}

Step 3: What Each Part Does #

Let's break down the key improvements:

• Layout Fix: Moving the sidebar outside the Navbar ensures it sits alongside content instead of overlaying it. The margin-left on .main-content.sidebar-open pushes the entire main area out of the sidebar's way.
• Navbar Animation: The navbar-brand uses a transform transition to slide smoothly when the sidebar opens, and the container adjusts padding to keep content from feeling cramped.
• Main Page Scaling: The transform: scale(0.95) shrinks the main page slightly when the sidebar is open – tweak the value (like 0.98 for a subtler effect) or remove it if you don't want this feature.
• Smooth Transitions: All state changes use 0.3s ease transitions, so every movement feels fluid instead of jumpy.

Optional Tweaks #

• If your sidebar has a different width, update the width in .nav-menu and margin-left in .main-content.sidebar-open to match.
• Adjust the transform values for the brand text or main content to make animations more/less pronounced.
• If you prefer the sidebar to overlay content instead of pushing it, remove the margin-left rule and keep the scaling effect (or not) – just ensure the sidebar's z-index stays higher than the main content.

That should solve your overlap issue, add the animations you wanted, and give you the optional main page scaling!

内容的提问来源于stack exchange，提问作者mirkovski