styles: updated the sidebar (#1031)

* styles: updated app logo * styles: updated sidebar * styles: updated sidebar (2)
AstarNetwork · Nov 16, 2023 · 95a90b2 · 95a90b2
1 parent 15f4a4c
commit 95a90b2
Show file tree

Hide file tree

Showing 6 changed files with 175 additions and 48 deletions.
diff --git a/src/assets/img/astar_logo_v2.svg b/src/assets/img/astar_logo_v2.svg
diff --git a/src/components/common/Logo.vue b/src/components/common/Logo.vue
@@ -1,5 +1,5 @@
 <template>
-  <img src="~assets/img/astar_logo.png" width="200" height="78" />
+  <img src="~assets/img/astar_logo_v2.svg" class="icon--logo" />
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
@@ -10,3 +10,16 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss">
+@import 'src/css/quasar.variables.scss';
+
+.icon--logo {
+  width: 142px;
+  height: 40px;
+  margin-left: 12px;
+  @media (min-width: $lg) {
+    margin-top: 12px;
+  }
+}
+</style>
diff --git a/src/components/sidenav/SidebarDesktop.vue b/src/components/sidenav/SidebarDesktop.vue
@@ -91,29 +91,7 @@
           </div>
         </router-link>
       </div>
-      <div @mouseover="hoverNFT = true" @mouseleave="hoverNFT = false">
-        <router-link
-          to="#"
-          :class="['link', $route.path.split('/')[2] === 'astar-nft' ? 'activeLink' : '']"
-        >
-          <astar-icon-base
-            :class="['icon-add', isShiden ? 'shiden' : '']"
-            stroke="currentColor"
-            icon-name="staking"
-          >
-            <icon-side-nft />
-          </astar-icon-base>
-          <div class="row--item">
-            <astar-text type="H4">NFT</astar-text>
-          </div>
-        </router-link>
-        <balloon
-          class="balloon"
-          :is-balloon="hoverNFT"
-          :is-balloon-closing="!hoverNFT"
-          :text="$t('sidenavi.comingsoon')"
-        />
-      </div>
+
       <div>
         <a :class="['link']" href="https://astar.network/community/ecosystem/" target="_blank">
           <astar-icon-base :class="['icon-add', isShiden ? 'shiden' : '']" icon-name="ecosystem">
@@ -154,19 +132,15 @@ import Logo from '../common/Logo.vue';
 import { useRouter } from 'vue-router';
 import { Path as RoutePath } from 'src/router/routes';
 import IconEcosystem from './components/IconEcosystem.vue';
-import Balloon from './components/Balloon.vue';
 import SidebarOptionDesktop from './SidebarOptionDesktop.vue';
 import { decentralizedOrigin } from 'src/links';
 import { socialUrl } from 'src/links';
-import IconSideNft from './components/IconSideNFT.vue';
 
 export default defineComponent({
   components: {
     Logo,
     IconEcosystem,
-    Balloon,
     SidebarOptionDesktop,
-    IconSideNft,
   },
   setup() {
     const { isOpen } = useSidebar();
@@ -181,7 +155,6 @@ export default defineComponent({
     const router = useRouter();
     const path = computed(() => router.currentRoute.value.path.split('/')[2]);
 
-    const hoverNFT = ref<boolean>(false);
     const isDecentralized = computed<boolean>(() => {
       return window.location.origin === decentralizedOrigin;
     });
@@ -210,7 +183,6 @@ export default defineComponent({
       router,
       path,
       RoutePath,
-      hoverNFT,
       isDecentralized,
       socialUrl,
       isZkatana,

diff --git a/src/components/sidenav/SidebarOptionDesktop.vue b/src/components/sidenav/SidebarOptionDesktop.vue
@@ -130,11 +130,13 @@ svg {
 .sidebar-button-container {
   display: flex;
   align-items: center;
-  background-color: $navy-3;
   border-radius: 6px;
   padding: 10px;
   margin-bottom: 10px;
   cursor: pointer;
+  &:hover {
+    background-color: $navy-3;
+  }
 }
 
 .menu-item {

diff --git a/src/components/sidenav/components/IconSideNFT.vue b/src/components/sidenav/components/IconSideNFT.vue
diff --git a/src/components/sidenav/styles/sidebar-desktop.scss b/src/components/sidenav/styles/sidebar-desktop.scss
@@ -26,7 +26,7 @@
 .sidebar {
   width: 224px;
   padding-top: 24px;
-  background: linear-gradient(140deg, #070c25 50%, #253585 80%, #3e2371 90%);
+  background: #081029;
   display: flex;
   flex-direction: column;
   z-index: 1;
@@ -98,19 +98,19 @@
 }
 
 .menu__assets {
-  margin-top: -322px;
+  margin-top: -276px;
 }
 
 .menu__dashboard {
-  margin-top: -276px;
+  margin-top: -230px;
 }
 
 .menu__staking {
-  margin-top: -230px;
+  margin-top: -184px;
 }
 
 .menu__bridge {
-  margin-top: -184px;
+  margin-top: -138px;
 }
 
 .dummy-row {
@@ -125,9 +125,6 @@
   .menu__indicator {
     background: $navy-3;
   }
-  .sidebar {
-    background: linear-gradient(140deg, #070c25 50%, #253585 80%, #3e2371 90%);
-  }
   .link {
     color: $gray-1;
   }