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 icon_home_filled"></i></figure>
   7           <figure  :class="active('BAPP')" v-on:click="toggleTab('BAPP')"><i class="iconfont icon_bapp_filled"></i></figure>
   8           <figure :class="active('WALLETS')" v-on:click="toggleTab('WALLETS')"><i class="iconfont icon_wallet_filled"></i></figure>
   9           <figure :class="active('BACKUP')" v-on:click="toggleTab('BACKUP')"><i class="iconfont icon_backup_filled"></i></figure>
  10         </section>
  11         <figure class="setting" :class="active('SETTINGS')" v-on:click="toggleTab('SETTINGS')">
  12           <i class="iconfont icon_setting_fiiled" ></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             ...mapGetters([
  27               'currentAccount',
  28             ])
  29         },
  30         methods: {
  31             back(){ this.$router.back() },
  32             active: function (name) {
  33               const home_tab = [
  34                 RouteNames.HOME,
  35                 RouteNames.ASSET,
  36                 RouteNames.TRANSFER,
  37                 RouteNames.RECEIVE,
  38                 RouteNames.ASSET_SELECTION
  39               ]
  40
  41               const setting_tab = [
  42                 RouteNames.SETTINGS,
  43                 RouteNames.SETTINGS_CURRENCY,
  44                 RouteNames.SETTINGS_LANG,
  45                 RouteNames.SETTINGS_DELETE,
  46               ]
  47
  48               const backup_tab = [
  49                 RouteNames.BACKUP,
  50                 RouteNames.BACKUP_MNEMONIC,
  51               ]
  52
  53               const wallet_tab = [
  54                 RouteNames.WALLETS,
  55                 RouteNames.CREATE_ACCOUNT,
  56                 RouteNames.MNEMONIC,
  57                 RouteNames.VERIFY_MNEMONIC,
  58                 RouteNames.ENTRY
  59               ]
  60
  61               const bapp_tab = [
  62                 RouteNames.BAPP,
  63               ]
  64               switch(name){
  65                 case 'HOME':{
  66                   if(home_tab.includes(this.$route.name)){
  67                     return "active";
  68                   }
  69                   break;
  70                 }
  71                 case 'SETTINGS':{
  72                   if(setting_tab.includes(this.$route.name)){
  73                     return "active";
  74                   }
  75                   break;
  76                 }
  77                 case 'BACKUP':{
  78                   if(backup_tab.includes(this.$route.name)){
  79                     return "active";
  80                   }
  81                   break;
  82                 }
  83                 case 'WALLETS':{
  84                   if(wallet_tab.includes(this.$route.name)){
  85                     return "active";
  86                   }
  87                   break;
  88                 }
  89                 case 'BAPP':{
  90                   if(bapp_tab.includes(this.$route.name)){
  91                     return "active";
  92                   }
  93                   break;
  94                 }
  95
  96                 default:
  97                   return ""
  98               }
  99             },
 100             showNav(){
 101               switch(this.$route.name){
 102                   case RouteNames.ENTRY:
 103                   case RouteNames.CREATE_ACCOUNT:
 104                   case RouteNames.MNEMONIC:
 105                   case RouteNames.VERIFY_MNEMONIC:
 106                   case RouteNames.RESTORE_ACCOUNT:
 107                   case RouteNames.SETTING_PASSWORD:
 108                   case RouteNames.ENABLE:
 109                   case RouteNames.BAPP_PROMPT:
 110                   case RouteNames.PROTOCOL: return false;
 111                   default: return true;
 112               }
 113             },
 114
 115             toggleTab(name){
 116                 this.$router.push({name:RouteNames[name]})
 117             }
 118         },
 119     }
 120 </script>
 121
 122 <style lang="scss">
 123     nav {
 124         height: 100%;
 125         background: #fff;
 126         transition: all 0.2s ease;
 127         transition-property: max-height, line-height, background;
 128         position: relative;
 129         z-index: 2;
 130         width: 80px;
 131         text-align: center;
 132         min-height: 585px;
 133
 134         .logo {
 135             width: 26px;
 136         }
 137
 138         .logo_divider{
 139           width: 20px;
 140           height: 1px;
 141
 142           background: #EBEBEB;
 143         }
 144
 145         figure, .logo_divider{
 146
 147           margin-left: auto;
 148           margin-right: auto;
 149         }
 150
 151         i.iconfont {
 152           cursor: pointer;
 153           color: #d6d6d6;
 154           transition: color 0.2s ease;
 155           width: 40px;
 156           height: 40px;
 157           display: inline-flex;
 158           align-items: center;
 159           justify-content: center;
 160
 161           &:hover {
 162             color:rgba(0,0,0,0.3);
 163           }
 164
 165         }
 166
 167         figure.setting{
 168           position: absolute;
 169           bottom: 0px;
 170           left: 0;
 171           right: 0;
 172           text-align: center;
 173         }
 174
 175         figure.active{
 176           .iconfont {
 177             background: #F5F5F5;
 178             border-radius: 20px;
 179             color: #333333;
 180           }
 181         }
 182
 183         .breadcrumb {
 184             padding-top: 15px;
 185         }
 186
 187         &.no-chain {
 188             max-height:99px;
 189             line-height:99px;
 190
 191             .logo {
 192                 font-size:64px;
 193                 color:#656565;
 194                 width:100%;
 195                 text-align:center;
 196             }
 197         }
 198
 199         &.locked {
 200             max-height:200px;
 201             line-height:200px;
 202
 203             .logo {
 204                 font-size:64px;
 205                 color:#656565;
 206                 width:100%;
 207                 text-align:center;
 208             }
 209         }
 210
 211         &.main-menu-nav {
 212             background:#f9f9f9;
 213         }
 214     }
 215 </style>