Vue 2.0 Hello World

by gayanov2017

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://unpkg.com/vue"></script>

  <div id="app" class="body">

    <header class="header-section">
      <nav class="navbar navbar-dark fixed-top navbar-expand-lg"
           :class="navbarClassObject">
        <a class="navbar-brand">
           Test
        </a>
        <button class="navbar-toggler"
                @click="isShow = !isShow"
                :class="[isShow ? 'show' : '']"
                type="button">
          <span class="icon-bar first-line"></span>
          <span class="icon-bar middle-line"></span>
          <span class="icon-bar end-line"></span>
        </button>

        <div class="collapse navbar-collapse">
          <ul class="navbar-nav ml-auto align-items-center">
            <li class="nav-item nav-btn route">
              <a
                      active-class="active"
                      class="nav-link btn-route"
                      exact>Главная
              </a>
            </li>
            <li class="nav-item nav-btn route">
              <a
                      active-class="active"
                      class="nav-link btn-route">Топ проекты
              </a>
            </li>
            <li class="nav-item nav-btn route">
              <a
                      active-class="active"
                      class="nav-link btn-route">Правила
               </a>
            </li>
            <li class="nav-item nav-btn route">
              <a
                      active-class="active"
                      class="nav-link btn-route">FAQ
              </a>
            </li>
            <li class="nav-item nav-btn">
              <a href="/" class="nav-link btn btn-panel">
                Личный кабинет <i class="icon-sign-in"></i>
              </a>
            </li>
          </ul>
        </div>
      </nav>
    </header>
</div>

SCSS

body {
  background-color: #000;
}
/*------------------
  Header section
---------------------*/
.navbar > .navbar-brand {
  font-family: 'Baloo Bhaina', cursive;
  font-size: 28px;
}

.nav-item > .route {
  border-bottom: 2px transparent solid;
  background-color: transparent;
}

.nav-item > .route:hover, .active {
  border-bottom: 2px #eb2b63 solid;
  background-color: transparent;
}

.header-section {
  position: absolute;
  width: 100%;
  //padding-top: 25px;
  z-index: 99;
}

.site-logo {
  display: inline-block;
  margin-left: 50px;
}

.nav-switch {
  display: none;
}

.nav-warp {
  float: right;
}

.page-top-section {
  height: 404px;
  padding-top: 215px;
  h2 {
    color: #fff;
  }
}

span .navbar-toggler-line
{
  background-color: #ffffff;
  width: 100%;
}

.navbar-toggler {
  display: flex;
  flex-direction: column;

  > .icon-bar {
    border-bottom: 2px #fff solid;
    width: 22px;
    border-radius: 2px;
  }
  >.first-line {
    margin-top: 4px;
    margin-bottom: 2px;
  }

  >.middle-line {
    margin-top: 2px;
    margin-bottom: 2px;
  }

  >.end-line {
    margin-top: 2px;
    margin-bottom: 4px;
  }
}

.navbar-toggler.show {
  > .icon-bar {
    /*border-bottom: 2px #fff solid;
    width: 20px;
    border-radius: 2px;*/
  }
  >.first-line {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }

  >.middle-line {
    opacity: 0;
  }

  >.end-line {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }
}




@media (min-width: 786px) {
  .navbar-main {
    margin-top: 25px;
  }
}

@media only screen and (max-width: 767px) {
  /*.header-section {
    padding-bottom: 20px;
  }*/
  .nav-item > .btn-connect {
    margin-bottom: 5px;
  }
  .nav-switch {
    right: 30px;
    display: block;
    float: right;
    font-size: 32px;
    cursor: pointer;
    color: #fff;
    margin-right: 40px;
  }
  .navbar-collapse {
    position: absolute;
    background: #fff;
    width: 100%;
    left: 0;
    top: 100%;
    -webkit-box-shadow: 0...

JavaScript

new Vue({
  el: '#app',
  data: function() {
      return {
        app_name: process.env.VUE_APP_TITLE,
        app_domain: process.env.VUE_APP_DOMAIN,

        vk_group: process.env.VUE_APP_VK_GROUP,
        vk_me_group: process.env.VUE_APP_VK_ME_GROUP,

        feedback_mail: process.env.VUE_APP_FEEDBACK_MAIL,

        wm_passport: process.env.VUE_APP_WEBMONEY_PASSPORT,

        navbarClassObject: {
          'navbar-dark': true,
          'bg-transperment': true,
          'bg-dark-purple-pink' : false,
          'navbar-main': true,
          'mt-0': false
        },
        isShow: false
      }
    },
})