Скрыть боковую панель на средних и малых экранах устройств

Question

Я хочу сделать боковую панель на своем веб-сайте видимой только на устройствах с большим экраном, скрыть ее по умолчанию на устройствах малого и среднего размера и создать кнопку для ее отображения. Мне нужно такое же поведение этого сайта: https://colorlib.com/preview/theme/elen/index.html

Я сделал этот код:

HTML:

<template>
  <div id="app">
    <div class="main-container">
      <div class="side-panel">
        <div class="side-panel bg-golden h-100">
          <div class="container h-100">
            <div class="row h-100 pt-5 justify-content-center align-items-center">
              <div class="col-12 text-center text-secondary">
                <h5>AYMAN TARIG</h5>
                <ul class="list-group pt-5 pb-4">
                  <li class="list-group-item bg-transparent">HOME</li>
                  <li class="list-group-item bg-transparent">ABOUT</li>
                  <li class="list-group-item bg-transparent">ARTICLES</li>
                  <li class="list-group-item bg-transparent">CONTACT</li>
                </ul>
                <div id="footer">
                  <h6 class="pt-5">Copyright ©2019 All rights reserved | Ayman Tarig</h6>
                  <h6 class="pt-4">
                    <i class="fab fa-facebook-f p-2"></i>
                    <i class="fab fa-google-plus-g p-2"></i>
                  </h6>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div id="background" class="h-100">
          <div class="container p-5 h-100">
            <div class="row h-100 justify-content-center align-items-center">
              <div class="col-12">
                <h3 class="text-center text-dark pt-4">AYMAN TARIG</h3>
                <h6
                  class="text-center text-secondary pb-4"
                >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos, officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

CSS:

<style scoped>
.main-container {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

h1 {
  text-decoration: underline #3a3939;
}
#background {
  background: url("./imgs/80911.jpg");
  background-size: cover;
}

h2 > i {
  cursor: pointer;
}

.side-panel {
  position: fixed;
  height: 100vh;
  width: 25%;
}

ul {
  list-style: none;
}

li:hover {
  background-color: #eeeeee !important;
  color: #02131f !important;
}

i:hover {
  color: #ffffff;
}

.bg-golden {
  background-color: #02131f;
}

.content {
  width: 100%;
  margin-left: 25%;
}

@media (max-width: 540px) {
  .main-container {
    display: block;
    flex-wrap: wrap;
  }

  .content {
    width: 100%;
    margin-left: 0;
  }

  .side-panel {
    position: static;
    width: 100%;
    min-height: 250px;
    height: auto;
  }

  #footer {
    display: none;
  }
}
</style>

Может кто-нибудь помочь мнеизменить мой код и достижения

Answer 1

Я работаю над чем-то похожим, вам нужно настроить код в соответствии с вашими потребностями:

Редактировать: Фиксированное положение боковой панели.

/* JS */

var sidebar = $("#sidebar");
var hamburger = $('#navTrigger');

hamburger.click(function(e) {
  e.preventDefault();
  $(this).toggleClass('is-active');
  // This will add `sidebar-opened`
  $('#wrapper').toggleClass("sidebar-opened");
  // Remove magin left
  sidebar.toggleClass('ml-0');
});

/* CSS */

body {
  overflow-x: hidden;
}


/* Sidebar */

#sidebar {
  -webkit-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
  padding: 15px;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
}

#content {
  -webkit-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

.sidebar-opened #content {
  margin-left: 250px;
}

@media (max-width: 992px) {
  #sidebar {
    margin-left: -251px;
  }
}

@media (min-width: 992px) {
  #content {
    margin-left: 250px;
  }
}


/* Hamburger Menu */

.nav-trigger {
  cursor: pointer;
  width: 45px;
  height: 45px;
  padding: 1rem;
  display: inline-block;
  z-index: 999;
  position: absolute;
  right: -45px;
  top: 0;
}

.nav-trigger:hover .hamburger {
  transition: transform 50ms;
  transform: scale(.95);
}

.nav-trigger .hamburger {
  position: relative;
  width: 45px;
  height: 45px;
  transition: transform 500ms ease-in-out;
}

