feat: implement navbar

witnet · Jun 3, 2021 · 73129f4 · 73129f4
1 parent 41f2d60
commit 73129f4
Show file tree

Hide file tree

Showing 6 changed files with 274 additions and 2,600 deletions.
diff --git a/packages/ui/assets/styles/main.scss b/packages/ui/assets/styles/main.scss
@@ -30,6 +30,19 @@
 
   --fieldset-title: white;
   --fieldset-background: #FFFFFF08;
+
+  //Logo
+
+  --logo-main: white;
+  --logo-dot: #41BEA5;
+
+  //NavBar
+
+  --nav-bar-background: #2d2c39a2;
+
+  // links
+
+  --text-hover: #41BEA5;
 }
 
 .dark-mode {
@@ -65,6 +78,19 @@
 
   --fieldset-title: white;
   --fieldset-background: #FFFFFF08;
+
+  //Logo
+
+  --logo-main: white;
+  --logo-dot: #41BEA5;
+
+  //NavBar
+
+  --nav-bar-background: #2d2c399d;
+
+  // links
+
+  --text-hover: #41BEA5;
 }
 
 .light-mode {
@@ -102,6 +128,18 @@
 
   --fieldset-title: #2D2C39;
   --fieldset-background: #2d2c3910;
+
+  //Logo
+  --logo-dot: #41BEA5;
+  --logo-main: #1F1F24;
+
+  //NavBar
+
+  --nav-bar-background: #ffffffb0;
+
+  // links
+
+  --text-hover: #41BEA5;
 }
 
 h1 {

diff --git a/packages/ui/components/GithubLogo.vue b/packages/ui/components/GithubLogo.vue
@@ -1,24 +1,33 @@
 <template>
   <svg
+    class="github-logo"
     width="33"
     height="32"
     viewBox="0 0 33 32"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
+      class="logo"
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M16.0049 0.00146484C7.16488 0.00146484 0.00488281 7.16146 0.00488281 16.0015C0.00488281 23.0815 4.58488 29.0615 10.9449 31.1815C11.7449 31.3215 12.0449 30.8415 12.0449 30.4215C12.0449 30.0415 12.0249 28.7815 12.0249 27.4415C8.00488 28.1815 6.96488 26.4615 6.64488 25.5615C6.46488 25.1015 5.68488 23.6815 5.00488 23.3015C4.44488 23.0015 3.64488 22.2615 4.98488 22.2415C6.24488 22.2215 7.14488 23.4015 7.44488 23.8815C8.88488 26.3015 11.1849 25.6215 12.1049 25.2015C12.2449 24.1615 12.6649 23.4615 13.1249 23.0615C9.56488 22.6615 5.84488 21.2815 5.84488 15.1615C5.84488 13.4215 6.46488 11.9815 7.48488 10.8615C7.32488 10.4615 6.76488 8.82146 7.64488 6.62146C7.64488 6.62146 8.98488 6.20147 12.0449 8.26147C13.3249 7.90146 14.6849 7.72146 16.0449 7.72146C17.4049 7.72146 18.7649 7.90146 20.0449 8.26147C23.1049 6.18147 24.4449 6.62146 24.4449 6.62146C25.3249 8.82146 24.7649 10.4615 24.6049 10.8615C25.6249 11.9815 26.2449 13.4015 26.2449 15.1615C26.2449 21.3015 22.5049 22.6615 18.9449 23.0615C19.5249 23.5615 20.0249 24.5215 20.0249 26.0215C20.0249 28.1615 20.0049 29.8815 20.0049 30.4215C20.0049 30.8415 20.3049 31.3415 21.1049 31.1815C27.4249 29.0615 32.0049 23.0615 32.0049 16.0015C32.0049 7.16146 24.8449 0.00146484 16.0049 0.00146484Z"
-      fill="#41BEA5"
+      fill="#ffff"
     />
   </svg>
 </template>
 
-<style>
-.NuxtLogo {
-  animation: 1s appear;
-  margin: auto;
+<style scoped lang="scss">
+.github-logo {
+  width: 24px;
+  .logo {
+    fill: var(--logo-main);
+  }
+  &:hover {
+    .logo {
+      fill: var(--text-hover);
+    }
+  }
 }
 
 @keyframes appear {

diff --git a/packages/ui/components/Hero.vue b/packages/ui/components/Hero.vue
@@ -2,6 +2,7 @@
   <div class="section">
     <NavBar />
     <div class="main">
+      <ChartExample />
       <!-- Select example -->
       <!-- <Select
         :options="options"
@@ -60,11 +61,10 @@ export default {
   padding: 0 180px;
   min-height: 100vh;
   display: grid;
-  grid-template-rows: max-content 1fr;
+  grid-template-rows: 150px 1fr;
   grid-template-columns: 1fr;
 
   .main {
-    margin-top: 15vh;
     display: flex;
     flex-direction: column;
     align-items: left;

diff --git a/packages/ui/components/NavBar.vue b/packages/ui/components/NavBar.vue
@@ -1,22 +1,31 @@
 <template>
-  <div :class="{ drop: isMenuVisible }">
+  <div class="nav-container" :class="{ drop: isMenuVisible }">
     <nav class="navbar">
+      <h1 class="logo-container">
+        <WitnetLogo class="witnet-logo" />
+        <p class="logo-subtitle">DATA</p>
+        <p class="logo-subtitle-color">FEED</p>
+      </h1>
       <label class="responsive-menu" @click="toggleMenu">&#9776;</label>
       <transition name="dropdown" class="dropdown">
         <ul class="tab-container" :class="{ visible: isMenuVisible }">
-          <li @mouseover="hover = true" @mouseleave="hover = false">
-            <ThemeSwitch />
+          <li class="tab" @mouseover="hover = true" @mouseleave="hover = false">
+            About
+          </li>
+          <li class="tab" @mouseover="hover = true" @mouseleave="hover = false">
+            <GithubLogo />
           </li>
+          <!-- <li class="tab" @mouseover="hover = true" @mouseleave="hover = false">
+            <ThemeSwitch />
+          </li> -->
         </ul>
       </transition>
     </nav>
   </div>
 </template>
 
 <script>
-import ThemeSwitch from './ThemeSwitch.vue'
 export default {
-  components: { ThemeSwitch },
   data() {
     return {
       hover: false,
@@ -44,18 +53,35 @@ export default {
 <style scoped lang="scss">
 .navbar {
   display: flex;
-  position: fixed;
+  position: absolute;
   left: 0;
   right: 0;
   top: 0;
-  height: 10vh;
-  justify-content: flex-end;
+  background: var(--nav-bar-background);
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1500px;
+  margin: 0 auto;
+  padding: 16px 140px 16px 140px;
+
   .logo-container {
-    display: flex;
+    display: grid;
+    grid-template-columns: max-content max-content;
+    grid-template-rows: 1fr 1fr;
     align-items: center;
     text-decoration: none;
-    .logo {
-      width: 80px;
+    column-gap: 8px;
+
+    .witnet-logo {
+      grid-row: 1 / span 2;
+    }
+    .logo-subtitle-color {
+      align-self: flex-start;
+      color: var(--logo-dot);
+    }
+    .logo-subtitle {
+      align-self: flex-end;
+      color: var(--logo-main);
     }
   }
   .responsive-menu {
@@ -71,57 +97,16 @@ export default {
       display: block;
     }
     .tab {
+      cursor: pointer;
       font-size: 1.12rem;
       display: flex;
+      font-weight: 600;
       color: var(--text);
       align-items: center;
       text-decoration: none;
-      padding: 24px 32px;
-    }
-    .language-btn {
-      //until we have translations
-      display: none;
-      //
-      display: flex;
-      padding: 0 8px;
-      height: 30px;
-      margin-right: 1vw;
-      align-items: center;
-      text-justify: center;
-      border: 1px solid $green-1;
-      color: $green-1;
-      cursor: pointer;
-      &:active {
-        outline: none;
-      }
+      margin: 24px 32px;
       &:hover {
-        opacity: 0.75;
-      }
-      .arrow {
-        padding-left: 8px;
-        width: 8px;
-      }
-    }
-    .drop-down {
-      position: absolute;
-      display: block;
-      width: 100px;
-      // margin-top: 16px;
-      flex-direction: column;
-      & .drop-down-item {
-        cursor: pointer;
-        border: none;
-        background-color: none;
-        color: var(--text);
-        padding: 8px;
-        border-bottom: 1px solid $white;
-        &:hover {
-          opacity: 0.75;
-        }
-        &:active {
-          box-shadow: none;
-          outline: none;
-        }
+        color: var(--text-hover);
       }
     }
   }
@@ -136,14 +121,14 @@ export default {
     overflow-y: hidden;
   }
   .navbar {
-    background-color: transparent;
+    left: 0;
+    right: 0;
+    top: 0;
     display: block;
-    position: fixed;
+    position: relative;
+    padding: 0;
     .logo-container {
-      .logo {
-        margin: 10px;
-        width: 70px;
-      }
+      padding: 16px;
     }
     .responsive-menu {
       display: block;
@@ -153,19 +138,19 @@ export default {
       right: 10px;
     }
     .tab-container {
-      background-color: transparent;
       list-style: none;
       display: none;
       text-align: center;
       height: 100vh;
       width: 100vw;
       padding: 0;
       margin: 0;
+      cursor: pointer;
       &.visible {
         display: block;
       }
       .tab {
-        border-bottom: 1px solid $white;
+        cursor: pointer;
         display: block;
         color: var(--text);
         align-items: center;
@@ -175,32 +160,6 @@ export default {
           display: none;
         }
       }
-      .language-btn {
-        display: none;
-        color: var(--text);
-        justify-content: space-between;
-        margin: 16px 50px 0 50px;
-        border: none;
-        border-bottom: 1px solid $white;
-        &:hover {
-          color: $green-1;
-        }
-        .arrow {
-          display: block;
-        }
-      }
-      .drop-down {
-        position: relative;
-        border-top: none;
-        margin: 0 auto;
-        padding: 0;
-        width: 275px;
-        .drop-down-item {
-          border-bottom: 1px solid $white;
-          padding: 10px;
-          text-align: left;
-        }
-      }
     }
   }
 }

diff --git a/packages/ui/components/WitnetLogo.vue b/packages/ui/components/WitnetLogo.vue
@@ -0,0 +1,51 @@
+<template>
+  <svg
+    class="WitnetLogo"
+    width="94"
+    height="83"
+    viewBox="0 0 94 83"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      class="main"
+      d="M78.5442 0H71.0963L71.0645 82.1053H78.5128V56.3729H85.1194V48.8212H78.5128L78.5442 18.246H85.1507V10.6943H78.5442L78.5442 0Z"
+    />
+    <path class="main" d="M63.3913 10.696H56.0591V43.9797H63.3913V10.696Z" />
+    <path class="main" d="M63.3345 0H56.1147V7.69927H63.3345V0Z" />
+    <path
+      class="main"
+      d="M6.87888 43.9798H48.3702V10.6961H41.0428V36.6524H28.3865V10.6961H21.059V36.6524H10.0688C8.55456 36.6524 7.32697 35.4248 7.32697 33.9105V10.696H0V37.1C0 40.8996 3.08004 43.9797 6.87878 43.9797"
+    />
+    <path
+      class="main"
+      d="M22.6993 48.8225H0.441406V82.0848H7.76885V56.1504H19.5098C21.0247 56.1504 22.251 57.378 22.251 58.8923V82.0849H29.5794V55.7023C29.5794 51.9027 26.4994 48.8226 22.6992 48.8226"
+    />
+    <path
+      class="main"
+      d="M46.4698 56.6423C49.8299 54.8565 53.0758 55.4677 55.8152 57.7367L41.7503 65.2131C41.4584 61.6433 42.9962 58.4889 46.4699 56.6421L46.4698 56.6423ZM56.228 74.7169C51.9472 76.9932 46.9931 75.7669 43.8933 71.3326L66.8089 59.151C66.4191 58.2192 65.9405 57.3358 65.3979 56.4967C65.277 56.3034 65.1472 56.1232 65.0211 55.9365C61.9359 51.5525 56.8466 48.6807 51.0781 48.6807C48.8097 48.6807 46.6497 49.1325 44.6698 49.9363C44.5228 49.9998 44.3747 50.0559 44.2277 50.1231C43.6231 50.3888 43.0413 50.6957 42.4758 51.0261C41.958 51.331 41.4696 51.6608 40.9962 52.003C36.7761 55.1058 34.0264 60.0911 34.0264 65.7316C34.0264 75.1487 41.6607 82.7825 51.0777 82.7825C59.6283 82.7825 66.6887 76.4809 67.9185 68.2722C66.0817 68.267 61.1858 68.2538 61.1512 68.2512C60.5368 71.0295 58.7744 73.3638 56.2273 74.7183"
+    />
+    <path class="dot" d="M86.5591 82.0875H93.9999V74.6467H86.5591V82.0875Z" />
+  </svg>
+</template>
+
+<style scoped lang="scss">
+.WitnetLogo {
+  animation: 1s appear;
+  margin: auto;
+}
+.main {
+  /* // white */
+  fill: var(--logo-main);
+}
+.dot {
+  /* // #41BEA5 */
+  fill: var(--logo-dot);
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+}
+</style>