0

Я делаю проект используя react и scss. При вёрстке сайдбара появилась необходимость задать ему position: absolute; чтобы другие элементы не обращали на него внимания. Вот так выглядит структура. введите сюда описание изображения

CSS код:

html, body{
  height: 100%;
  width: 100%;
}

.App{
  width: 100vw;
  height: 100vh;
  background: linear-gradient(#ffffff, #c5ceda);
  overflow: hidden;
}

.main-container{
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
}

.sidebar{
    background-color: #fffff1;
    box-shadow: -2px 1px 2px rgba(0,0,0,0.15), 
    2px 1px 2px rgba(0,0,0,0.15);
    height: 100%;
    width: 250px;
    display: flex;
    position: absolute;
    justify-content: center;
    transition: 650ms;
}

Сразу скажу, что если не задавать сайдбару position absolute, то тогда он входит в общий поток элементов, следовательно тег main со своим содержимым просто уходит под сайдбар и его на странице вообще не видно. position absolute решает эту проблему, но создаёт другую, появляется скрол, когда сайдбар активен. Как убрать этот скрол? Может быть вы знаете как можно переверстать это? Кстати задать в html overflow hidden не помогает. Заранее спасибо за ответ. Дополнительно:

export default function SideBar() {
  const isFocus = useSelector((state) => state.sideBarBtn.isFocus);
  
  return (
    <div className={ isFocus ? "sidebar" : "sidebar disabled"}>
      <div className="divider top-divider" data-content="Меню"></div>
      <ul className="nav-menu-items">
        {
          sideBarData.map((item) => {
          
            return (
              <li key={item.title} className={item.className}>
                <NavLink to={item.path}>
                  <i className={item.icon}></i>
                  <span>{item.title}</span>
                </NavLink>
              </li>
            );
          })
        }
      </ul>
    </div>
  )
}
.disabled{
    transform: translateX(-250px);
    transition: 650ms;
}
.sidebar{
    background-color: #fffff1;
    box-shadow: -2px 1px 2px rgba(0,0,0,0.15), 
    2px 1px 2px rgba(0,0,0,0.15);
    height: 100%;
    width: 250px;
    display: flex;
    position: absolute;
    justify-content: center;
    transition: 650ms;

    .top-divider{
      position: absolute;
      left: 5px;
      top: 21px;
      opacity: 0.7;
    }
    .divider[data-content="Меню"]::after {
      background: #fffff1;;
      color: #0705a1;
      content: attr(data-content);
      display: inline-block;
      font-size: .9rem;
      padding: 0 0.4rem;
      transform: translateY(-0.65rem);
    }

    .nav-menu-items {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin: 50px 45px;

        &>.nav-text  {
            display: flex;
            justify-content: start;
            align-items: start;
            padding: 8px 0px 8px 16px;
            list-style: none;
            height: 50px;;
          }
          &>.nav-text a{
            text-decoration: none;
            font-size: 15px;
            box-shadow: none;
            color: #5755d9;
            transition: 350ms;
          }
          &>.nav-text a>i{
            margin-right: 8px;
            font-size: 18px;
          }

          &>.nav-text a:hover{
            color: #afaff5;        
          } 
          &>.nav-text .active{
            color: #afaff5;
            text-decoration: underline;
            text-underline-offset: 5px;
            text-decoration-thickness: 2px;
            text-decoration-color: #9492f7;
          }
          
        }

export default function Layout() {
  const {pathname} = useLocation();
  const isAdminApp = pathname === "/" || 
    pathname === "/onlinereceipt" ||
    pathname === "/adminpanel"
    ? false : true

  return (
    <>
        {/*Отрисовать Кнопку открытия сайдбара и сам компонент SideBar
         на всех страницах кроме корневой страницы PaymentVodokanal,
         страницы авторизации пользователя и onlinereceipt */}
        <Header showSideBarBtn={isAdminApp}/>
        {isAdminApp && <SideBar/>}
        <main className="main-container">
            <Outlet/>
        </main>
    </>
  )
}
.main-container{
    height: 100%;
    width: 100%;
    display: flex;
    overflow: hidden;
}

.user-page{
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    overflow: hidden;
}

export default function UserTable() {
      return (
        <div className="user-content-wrapper">
            UserTable
        </div>
      )
    }
    
    function Users() {
  return( 
    <div className="user-page">
        <UserTable/>
    </div>
  );
}

4
  • Прикрепите, пожалуйста, ваш HTML
    – Dark Space
    20 мар 2023 в 11:15
  • наверное лучше оформить разметку в виде снипета, по картинке тяжело сразу сказать решение. overflow hidden нужно ставить родительскому элементу скрола, у которого position не static. надо смотреть у кого там скрол появился. 20 мар 2023 в 11:17
  • Скинул код компонентов 20 мар 2023 в 11:33
  • В общем проблема решилась. Я не понимаю как это работает. Думаю это тема для отдельного вопроса. 20 мар 2023 в 11:44

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.