Положение не зафиксировано в адаптивном режиме?

Question

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

Вот то, что я получаю, когда нажимаю на панель инструментов устройства и выбираю iPhone, например,

Но когда я изменяю размер своего браузера, я получаю:

Второй результат - это то, что я хочу, потому что у меня естьполоса прокрутки в моем меню, так что все хорошо, когда я просто изменяю размер своего браузера. Вот код, который я реализовал для такой вещи.

Что мой компонент React:

class MenuLeft extends Component {
// a code here ( my state and constructor and methods )
render() {
    return (
        <div>
            {this.state.isDisplayed && (
                <nav
                    className={
                        this.state.isPropositionsClicked
                            ? "co-menu-left co-menu-left--big"
                            : "co-menu-left co-menu-left--small"
                    }
                >
                    {!this.state.isPropositionsClicked && (
                        <div
                            className={
                                this.state.isPropositionsClicked
                                    ? "co-contrat-propositions"
                                    : "co-contrat-propositions"
                            }
                        >
                            <div className="co-contrat-propositions__list">
                                {this.renderContrats(this.state.contratItems)}
                            </div>
                        </div>
                    )}

                    {this.state.isPropositionsClicked && (
                        <div className="co-contrat-propositions__list">
                            <ContratProposition
                                id={this.state.activeContrat.id}
                                isSelected
                                allContratDeselected={() => this.handle}
                            />
                        </div>
                    )}

                    <div
                        role="button"
                        tabIndex={0}
                        className="co-menu-left__toggle"
                        onClick={() => this.handleContratsView()}
                        onKeyDown={() => this.handleContratsView()}
                    >
                        <FontAwesomeIcon
                            role="presentation"
                            icon={!this.state.isPropositionsClicked ? faAngleUp : faAngleDown}
                            size="2x"
                        />
                    </div>

                    <PerfectScrollbar>
                        {this.renderItems(this.state.menuItems)}
                    </PerfectScrollbar>
                </nav>
            )}
            {!this.state.isDisplayed && (
                <div className="co-menu-left__show">
                    <div
                        onKeyDown={this.displayMenuLeft}
                        className="co-menu-left__show--center"
                        onClick={this.displayMenuLeft}
                        role="button"
                        tabIndex={0}
                    >
                        <FontAwesomeIcon icon={faAngleDoubleUp} size="4x" />
                    </div>
                </div>
                //
            )}
        </div>
    );
}
}

} ​​

в этом коде важна только навигация, я верю, потому что то, что внутри, не имеет ничего общего с моей проблемой.

И вот мой файл sass:

.co-menu-left {

  width:110px;
  height: 63%; // 83%
  position: fixed;
  top: 70px;
  left:0px;
  transition: 0.4s all ease;
  z-index: 5;

  @include responsive(desktop){
    top:0;
    height: 65%;
  }

/* ------------------ this is the code needed in my problem -------------- */
  @include responsive(phone){
    width:100vw;
    top:0px;
    height: 100%;
    z-index:1500000;
  }
}

Отзывчивый «метод», который я называю миксином, я использую, телефон эквивалентен 600px и меньше.

Любая помощь будет высоко ценится.