commit 4e6589b78d6eb5ed1c9e3c598859f8dc41c5566f
author Bhavesh Asanabada <asanabhavesh@gmail.com> Thu Jul 14 23:01:04 2022 +0530
committer Suresh Marru <smarru@apache.org> Mon Sep 12 13:16:20 2022 -0400
tree df1a34d7738d87da454db110543dd9b629749e4b
parent d1d9c666a887aaf5ed64ea86b91b74e06d732f55

Added navbar component

gsoc2022/smilesdb/smiles_dashboard/src/components/SEAGrid.vue

diff --git a/gsoc2022/smilesdb/smiles_dashboard/src/components/SEAGrid.vue b/gsoc2022/smilesdb/smiles_dashboard/src/components/SEAGrid.vue
index af7f29c..ac225e8 100644
--- a/gsoc2022/smilesdb/smiles_dashboard/src/components/SEAGrid.vue
+++ b/gsoc2022/smilesdb/smiles_dashboard/src/components/SEAGrid.vue
@@ -1,4 +1,11 @@
 <template>
+   <div class="navbar">
+    <ul>
+      <li><a href="../components/SEAGrid.vue">SEAGrid Data Catalog</a></li>
+      <li><a href="../components/SearchRoute.vue">Search</a></li>
+      <li><a href="../components/DirectoryBrowser.vue">Directory Browser</a></li>
+    </ul>
+  </div>
   <div class="container">
     <h1>Welcome to SEAGrid Data Catalog</h1>
     <p>SEAGrid Data Catalog provides a sleek web interface for you to browse and
@@ -22,6 +29,7 @@
 
 <style scoped>
 
+
   .container{
     width: 70em;
     height: 80em;
@@ -46,4 +54,33 @@
     height: 500px;
     width: 700px;
   }
+    .navbar{
+    height: 3em;
+    width:100%;
+    background-color: #2C2C2C;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  li{
+    color: #edf0f1;
+    text-decoration: none;
+    font-size: 18px;
+  }
+
+  .navbar li{
+    display: inline-block;
+    padding: 0px 20px;
+  }
+
+  .navbar a{
+    color: #edf0f1;
+    text-decoration: none;
+    transition: all 0.3s ease 0s;
+  }
+
+  .navbar a:hover{
+    color: #0088a9;
+  }
 </style>
\ No newline at end of file