swarmlab-hybrid/src/App.vue

<template>
  <div id="app">

<nav class="navbar navbar-light navbar-expand-md bg-light justify-content-md-center justify-content-start">
        <b-navbar-brand class="logo simple-text ti-swarmlab text-secondary">
          Swarmlab.io
        </b-navbar-brand>
    <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
        <ul class="navbar-nav mx-auto text-md-center text-left">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a> 
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"
                          @click="hybrid('bootstrap')"
                >myNetwork</a>
            </li>
            <li class="nav-item my-auto">
                <a class="nav-link navbar-brand mx-0 d-none d-md-inline" href="">Hybrid</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a> 
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a> 
            </li>
        </ul>
        <ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
              <b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item>
              <b-nav-item > | </b-nav-item>
              <b-nav-item :href="'https://api-client.swarmlab.io:8088/?token='+ token" target="_swarmlab"> Lab_onDemand </b-nav-item>
              <b-nav-item >  </b-nav-item>
        </ul>
    </div>
</nav>


      <!-- ***************** container items ****************** -->
        <b-row>
          <b-col cols="12">


             <network-table
                style="background-color: #f8f9fa"
              >
              </network-table>


          </b-col>
        </b-row>
        <b-row>
          <b-col cols="12">
<!--
             <doc-grep
                style="background-color: #f8f9fa"
              >
              </doc-grep>

-->
          </b-col>
        </b-row>




  </div>
</template>

<script>
import "@/assets/css/themify-icons.css";

//import NetworkTable from "./components/mynetwork/mytable.vue";
import NetworkTable from "./components/mynetwork.vue";

export default {
  name: 'app',
  components: {
    NetworkTable
  },
  data() {
    return {
      show: true,
      token: '',
      SwarmabAsciiLabTemplate:''
    }
  },
	mounted() {
  },
	created() {
  },
  methods: {
   hybrid(action) {
          console.log(action)
    }

  }
}
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=Lato:400,700');


  body {
    background: #EEF1F4 !important;
  }

  .nav-background {
    background: #353535;
  }

  .ti-swarmlab:before {
        position: relative;
        top:-5px;
        right:-8px;
        font-size: 1.5em;
        font-weight: 300;
        content: "\e606";
        color: #222;
        color: #74B3C8;
        border-color: #c60000;
}

.ti-themify-logo:before {
        content: "\e6d1";
}

  .menoutext {
    font-family: 'Lato', sans-serif !important;
  }

</style>