Merge pull request #68 from rsksmart/feature/navbar-component

Feature/navbar component

src/App.vue

@@ -1,17 +1,22 @@
 <template>
   <div id="main">
-    <NavBar />
-    <router-view />
-    <Footer />
+    <section class="d-flex">
+      <Sider />
+      <section class="d-flex flex-column w-100 justify-content-between">
+        <NavBar />
+        <router-view />
+        <Footer />
+      </section>
+    </section>
     <WrapperModal ref="wrapperModal" />
   </div>
 </template>
 
 <script>
 import { provide, ref } from 'vue'
-// import Connection from '@/components/commons/Connection.vue'
 import NavBar from '@/components/layouts/NavBar.vue'
 import Footer from '@/components/layouts/Footer.vue'
+import Sider from '@/components/layouts/Sider'
 import WrapperModal from '@/components/commons/Modals/WrapperModal'
 
 export default {
@@ -20,6 +25,7 @@ export default {
     NavBar,
     Footer,
     WrapperModal,
+    Sider,
   },
   setup() {
     const wrapperModal = ref(null)

src/components/layouts/Menu.vue

@@ -0,0 +1,114 @@
+<template>
+  <ul class="menu">
+    <li
+      v-for="menuItem in menuItems"
+      :key="menuItem.path"
+      class="menu-item"
+      :class="{ 'menu-item-active': activePath === menuItem.path }"
+    >
+      <router-link :to="menuItem.path">
+        <span v-if="menuItem.icon" :class="`fa ${menuItem.icon} mr-2`"></span>
+        <span>{{ menuItem.title }}</span>
+      </router-link>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: 'Menu',
+  data() {
+    return {
+      selectedMenu: null,
+      menuActiveClassName: 'menu-item-active',
+      menuItems: [
+        {
+          path: '/',
+          title: 'Cross',
+          icon: null,
+        },
+        {
+          path: '/transactions',
+          title: 'Transactions',
+          icon: null,
+        },
+        {
+          path: '/network-info',
+          title: 'Network Info',
+          icon: null,
+        },
+        {
+          path: '/token-list',
+          title: 'Token List',
+          icon: null,
+        },
+      ],
+    }
+  },
+  computed: {
+    activePath() {
+      return this.$router.currentRoute.value.fullPath
+    },
+  },
+}
+</script>
+
+<style scoped>
+.menu {
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  list-style: none;
+  transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
+}
+
+.menu:before {
+  display: table;
+  content: '';
+}
+
+.menu-item {
+  width: 100%;
+  left: 0;
+  margin-bottom: 8px;
+  margin-left: 0;
+  margin-top: 4px;
+  padding: 0 16px;
+  border-right: 0;
+  display: flex;
+  align-items: center;
+  transition: border-color 0.3s, background 0.3s, padding 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
+  height: 40px;
+  line-height: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  white-space: nowrap;
+  color: var(--primary);
+  font-size: 12px;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.menu-item:hover {
+  opacity: 0.7;
+}
+
+.menu-item:after {
+  transform: scaleY(1);
+  opacity: 1;
+  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
+    opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.menu-item.menu-item-active {
+  border-bottom: 2px solid var(--primary);
+}
+
+.menu-item > * {
+  width: 100%;
+  color: var(--primary) !important;
+}
+</style>

src/components/layouts/NavBar.vue

@@ -1,96 +1,50 @@
 <template>
-  <!-- Navigation -->
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <div class="container">
-      <div class="col-2">
-        <a class="navbar-brand" href="https://rsk.co">
-          <img
-            id="logo"
-            src="../../assets/img/bridge-logo.png"
-            class="logo"
-            alt="RSK Token Bridge"
-          />
-        </a>
-      </div>
-      <div v-if="isConnected" class="wallet-status navbar-item indicator badge-outline badge-pill">
-        <span aria-describedby="tooltip-status" class="fromNetwork">
-          {{ sharedState.currentConfig.name }}
-        </span>
-      </div>
-      <button
-        class="navbar-toggler collapsed"
-        type="button"
-        data-toggle="collapse"
-        data-target="#navbarResponsive"
-        aria-controls="navbarResponsive"
-        aria-expanded="false"
-        aria-label="Toggle navigation"
-      >
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div id="navbarResponsive" class="navbar-collapse collapse">
-        <div
-          v-if="isConnected"
-          class="wallet-status navbar-item badge-pill text-truncate"
-          style="width: 85px;"
-        >
-          <span id="address">{{ sharedState.accountAddress }}</span>
-        </div>
-        <div v-if="isConnected" class="d-flex align-items-center navbar-item">
-          <span class="input-group-text mr-2 bg-transparent text-primary border-0">
-            <i class="fas fa-long-arrow-alt-right"></i>
-          </span>
-          <select
-            v-if="networks.length > 0"
-            id="networks"
-            v-model="sideConfig"
-            name="networks"
-            class="form-control select-networks"
-            @change="changeSideNetwork"
-          >
-            <option value="" selected disabled>Destination network</option>
-            <option
-              v-for="network in networks"
-              :key="network.crossToNetwork.networkId"
-              :value="network.crossToNetwork"
+  <header>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div class="w-100">
+        <div class="row w-100">
+          <div class="col-4 offset-8 d-flex justify-content-end">
+            <div
+              v-if="isConnected"
+              class="wallet-status navbar-item indicator badge-outline badge-pill"
             >
-              {{ network.crossToNetwork.name }}
-            </option>
-          </select>
-          <div v-else class="wallet-status indicator badge-outline badge-pill">
-            {{ sharedState.currentConfig.crossToNetwork.name }}
+              <span aria-describedby="tooltip-status" class="fromNetwork">
+                {{ sharedState.currentConfig.name }}
+              </span>
+            </div>
+            <div
+              v-if="isConnected"
+              class="wallet-status navbar-item badge-pill text-truncate"
+              style="width: 155px;"
+            >
+              <span id="address">{{ sharedState.accountAddress }}</span>
+            </div>
           </div>
-          <button
-            type="button"
-            v-if="isMetaMask"
-            class="btn btn-link btn-sm text-primary"
-            @click="handleSwitchNetwork"
-          >
-            Switch Network
-          </button>
-        </div>
-        <div class="navbar-item ml-auto">
-          <button
+          <div
             v-if="!sharedState.isConnected"
-            id="logIn"
-            type="button"
-            class="btn btn-primary badge-pill"
-            @click="connectWalletClick"
+            id="navbarResponsive"
+            class="navbar-collapse collapse"
           >
-            Connect wallet
-          </button>
-          <a v-if="isConnected" id="help" href="https://developers.rsk.co/slack/">
-            Do you need help?
-          </a>
+            <div class="navbar-item ml-auto">
+              <button
+                id="logIn"
+                type="button"
+                class="btn btn-primary badge-pill"
+                @click="connectWalletClick"
+              >
+                Connect wallet
+              </button>
+            </div>
+          </div>
         </div>
       </div>
-    </div>
-  </nav>
+    </nav>
+  </header>
 </template>
 
 <script>
 import { store } from '@/store.js'
-import { numToHex } from '@/utils/helpers'
 
 export default {
   name: 'NavBar',
@@ -115,57 +69,11 @@ export default {
     isConnected() {
       return this.sharedState.isConnected && !this.sharedState.preSettingsEnabled
     },
-    isMetaMask() {
-      return window.ethereum.isMetaMask
-    },
   },
   methods: {
     connectWalletClick() {
       return store.handleLogin()
     },
-    async handleAddNetwork(networkConfig) {
-      try {
-        const chainId = numToHex(networkConfig.networkId)
-        await window.ethereum.request({
-          method: 'wallet_addEthereumChain',
-          params: [
-            {
-              chainId,
-              chainName: networkConfig.name,
-              nativeCurrency: {
-                name: networkConfig.mainToken.name,
-                symbol: networkConfig.mainToken.symbol,
-                decimals: networkConfig.mainToken.decimals,
-              },
-              rpcUrls: [networkConfig.rpc],
-            },
-          ],
-        })
-      } catch (error) {
-        console.error(error)
-      }
-    },
-    async handleSwitchNetwork() {
-      try {
-        const chainId = numToHex(this.sharedState.currentConfig.crossToNetwork.networkId)
-        await window.ethereum.request({
-          method: 'wallet_switchEthereumChain',
-          params: [{ chainId }],
-        })
-      } catch (error) {
-        if (error.code === 4902) {
-          await this.handleAddNetwork(this.sharedState.currentConfig.crossToNetwork)
-        }
-      }
-    },
-    changeSideNetwork() {
-      const { crossToNetwork: hostNetwork } = this.sideNetworkConfig
-      store.state.isConnected = false
-      const rskConfig = this.sideNetworkConfig.isRsk ? this.sideNetworkConfig : hostNetwork
-      const sideConfig = this.sideNetworkConfig.isRsk ? hostNetwork : this.sideNetworkConfig
-
-      store.initMainSettings(hostNetwork.networkId, rskConfig, sideConfig)
-    },
   },
 }
 </script>

src/components/layouts/Sider.vue

@@ -0,0 +1,45 @@
+<template>
+  <aside class="sider">
+    <div class="h-100">
+      <div class="sider-logo">
+        <a class="navbar-brand" href="https://rsk.co">
+          <img
+            id="logo"
+            src="../../assets/img/bridge-logo.png"
+            class="logo"
+            alt="RSK Token Bridge"
+          />
+        </a>
+      </div>
+      <Menu />
+    </div>
+    <div class="fixed-bottom w-100 m-4">
+      <a id="help" class="text-primary" href="https://developers.rsk.co/slack/">
+        Do you need help?
+      </a>
+    </div>
+  </aside>
+</template>
+
+<script>
+import Menu from '@/components/layouts/Menu'
+
+export default {
+  name: 'Sider',
+  components: { Menu },
+}
+</script>
+
+<style scoped>
+.sider {
+  width: 200px;
+  background-color: #ecf0f1;
+  height: 100vh;
+  position: sticky;
+  flex: 0 0 200px;
+  top: 0;
+}
+.sider-logo {
+  text-align: center;
+}
+</style>