Sidebar improvements (#858)

* Community navigation * Settings menu * Locale changes styling * Additional locale selector styling * Removed console.log * PR comments resolved
AstarNetwork · Jul 14, 2023 · 4ea4234 · 4ea4234
1 parent 4cb6bee
commit 4ea4234
Show file tree

Hide file tree

Showing 5 changed files with 261 additions and 49 deletions.
diff --git a/src/components/common/LocaleChanger.vue b/src/components/common/LocaleChanger.vue
@@ -1,47 +1,49 @@
 <template>
-  <div class="tw-relative tw-inline-block tw-rounded-lg tw-bg-black">
-    <select v-model="$i18n.locale" class="select-language" placeholder="Regular input">
-      <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang.code">
-        {{ lang.text }}
-      </option>
-    </select>
-
-    <div
-      class="
-        icon--select
-        tw-absolute tw-inset-y-0 tw-right-0 tw-flex tw-items-center tw-px-2 tw-pointer-events-none
-      "
-    >
-      <svg class="tw-w-4 tw-h-4 tw-fill-current" viewBox="0 0 20 20">
-        <path
-          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-          clip-rule="evenodd"
-          fill-rule="evenodd"
-        ></path>
-      </svg>
-    </div>
-  </div>
+  <q-select
+    v-model="selectedLang"
+    filled
+    :options="langs"
+    option-value="code"
+    option-label="text"
+    :hide-dropdown-icon="false"
+  >
+    <template #append>
+      <q-icon name="language" />
+    </template>
+  </q-select>
 </template>
 
 <script lang="ts">
 import { LOCAL_STORAGE } from 'src/config/localStorage';
 import { languagesSelector } from 'src/i18n';
-import { defineComponent, watch } from 'vue';
+import { defineComponent, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
   data() {
     const { locale } = useI18n();
+    const selectedLang = ref(languagesSelector[0]);
 
     watch(
       [locale],
       () => {
+        selectedLang.value =
+          languagesSelector.find((lang) => lang.code === locale.value) || languagesSelector[0];
+        console.log(selectedLang.value);
+      },
+      { immediate: true }
+    );
+
+    watch(
+      [selectedLang],
+      () => {
+        locale.value = selectedLang.value.code;
         localStorage.setItem(LOCAL_STORAGE.SELECTED_LANGUAGE, locale.value);
       },
       { immediate: false }
     );
 
-    return { langs: languagesSelector };
+    return { langs: languagesSelector, selectedLang };
   },
 });
 </script>
@@ -55,7 +57,7 @@ export default defineComponent({
 .select-language {
   background: #d3d6dc;
   color: $navy-1;
-  width: 95px;
+  width: 100%;
   height: 36px;
   padding-left: 15px;
   appearance: none;
@@ -72,14 +74,22 @@ export default defineComponent({
     background: #fff;
   }
 }
+</style>
 
-.body--dark {
-  .select-language {
-    background: #9d9ccc;
-    color: black;
-  }
-  .icon--select {
-    color: black;
-  }
+<style lang="scss">
+.q-select {
+  font-size: 16px;
+}
+
+.q-menu {
+  font-size: 16px;
+}
+
+.q-field__native {
+  color: $gray-1;
+}
+
+.q-icon {
+  color: $gray-4;
 }
 </style>
diff --git a/src/components/sidenav/SidebarDesktop.vue b/src/components/sidenav/SidebarDesktop.vue
@@ -91,15 +91,22 @@
           </div>
         </a>
       </div>
+      <div>
+        <a :class="['link']" :href="socialUrl.forum" target="_blank">
+          <astar-icon-base :class="['icon-add', isShiden ? 'shiden' : '']" icon-name="forum">
+            <astar-icon-forum />
+          </astar-icon-base>
+          <div class="row--item row--item-ecosystem">
+            <astar-text type="H4">{{ $t('sidenavi.forum') }}</astar-text>
+            <astar-icon-external-link />
+          </div>
+        </a>
+      </div>
       <div class="menu__indicator" :class="getIndicatorClass(path)" />
     </nav>
 
     <div class="wrapper--bottom">
-      <social-media-links />
-      <div class="wrapper--option">
-        <light-dark-mode />
-        <locale-changer />
-      </div>
+      <sidebar-option-desktop />
     </div>
   </div>
 </template>
@@ -109,26 +116,23 @@ import { defineComponent, ref, computed } from 'vue';
 import { useStore } from 'src/store';
 import { useSidebar } from 'src/hooks';
 import { providerEndpoints, endpointKey } from 'src/config/chainEndpoints';
-import LocaleChanger from '../common/LocaleChanger.vue';
-import SocialMediaLinks from '../common/SocialMediaLinks.vue';
-import LightDarkMode from '../common/LightDarkMode.vue';
 import Logo from '../common/Logo.vue';
 import { useRouter } from 'vue-router';
 import { Path as RoutePath } from 'src/router/routes';
-import IconSideNft from './components/IconSideNFT.vue';
 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: {
-    SocialMediaLinks,
-    LightDarkMode,
-    LocaleChanger,
     Logo,
-    IconSideNft,
     IconEcosystem,
     Balloon,
+    SidebarOptionDesktop,
+    IconSideNft,
   },
   setup() {
     const { isOpen } = useSidebar();
@@ -141,6 +145,7 @@ export default defineComponent({
 
     const router = useRouter();
     const path = computed(() => router.currentRoute.value.path.split('/')[2]);
+    console.log(path.value);
 
     const hoverNFT = ref<boolean>(false);
     const isDecentralized = computed<boolean>(() => {
@@ -170,6 +175,7 @@ export default defineComponent({
       RoutePath,
       hoverNFT,
       isDecentralized,
+      socialUrl,
     };
   },
 });

diff --git a/src/components/sidenav/SidebarMobile.vue b/src/components/sidenav/SidebarMobile.vue
@@ -1,3 +1,4 @@
+
 <template>
   <div>
     <div class="header">

diff --git a/src/components/sidenav/SidebarOptionDesktop.vue b/src/components/sidenav/SidebarOptionDesktop.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="sidebar--container sidebar-text">
+    <div class="sidebar-button-container">
+      <astar-icon-base class="community-icon">
+        <astar-icon-community />
+      </astar-icon-base>
+      {{ $t('sidenavi.community') }}
+      <q-menu anchor="top middle" self="center left">
+        <div class="menu-container sidebar-text">
+          <a :href="socialUrl.discord" target="_blank">
+            <div class="menu-item">
+              <astar-icon-base class="icon" viewBox="0 0 448 512" icon-name="Discord">
+                <astar-icon-discord />
+              </astar-icon-base>
+              {{ $t('sidenavi.discord') }}
+            </div>
+          </a>
+          <a :href="socialUrl.twitter" target="_blank">
+            <div class="menu-item">
+              <astar-icon-base class="icon" viewBox="0 0 448 512" icon-name="Twitter">
+                <astar-icon-twitter />
+              </astar-icon-base>
+              {{ $t('sidenavi.twitter') }}
+            </div>
+          </a>
+          <a :href="socialUrl.telegram" target="_blank">
+            <div class="menu-item">
+              <astar-icon-base class="icon" viewBox="0 0 448 512" icon-name="Telegram">
+                <astar-icon-telegram />
+              </astar-icon-base>
+              {{ $t('sidenavi.telegram') }}
+            </div>
+          </a>
+          <a :href="socialUrl.reddit" target="_blank">
+            <div class="menu-item">
+              <astar-icon-base class="icon community-icon" icon-name="Reddit">
+                <astar-icon-reddit />
+              </astar-icon-base>
+              {{ $t('sidenavi.reddit') }}
+            </div>
+          </a>
+          <a :href="socialUrl.youtube" target="_blank">
+            <div class="menu-item">
+              <astar-icon-base class="icon community-icon" icon-name="YouTube">
+                <astar-icon-youtube />
+              </astar-icon-base>
+              {{ $t('sidenavi.youtube') }}
+            </div>
+          </a>
+          <a :href="socialUrl.github" target="_blank">
+            <div class="menu-item">
+              <astar-icon-base class="icon" viewBox="0 4 548 512" icon-name="Github">
+                <astar-icon-github />
+              </astar-icon-base>
+              {{ $t('sidenavi.github') }}
+            </div>
+          </a>
+        </div>
+      </q-menu>
+    </div>
+    <a :href="docsUrl.topPage" target="_blank">
+      <div class="sidebar-button-container">
+        <astar-icon-base class="community-icon">
+          <astar-icon-docs />
+        </astar-icon-base>
+        {{ $t('sidenavi.docs') }}
+      </div>
+    </a>
+    <div class="sidebar-button-container">
+      <astar-icon-base>
+        <astar-icon-3dots />
+      </astar-icon-base>
+      {{ $t('sidenavi.settings') }}
+      <q-menu anchor="top middle" self="center left" :square="false">
+        <div class="menu-container sidebar-text">
+          <div class="locale-container"><locale-changer /></div>
+          <div class="theme-container">
+            <span>{{ $t('sidenavi.theme') }}</span>
+            <light-dark-mode />
+          </div>
+        </div>
+      </q-menu>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { socialUrl, docsUrl } from 'src/links';
+import LocaleChanger from '../common/LocaleChanger.vue';
+import LightDarkMode from '../common/LightDarkMode.vue';
+
+export default defineComponent({
+  components: { LocaleChanger, LightDarkMode },
+  setup() {
+    return { socialUrl, docsUrl };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.sidebar--container {
+  padding: 0px 9px;
+}
+
+svg {
+  width: 20px;
+  height: 20px;
+  margin-right: 10px;
+}
+
+.icon {
+  color: $astar-blue;
+}
+
+.community-icon {
+  margin-top: 7px;
+}
+
+.menu-container {
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  padding: 8px;
+  border-radius: 6px;
+  row-gap: 10px;
+  background-color: $navy-1;
+}
+
+.sidebar-button-container {
+  display: flex;
+  align-items: center;
+  background-color: $navy-3;
+  border-radius: 6px;
+  padding: 10px;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  padding: 10px;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.02);
+  }
+}
+
+.sidebar-text {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  color: $gray-1;
+}
+
+.theme-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 12px;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.02);
+  }
+}
+
+.locale-container {
+  padding: 0px 0px;
+}
+</style>
+
+<style lang="scss">
+.q-menu {
+  border-radius: 6px;
+  background-color: $navy-1;
+  color: $gray-1;
+  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.8));
+}
+
+.q-field--filled .q-field__control:before {
+  border-color: transparent;
+}
+
+.q-field--filled:hover .q-field__control:before {
+  border-color: transparent;
+}
+
+.q-field--filled .q-field__control {
+  border-radius: 6px;
+}
+</style>