.nav-trigger .hamburger::before,
.nav-trigger .hamburger::after,
.nav-trigger .hamburger .hamburger-icon {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background: #222;
  transform-origin: 100% 50%;
  transition: transform .5s;
}

.nav-trigger .hamburger::before {
  top: 5px;
}

.nav-trigger .hamburger::after {
  top: 17px;
}

.nav-trigger .hamburger .hamburger-icon {
  width: 25px;
  top: 11px;
  transform-origin: 50% 50%;
}

.nav-trigger.is-active .hamburger::before,
.nav-trigger.is-active .hamburger::after,
.nav-trigger.is-active .hamburger .hamburger-icon {
  background: #222;
}

.nav-trigger.is-active .hamburger::before {
  transform: translate3d(-5px, 0px, 0) rotateZ(-45deg);
}

.nav-trigger.is-active .hamburger .hamburger-icon {
  transform: rotateY(-90deg);
}

.nav-trigger.is-active .hamburger::after {
  transform: translate3d(-5px, 5px, 0) rotateZ(45deg);
}


/* Navbar */

.navbar-link {
  padding: .5rem 1rem;
  display: block;
  color: #fff
}

.navbar-link:hover {
  background-color: #eeeeee;
  color: #02131f;
  text-decoration: none;
}

i:hover {
  color: #fff;
}


/* Content */

.bg-golden {
  background-color: #02131f;
  color: #fff
}

.bg-fullscreen {
  background-image: url(https://via.placeholder.com/1280x720.png/DCDCDC/fff);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  position: relative;
  background-attachment: scroll;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div id="app">
  <div class="main-container" id="wrapper">
    <div class="d-flex vh-100">

      <!-- Sidebar -->
      <aside id="sidebar" class="side-panel d-flex flex-column h-100 bg-golden">
        <!-- d-lg-none will hide the button on medium and large screens -->
        <a id="navTrigger" class="d-lg-none nav-trigger" role="button" title="sweet hamburger">
          <span class="hamburger">
							<span class="hamburger-icon"></span>
          </span>
        </a>
        <h5 class="sidebar-heading mt-5">AYMAN TARIG</h5>
        <ul class="navbar-nav bd-navbar-nav py-5">
          <li class="nav-item"><a class="navbar-link" href="#">HOME</a></li>
          <li class="nav-item"><a class="navbar-link" href="#">ABOUT</a></li>
          <li class="nav-item"><a class="navbar-link" href="#">ARTICLES</a></li>
          <li class="nav-item"><a class="navbar-link" href="#">CONTACT</a></li>
          </li>
        </ul>
        <div id="footer" class="mt-auto">
          <small class="">Copyright ©2019 All rights reserved | Ayman Tarig</small>
          <p class="pt-4">
            <i class="fab fa-facebook-f p-2"></i>
            <i class="fab fa-google-plus-g p-2"></i>
          </p>
        </div>
      </aside>

      <!-- Content -->
      <div id="content" class="w-100">
        <!-- seciton 1 -->
        <div id="background" class="bg-fullscreen h-100">
          <div class="container p-5 d-flex h-100">
            <div class="row justify-content-center align-items-center">
              <div class="col-12">
                <h3 class="text-center text-dark pt-4">AYMAN TARIG</h3>
                <h6 class="text-center text-secondary pb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
                  officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
        <!-- seciton 2 -->
        <div class="section-2 bg-warning" style="height: 1000px">
          <div class="container p-5 d-flex h-100 text-center">
            <div class="row justify-content-center align-items-center">
              <div class="col-12">
                <h2 class="display-4">Another section</h2>
                <h6 class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
                  officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
        <!-- seciton 3 -->
        <div class="section-3 bg-info" style="height: 1000px">
          <div class="container p-5 d-flex h-100 text-center">
            <div class="row justify-content-center align-items-center">
              <div class="col-12">
                <h2 class="display-4">Another section</h2>
                <h6 class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
                  officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Если вы ориентируетесь на мобильные устройства с @media (max-width: 540px), то добавьте display: none в определении .side-panel.

Иначе добавьте новый медиазапрос

@media (max-width: 375px) {
  .side-panel {
    position: absolute;
    display: none;
  }
}