src/components/TopNav.vue

   1 <template>
   2   <header>
   3     <div class="container">
   4       <h1><router-link to="/" class="logo">Giphy test</router-link></h1>
   5     </div>
   6   </header>
   7 </template>
   8
   9 <script>
  10 export default {
  11   name: 'top-nav'
  12 }
  13 </script>
  14
  15 <style scoped>
  16 header {
  17   padding: 3rem;
  18
  19   text-transform: uppercase;
  20   background-color: #f4f4f4;
  21 }
  22
  23 h1 {
  24   margin: 0;
  25   display: inline-block;
  26
  27 }
  28
  29 .logo {
  30   padding: 0.3rem 1rem;
  31   text-decoration: none;
  32   background-color: #222;
  33   color: #FFF;
  34 }
  35 </style>