src/components/MenubarComponent.vue

   1 <template>
   2     <nav v-if="showNav()">
   3         <section class="breadcrumb">
   4           <figure><img class="logo" src="@/assets/logo_pure.png" alt=""></figure>
   5           <div class="logo_divider"></div>
   6           <figure  :class="active('HOME')" v-on:click="toggleTab('HOME')"><i class="iconfont iconhome_filled"></i></figure>
   7           <figure  v-on:click=""><i class="iconfont iconbapp_filled"></i></figure>
   8           <figure  v-on:click=""><i class="iconfont iconwallet_filled"></i></figure>
   9           <figure  v-on:click=""><i class="iconfont iconbackup_filled"></i></figure>
  10         </section>
  11         <figure class="setting" v-on:click="">
  12           <i class="iconfont iconSetting_fiiled" @click="$router.go(-1)"></i>
  13         </figure>
  14     </nav>
  15 </template>
  16
  17 <script>
  18     import { mapActions, mapGetters, mapState } from 'vuex'
  19     import {RouteNames} from '@/router'
  20
  21     export default {
  22         computed: {
  23             ...mapState([
  24                 'bytom'
  25             ])
  26         },
  27         methods: {
  28             back(){ this.$router.back() },
  29             active: function (name) {
  30               const home_tab = [
  31                 RouteNames.HOME,
  32                 RouteNames.ASSET,
  33                 RouteNames.TRANSFER,
  34                 RouteNames.RECEIVE
  35               ]
  36               switch(name){
  37                 case 'HOME':{
  38                   if(home_tab.includes(this.$route.name)){
  39                     return "active";
  40                   }
  41                 }
  42
  43                 default:
  44                   return ""
  45               }
  46             },
  47             showNav(){
  48                 switch(this.$route.name){
  49                     case RouteNames.ENTRY:
  50                     case RouteNames.CREATE_ACCOUNT:
  51                     case RouteNames.MNEMONIC:
  52                     case RouteNames.VERIFY_MNEMONIC:
  53                     case RouteNames.RESTORE_ACCOUNT:
  54                     case RouteNames.SETTING_PASSWORD:
  55                     case RouteNames.PROTOCOL: return false;
  56                     default: return true;
  57                 }
  58             },
  59
  60             toggleTab(name){
  61                 this.$router.push({name:RouteNames[name]})
  62             }
  63         },
  64     }
  65 </script>
  66
  67 <style lang="scss">
  68     nav {
  69         height: 100%;
  70         background: #fff;
  71         transition: all 0.2s ease;
  72         transition-property: max-height, line-height, background;
  73         position: relative;
  74         z-index: 2;
  75         width: 80px;
  76         text-align: center;
  77         min-height: 585px;
  78
  79         .logo {
  80             width: 26px;
  81         }
  82
  83         .logo_divider{
  84           width: 20px;
  85           height: 1px;
  86
  87           background: #EBEBEB;
  88         }
  89
  90         figure, .logo_divider{
  91
  92           margin-left: auto;
  93           margin-right: auto;
  94         }
  95
  96         i.iconfont {
  97             cursor: pointer;
  98             color: #d6d6d6;
  99         }
 100
 101         figure.setting{
 102           position: absolute;
 103           bottom: 0px;
 104           left: 0;
 105           right: 0;
 106           text-align: center;
 107         }
 108
 109         .breadcrumb {
 110             padding-top: 15px;
 111
 112             figure.active{
 113               .iconfont {
 114                 background: #F5F5F5;
 115                 border-radius: 20px;
 116                 color: #333333;
 117               }
 118             }
 119
 120             .iconfont {
 121                 cursor: pointer;
 122                 color:#dbdbdb;
 123                 transition: color 0.2s ease;
 124                 width: 40px;
 125                 height: 40px;
 126                 display: inline-flex;
 127                 align-items: center;
 128                 justify-content: center;
 129
 130                 &:hover {
 131                     color:rgba(0,0,0,0.3);
 132                 }
 133
 134             }
 135         }
 136
 137         &.no-chain {
 138             max-height:99px;
 139             line-height:99px;
 140
 141             .logo {
 142                 font-size:64px;
 143                 color:#656565;
 144                 width:100%;
 145                 text-align:center;
 146             }
 147         }
 148
 149         &.locked {
 150             max-height:200px;
 151             line-height:200px;
 152
 153             .logo {
 154                 font-size:64px;
 155                 color:#656565;
 156                 width:100%;
 157                 text-align:center;
 158             }
 159         }
 160
 161         &.main-menu-nav {
 162             background:#f9f9f9;
 163         }
 164     }
 165 </style>