Как решить проблему у Sidebar на React.js?

Question

[Dmitry]

Здравствуйте. Возникла проблема при разработке проекта. Необходимо сделать так, чтобы в левой части находился sidebar, а по центру был main(весь контент). Проблема возникает в том, что если я вешаю стили на sidebar, то что он будет fixed, при изменение масштаба у main, он накладывается на сам sidebar.

Код Layout.tsx

import React from 'react'
import styles from './Layout.module.scss'
import SideBar from '../ui/sidebar/SideBar'
import { ILayout } from '@/src/interfaces/layout.interface'
import SearchSvg from '../ui/svgs/SearchSvg'
import NotificationSvg from '../ui/svgs/NotificationSvg'
import Avatar from '../ui/avatar/Avatar'
import ArrowDown from '../ui/svgs/ArrowDown'

const Layout = ({ children }: ILayout) => {
  return (
    <div className={styles.layout}>
      <SideBar />
      <div className={styles.layout__main}>
        <div className={styles.layout__main__header}>
          <div className={styles.layout__main__header__search}>
            <SearchSvg />
            <input type='text' placeholder='Поиск' />
          </div>
          <div className={styles.layout__main__header__left}>
            <button className={styles.layout__main__header__left__notification}>
              <NotificationSvg />
            </button>
            <div className={styles.layout__main__header__left__profile}>
              <Avatar border={50} width={30} height={30} login='M' fz={14} />
              <h3>Дмитрий</h3>
              <ArrowDown />
            </div>
          </div>
        </div>
        <main>{children}</main>
      </div>
    </div>
  )
}

export default Layout

Код Layout.module.scss

.main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapper {
  position: relative;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  opacity: 0.6;
  background: #000;
}

.layout {
  display: flex;
  position: relative;
  flex-direction: row;

  &__main {
    overflow-y: auto;
    max-width: 1440px;
    flex: 1;
    margin: 20px auto 0 auto;
    &__header {
      display: flex;
      justify-content: space-between;
      &__left {
        display: flex;
        align-items: center;
        &__notification {
          background: #ffffff;
          padding: 12px;
          border-radius: 14px;
        }
        &__profile {
          margin-left: 24px;
          background: #ffffff;
          padding: 9px 14px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          h3 {
            margin: 0 10px;
            font-size: 16px;
            font-weight: 400;
            color: rgb(10, 22, 41);
          }
        }
      }
      &__search {
        border-radius: 14px;
        box-shadow: 0px 6px 58px 0px rgba(196, 203, 214, 0.1);
        max-width: 412px;
        width: 100%;
        padding: 12px 20px;
        background: #ffffff;
        display: flex;
        input {
          margin-left: 10px;
          outline: none;
          width: 100%;
        }
      }
    }
  }
}

Стили у Sidebar

.sidebar {
  display: flex;
  position: relative;
  width: 200px;
  flex-direction: column;
  background-color: #ffffff;
  transition-duration: 300ms;
  transition-timing-function: linear;
  color: #ffffff;
  margin: 20px;
  height: 95vh;
  border-radius: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  &__content {
    display: flex;
    flex-direction: column;
    padding: 40px 24px;
    height: 100%;
    &__bottom {
      &__auth {
        margin-top: 40px;
        display: flex;

        align-items: center;
        a {
          margin-left: 12px;
          font-size: 16px;
          color: #7d8592;
        }
      }
    }
    &__upper {
      flex: 1;
      display: flex;
      flex-direction: column;
      &__navigation {
        margin-top: 42px;
        &__list {
          &__item {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            &__link {
              margin-left: 16px;
              color: rgb(125, 133, 146);
              font-family: Nunito Sans;
              font-size: 16px;
              font-weight: 400;
              line-height: 22px;
              letter-spacing: 0px;
              text-align: left;
            }
          }
        }
      }
    }
  }
}
.sidebar__content {
  padding: 40px 24px;
}

Comments

[imko]

ну... не фикси его)

Answer 1

[Kentavr16]

как вариант можно сделать
при использовании фиксед или абсолют ты вырываешь элемент из потока документа. Место под него не сохраняется, потому и проблемы при настройке отзывчивости. В моем варианте я создал контейнер для сайдбара, который "резервирует" место в документе. Плюс использовал относительные единицы ширины/высоты для облегчения рассчетов.