JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="nav-toggle" hidden>

<nav class="nav">

    <label for="nav-toggle" class="nav-toggle" onclick></label>
    <h2 class="logo">
        <a href="">site.com</a>
    </h2>
    <ul>
        <li><a href="#1">Готовая продукция</a>
        <li><a href="#2">Заказать</a>
        <li><a href="#3">Три</a>
        <li><a href="">Четыре</a>
        <li><a href="#5">Пять</a>
        <li><a href="#6">Шесть</a>
        <li><a href="#j7">Семь</a>
    </ul>
</nav>
  <div class="mask-content"></div>
  
  <div style="margin-top:500px"><h2 id="j7">связь с нами</h2></div>

CSS

.nav {
    /*  ширна произвольная, не стесняйтесь экспериментировать */
    width: 250px;
    min-width: 250px;
    /* фиксируем и выставляем высоту панели на максимум */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* сдвигаем (прячем) панель относительно левого края страницы */
    left: -370px;
    /* внутренние отступы */
    padding: 15px 20px;
    /* плавный переход смещения панели */
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    transition: left 0.3s;
    /* определяем цвет фона панели */
    background: #fff;
    /* поверх других элементов */
    z-index: 2000;
}

/**
 * Кнопка переключения панели
 * тег <label>
 */

.nav-toggle {
    /* абсолютно позиционируем */
    position: absolute;
    /* относительно левого края панели */
    left: 370px;
    /* отступ от верхнего края панели */
    top: 1em;
    /* внутренние отступы */
    padding: 0.5em;
    /* определяем цвет фона переключателя
     * чаще вчего в соответствии с цветом фона панели
    */
    background: #fff;
    /* цвет текста */
    color: #000;
    /* вид курсора */
    cursor: pointer;
    /* размер шрифта */
    font-size: 1.2em;
    line-height: 1;
    /* всегда поверх других элементов страницы */
    z-index: 2001;
    /* анимируем цвет текста при наведении */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}

/* определяем текст кнопки
 * символ Unicode (TRIGRAM FOR HEAVEN)
*/

.nav-toggle:after {
    content: '\2630';
    text-decoration: none;
}

/* цвет текста при наведении */

.nav-toggle:hover {
    color: #f4f4f4;
}

/**
 * Скрытый чекбокс (флажок)
 * невидим и недоступен :)
 * имя селектора атрибут флажка
 */

[id='nav-toggle'] {
    position: absolute;
    display: none;
}

/**
 * изменение положения переключателя
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри...