Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update mobile nav
Browse files Browse the repository at this point in the history
ayumitk committed Nov 13, 2023
1 parent dfb2492 commit 0e25201
Showing 5 changed files with 244 additions and 27 deletions.
40 changes: 20 additions & 20 deletions src/components/header/mobile/AstarDomains.vue
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
<template>
<div>
<div v-if="width <= screenSize.sm" class="text--title">Astar Domains</div>
<div class="wrapper--domains">
<a
v-for="(t, index) in items"
:key="index"
class="link"
:href="t.link"
target="_blank"
rel="noopener noreferrer"
>
<img :src="t.img" :alt="t.title" />
<span>{{ t.title }}</span>
</a>
</div>
<div class="wrapper--domains">
<a
v-for="(t, index) in items"
:key="index"
class="link"
:href="t.link"
target="_blank"
rel="noopener noreferrer"
>
<img :src="t.img" :alt="t.title" />
<span>{{ t.title }}</span>
</a>
</div>
</template>
<script lang="ts">
@@ -75,8 +72,14 @@ export default defineComponent({
<style lang="scss" scoped>
.wrapper--domains {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 40px 12px;
padding: 0 16px;
@media (min-width: $sm) {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
padding: 0;
}
}
.link {
font-weight: 500;
@@ -107,7 +110,4 @@ export default defineComponent({
}
}
}
.text--title {
margin-bottom: 24px;
}
</style>
89 changes: 89 additions & 0 deletions src/components/header/mobile/BlogPosts.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<template>
<div class="wrapper--blog-posts">
<div class="container--blog-posts">
<div
v-for="(t, index) in items"
:key="index"
class="card--blog-post"
@click="goToLink(t.link)"
>
<img :src="t.img" :alt="t.title" />
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { useQuery } from '@vue/apollo-composable';
import gql from 'graphql-tag';
interface Data {
img: string;
title: string;
link: string;
}
export default defineComponent({
components: {},
setup() {
// The subsocial space where the news updates come from: https://polkaverse.com/10802
const astarSpace = 10802;
const items = ref<Data[]>([]);
const { result, error } = useQuery(gql`
query PostsBySpaceId {
posts(where: { space: { id_eq: "${astarSpace}" }, AND: { hidden_not_eq: true } }, orderBy: id_DESC, limit: 5) {
img: image
title
link: slug
}
}
`);
watch(
[result, error],
async () => {
if (result.value) {
items.value = result.value.posts.map((x: Data) => {
return {
img: `https://ipfs.subsocial.network/ipfs/${x.img}`,
title: x.title,
link: `https://astar.network/blog/${x.link}`,
};
});
}
},
{ immediate: true }
);
const goToLink = (link: string): void => {
window.open(link, '_blank');
};
return {
items,
goToLink,
};
},
});
</script>
<style lang="scss" scoped>
.wrapper--blog-posts {
padding: 16px;
overflow-x: auto;
.container--blog-posts {
display: flex;
gap: 8px;
width: 1532px;
}
.card--blog-post {
width: 300px;
border-radius: 16px;
overflow: hidden;
img {
aspect-ratio: 16/9;
object-fit: cover;
width: 100%;
}
}
}
</style>
5 changes: 2 additions & 3 deletions src/components/header/mobile/CommunityLinks.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<template>
<div class="wrapper--community">
<div class="text--title">Astar Network is owned by community</div>
<button class="btn--feedback">Give us feedback</button>
<div class="text--title">Astar Network is owned by the community</div>
</div>
</template>
<script lang="ts">
@@ -65,7 +64,7 @@ export default defineComponent({
background-color: $navy-1;
color: white;
text-align: center;
padding: 40px 16px;
padding: 0 16px;
}
.text--title {
font-weight: 900;
119 changes: 115 additions & 4 deletions src/components/header/mobile/MobileNav.vue
Original file line number Diff line number Diff line change
@@ -13,28 +13,111 @@

<q-slide-transition :duration="150">
<div v-show="showNav" class="wrapper--mobile-nav">
<nav class="links">
<router-link
:to="RoutePath.Assets"
:class="['link', path === 'assets' && 'active-link']"
@click="showNav = !showNav"
>
<div class="column--item">
<span>My Assets</span>
</div>
</router-link>

<router-link
v-if="network.isStoreEnabled"
:to="RoutePath.DappStaking"
:class="['link', path === 'dapp-staking' && 'active-link']"
@click="showNav = !showNav"
>
<div class="column--item">
<span class="text--link">
{{ $t('common.staking') }}
</span>
</div>
</router-link>

<button
v-if="isZkatana"
:disabled="true"
:class="['link', path === 'dashboard' && 'active-link']"
>
<div class="column--item column--item--dashboard">
<span class="text--link">Data</span>
</div>
</button>

<router-link
v-else
:to="RoutePath.Dashboard"
:class="['link', path === 'dashboard' && 'active-link']"
@click="showNav = !showNav"
>
<div class="column--item column--item--dashboard">
<span class="text--link">Data</span>
</div>
</router-link>
</nav>

<astar-domains />
<blog-posts />
<community-links />
<settings />

<div class="footer--mobile-nav">
<div>Astar Network © 2023 Built by Astar Foundation</div>
<div class="footer--mobile-nav__links">
<a href="https://astar.network/term-of-use" target="_blank" rel="noopener noreferrer">
{{ $t('disclaimer.terms') }}
</a>
<a
href="https://astar.network/privacy-policy"
target="_blank"
rel="noopener noreferrer"
>
{{ $t('disclaimer.privacy') }}
</a>
</div>
</div>
</div>
</q-slide-transition>
</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { defineComponent, ref, computed } from 'vue';
import { useBreakpoints } from 'src/hooks';
import { Path as RoutePath } from 'src/router/routes';
import { useRouter } from 'vue-router';
import { useNetworkInfo } from 'src/hooks';
import { useStore } from 'src/store';
import { providerEndpoints } from 'src/config/chainEndpoints';
import AstarDomains from 'src/components/header/mobile/AstarDomains.vue';
import CommunityLinks from 'src/components/header/mobile/CommunityLinks.vue';
import BlogPosts from 'src/components/header/mobile/BlogPosts.vue';
import Settings from 'src/components/header/mobile/Settings.vue';
export default defineComponent({
components: { AstarDomains, CommunityLinks },
components: { AstarDomains, CommunityLinks, BlogPosts, Settings },
setup() {
const { width, screenSize } = useBreakpoints();
const showNav = ref<boolean>(false);
const router = useRouter();
const path = computed(() => router.currentRoute.value.path.split('/')[2]);
const { isZkatana } = useNetworkInfo();
const store = useStore();
const currentNetworkIdx = computed(() => store.getters['general/networkIdx']);
const network = ref(providerEndpoints[currentNetworkIdx.value]);
return {
width,
screenSize,
showNav,
path,
RoutePath,
network,
isZkatana,
};
},
});
@@ -66,11 +149,39 @@ export default defineComponent({
}
.wrapper--mobile-nav {
width: 100vw;
height: calc(100vh - 64px);
background-color: white;
background-color: $navy-1;
position: absolute;
left: 0;
top: 64px;
z-index: 1;
color: $gray-1;
display: flex;
flex-direction: column;
gap: 40px;
padding: 40px 0;
}
.links {
padding: 0 16px;
a {
font-size: 24px;
font-weight: 800;
line-height: 64px;
}
}
.footer--mobile-nav {
padding: 0 16px;
text-align: center;
font-size: 12px;
color: $gray-3;
.footer--mobile-nav__links {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 8px;
a {
color: $astar-blue;
}
}
}
</style>
18 changes: 18 additions & 0 deletions src/components/header/mobile/Settings.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<template>
<div class="wrapper--settings">
<div class="text--title">{{ $t('sidenavi.settings') }}</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
components: {},
setup() {},
});
</script>
<style lang="scss" scoped>
.wrapper--settings {
text-align: center;
}
</style>

0 comments on commit 0e25201

Please sign in to comment.