Skip to content

Commit 6b34e3d

Browse files
AlexanderDevitskyAlexander Devitsky
authored and
Marcin Kwiatkowski
committed
feat: mobile menu (#569)
Co-authored-by: Alexander Devitsky <[email protected]>
1 parent 7f59fdc commit 6b34e3d

File tree

4 files changed

+130
-45
lines changed

4 files changed

+130
-45
lines changed

‎packages/theme/components/BottomNavigation.vue‎

Lines changed: 50 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,68 @@
11
<template>
22
<!-- TODO: create logic with isActive prop for BottomNavigationItems -->
3-
<SfBottomNavigation class="navigation-bottom smartphone-only">
4-
<SfBottomNavigationItem
5-
:class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''"
6-
icon="home"
7-
size="20px"
8-
label="Home"
9-
@click="$router.push(app.localePath('/')) && (isMobileMenuOpen ? toggleMobileMenu() : false)"
10-
/>
11-
<SfBottomNavigationItem
12-
icon="menu"
13-
size="20px"
14-
label="Menu"
15-
@click="toggleMobileMenu"
16-
/>
17-
<SfBottomNavigationItem
18-
v-if="isAuthenticated"
19-
icon="heart"
20-
size="20px"
21-
label="Wishlist"
22-
@click="toggleWishlistSidebar"
23-
/>
24-
<SfBottomNavigationItem
25-
icon="profile"
26-
size="20px"
27-
label="Account"
28-
@click="handleAccountClick"
29-
/>
30-
<!-- TODO: add logic for label - if on Home then Basket, if on PDC then AddToCart etc. -->
31-
<SfBottomNavigationItem
32-
label="Basket"
33-
icon="add_to_cart"
34-
@click="toggleCartSidebar"
35-
>
36-
<template #icon>
37-
<SfCircleIcon aria-label="Add to cart">
38-
<SfIcon
39-
icon="add_to_cart"
40-
color="white"
41-
size="25px"
42-
:style="{margin: '0 0 0 -2px'}"
43-
/>
44-
</SfCircleIcon>
45-
</template>
46-
</SfBottomNavigationItem>
47-
</SfBottomNavigation>
3+
<div class="smartphone-only">
4+
<SfBottomNavigation class="navigation-bottom">
5+
<SfBottomNavigationItem
6+
:class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''"
7+
icon="home"
8+
size="20px"
9+
label="Home"
10+
@click="$router.push(app.localePath('/')) && (isMobileMenuOpen ? toggleMobileMenu() : false)"
11+
/>
12+
<SfBottomNavigationItem
13+
icon="menu"
14+
size="20px"
15+
label="Menu"
16+
@click="toggleMobileMenu"
17+
/>
18+
<SfBottomNavigationItem
19+
v-if="isAuthenticated"
20+
icon="heart"
21+
size="20px"
22+
label="Wishlist"
23+
@click="toggleWishlistSidebar"
24+
/>
25+
<SfBottomNavigationItem
26+
icon="profile"
27+
size="20px"
28+
label="Account"
29+
@click="handleAccountClick"
30+
/>
31+
<!-- TODO: add logic for label - if on Home then Basket, if on PDC then AddToCart etc. -->
32+
<SfBottomNavigationItem
33+
label="Basket"
34+
icon="add_to_cart"
35+
@click="toggleCartSidebar"
36+
>
37+
<template #icon>
38+
<SfCircleIcon aria-label="Add to cart">
39+
<SfIcon
40+
icon="add_to_cart"
41+
color="white"
42+
size="25px"
43+
:style="{margin: '0 0 0 -2px'}"
44+
/>
45+
</SfCircleIcon>
46+
</template>
47+
</SfBottomNavigationItem>
48+
</SfBottomNavigation>
49+
<MobileMenuSidebar />
50+
</div>
4851
</template>
4952

5053
<script>
5154
import { SfBottomNavigation, SfIcon, SfCircleIcon } from '@storefront-ui/vue';
5255
import { useUser } from '@vue-storefront/magento';
5356
import { defineComponent, useRouter, useContext } from '@nuxtjs/composition-api';
5457
import { useUiState } from '~/composables';
58+
import MobileMenuSidebar from '~/components/MobileMenuSidebar.vue';
5559
5660
export default defineComponent({
5761
components: {
5862
SfBottomNavigation,
5963
SfIcon,
6064
SfCircleIcon,
65+
MobileMenuSidebar,
6166
},
6267
setup() {
6368
const {

‎packages/theme/components/MobileMenuSidebar.vue‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<template>
2+
<SfSidebar
3+
:visible="isMobileMenuOpen"
4+
:title="$t('Menu')"
5+
class="mobile-menu-sidebar sf-sidebar--left"
6+
@close="toggleMobileMenu"
7+
>
8+
<SfList class="mobile-menu-sidebar__list">
9+
<SfMenuItem
10+
v-for="(category, index) in categoryTree"
11+
:key="index"
12+
:label="category.label"
13+
:link="localePath(getAgnosticCatLink(category))"
14+
class="mobile-menu-sidebar__item"
15+
@click.native="toggleMobileMenu"
16+
/>
17+
</SfList>
18+
</SfSidebar>
19+
</template>
20+
<script>
21+
import { SfSidebar, SfList, SfMenuItem } from '@storefront-ui/vue';
22+
import { defineComponent, computed } from '@nuxtjs/composition-api';
23+
import { categoryGetters, useCategory } from '@vue-storefront/magento';
24+
import { useUiHelpers, useUiState } from '~/composables';
25+
26+
export default defineComponent({
27+
name: 'MobileMenuSidebar',
28+
components: {
29+
SfSidebar,
30+
SfList,
31+
SfMenuItem,
32+
},
33+
setup() {
34+
const { categories } = useCategory('AppHeader:CategoryList');
35+
const { isMobileMenuOpen, toggleMobileMenu } = useUiState();
36+
const { getAgnosticCatLink } = useUiHelpers();
37+
38+
const categoryTree = computed(
39+
() => categoryGetters.getCategoryTree(categories.value?.[0])?.items.filter((c) => c.count > 0),
40+
);
41+
42+
return {
43+
categoryTree,
44+
isMobileMenuOpen,
45+
toggleMobileMenu,
46+
getAgnosticCatLink,
47+
};
48+
},
49+
});
50+
</script>
51+
52+
<style lang="scss" scoped>
53+
.mobile-menu-sidebar {
54+
--sidebar-z-index: 3;
55+
--overlay-z-index: 3;
56+
57+
&__list {
58+
.mobile-menu-sidebar__item {
59+
padding: var(--spacer-base) 0;
60+
--menu-item-font-size: 1.75rem;
61+
62+
&:not(:first-of-type) {
63+
border-top: 1px solid var(--c-light);
64+
}
65+
66+
&:not(:last-of-type) {
67+
border-bottom: 1px solid var(--c-light);
68+
}
69+
}
70+
}
71+
72+
::v-deep {
73+
.nuxt-link-active {
74+
--menu-item-label-color: var(--c-primary);
75+
}
76+
}
77+
}
78+
</style>

‎packages/theme/lang/de.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ export default {
8888
"Manage shipping addresses": "Alle gewünschten Versandadressen verwalten (Arbeitsplatz, Privatadresse ...) Auf diese Weise müssen Sie die Versandadresse nicht bei jeder Bestellung manuell eingeben.",
8989
"Match it with": "Kombiniere es mit",
9090
"Men fashion": "Herrenmode",
91+
"Menu": "Menü",
9192
"My billing and shipping address are the same": "Meine Rechnungs- und Lieferadresse sind identisch",
9293
"My Cart": "Mein Warenkorb",
9394
"No account": "Sie haben noch keinen Account?",

‎packages/theme/lang/en.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ export default {
8686
"Manage shipping addresses": "Manage all the shipping addresses you want (work place, home address...) This way you won\"t have to enter the shipping address manually with each order.",
8787
"Match it with": "Match it with",
8888
"Men fashion": "Men fashion",
89+
"Menu": "Menu",
8990
"My billing and shipping address are the same": "My billing and shipping address are the same",
9091
"My Cart": "My Cart",
9192
"No account": "Don't have an account yet?",

0 commit comments

Comments
 (0)