Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improve side menu scrolling #2140

Merged
merged 1 commit into from
Jan 8, 2019
Merged

improve side menu scrolling #2140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 41 additions & 24 deletions src/themes/default/components/core/blocks/SidebarMenu/SidebarMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="sidebar-menu absolute mw-100 bg-cl-secondary" :class="{ active: isOpen }">
<div class="sidebar-menu absolute mw-100 bg-cl-primary" :class="{ active: isOpen }">
<div class="row brdr-bottom-1 brdr-cl-bg-secondary">
<div class="col-xs bg-cl-primary" v-if="submenu.depth">
<sub-btn type="back" class="bg-cl-transparent brdr-none" />
Expand Down Expand Up @@ -31,23 +31,24 @@
class="brdr-bottom-1 brdr-cl-bg-secondary bg-cl-primary flex"
:key="category.slug"
@click="closeMenu"
v-for="category in categories"
v-if="category.product_count > 0 || category.children_count > 0"
v-for="category in visibleCategories"
>
<sub-btn
class="bg-cl-transparent brdr-none fs-medium"
:id="category.id"
:name="category.name"
v-if="category.children_count > 0"
@click.native="activeSubMenu = category.id"
/>
<router-link
v-else
class="px25 py20 cl-accent no-underline col-xs"
:to="localizedRoute({ name: 'category', params: { id: category.id, slug: category.slug }})"
>
{{ category.name }}
</router-link>
<div v-if="isCurrentMenuShowed" class="subcategory-item">
<sub-btn
class="bg-cl-transparent brdr-none fs-medium"
:id="category.id"
:name="category.name"
v-if="category.children_count > 0"
@click.native="activeSubMenu = category.id"
/>
<router-link
v-else
class="px25 py20 cl-accent no-underline col-xs"
:to="localizedRoute({ name: 'category', params: { id: category.id, slug: category.slug }})"
>
{{ category.name }}
</router-link>
</div>

<sub-category
v-show="activeSubMenu === category.id"
Expand All @@ -56,7 +57,7 @@
:parent-slug="category.slug"
/>
</li>
<li @click="closeMenu">
<li @click="closeMenu" v-if="isCurrentMenuShowed" class="bg-cl-secondary">
<router-link
class="block px25 py20 brdr-bottom-1 brdr-cl-secondary cl-accent no-underline fs-medium-small"
:to="localizedRoute('/sale')"
Expand All @@ -65,7 +66,7 @@
{{ $t('Sale') }}
</router-link>
</li>
<li @click="closeMenu">
<li @click="closeMenu" v-if="isCurrentMenuShowed" class="bg-cl-secondary">
<router-link
class="block px25 py20 brdr-bottom-1 brdr-cl-secondary cl-accent no-underline fs-medium-small"
:to="localizedRoute('/magazine')"
Expand All @@ -74,7 +75,7 @@
{{ $t('Magazine') }}
</router-link>
</li>
<li @click="closeMenu" v-if="compareIsActive">
<li @click="closeMenu" v-if="compareIsActive && isCurrentMenuShowed" class="bg-cl-secondary">
<router-link
class="block px25 py20 brdr-bottom-1 brdr-cl-secondary cl-accent no-underline fs-medium-small"
:to="localizedRoute('/compare')"
Expand All @@ -83,7 +84,7 @@
{{ $t('Compare products') }}
</router-link>
</li>
<li @click="closeMenu">
<li @click="closeMenu" v-if="isCurrentMenuShowed" class="bg-cl-secondary">
<router-link
class="block px25 py20 brdr-bottom-1 brdr-cl-secondary cl-accent no-underline fs-medium-small"
:to="localizedRoute('/order-tracking')"
Expand All @@ -92,7 +93,7 @@
{{ $t('Track my order') }}
</router-link>
</li>
<li @click="closeMenu" class="brdr-bottom-1 brdr-cl-secondary flex">
<li @click="closeMenu" class="brdr-bottom-1 brdr-cl-secondary bg-cl-secondary flex">
<sub-btn
v-if="currentUser"
:name="$t('My account')"
Expand All @@ -104,7 +105,7 @@
:id="'foo'"
/>
<a
v-if="!currentUser"
v-if="!currentUser && isCurrentMenuShowed"
href="#"
@click.prevent="login"
class="block w-100 px25 py20 cl-accent no-underline fs-medium-small"
Expand Down Expand Up @@ -176,7 +177,18 @@ export default {
...mapState({
submenu: state => state.ui.submenu,
currentUser: state => state.user.current
})
}),
getSubmenu () {
return this.submenu
},
visibleCategories () {
return this.categories.filter(category => {
return category.product_count > 0 || category.children_count > 0
})
},
isCurrentMenuShowed () {
return !this.getSubmenu || !this.getSubmenu.depth
}
},
methods: {
login () {
Expand Down Expand Up @@ -239,6 +251,11 @@ $color-mine-shaft: color(mine-shaft);
}
}

.subcategory-item {
display: flex;
width: 100%;
}

button {
color: $color-mine-shaft;a {
color: $color-mine-shaft;
Expand Down
39 changes: 26 additions & 13 deletions src/themes/default/components/core/blocks/SidebarMenu/SubCategory.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,19 +22,21 @@
:key="link.slug"
v-for="link in children"
>
<sub-btn
class="bg-cl-transparent brdr-none fs-medium"
:id="link.id"
:name="link.name"
v-if="link.children_count > 0"
/>
<router-link
v-else
class="px25 py20 cl-accent no-underline col-xs"
:to="localizedRoute({ name: 'category', params: { id: link.id, slug: link.slug }})"
>
{{ link.name }}
</router-link>
<div v-if="isCurrentMenuShowed" class="subcategory-item">
<sub-btn
class="bg-cl-transparent brdr-none fs-medium"
:id="link.id"
:name="link.name"
v-if="link.children_count > 0"
/>
<router-link
v-else
class="px25 py20 cl-accent no-underline col-xs"
:to="localizedRoute({ name: 'category', params: { id: link.id, slug: link.slug }})"
>
{{ link.name }}
</router-link>
</div>
<sub-category
:category-links="link.children_data"
:id="link.id"
Expand Down Expand Up @@ -111,11 +113,17 @@ export default {
...mapState({
submenu: state => state.ui.submenu
}),
getSubmenu () {
return this.submenu
},
styles () {
const pos = this.submenu.path.indexOf(this.id)
return pos !== -1 ? {
zIndex: pos + 1
} : false
},
isCurrentMenuShowed () {
return this.getSubmenu && this.getSubmenu.depth && this.getSubmenu.path[this.getSubmenu.depth - 1] === this.id
}
},
methods: {
Expand All @@ -141,4 +149,9 @@ export default {
min-height: 100%;
transform: translateX(-100%);
}

.subcategory-item {
display: flex;
width: 100%;
}
</style>