chore: Sidebar improvements in small screens (#5400)
* chore: Sidebar improvements in small screens * chore: Minor fixes
This commit is contained in:
Sivin Varghese
GitHub
parent
79406c5775
commit
7a5ea89fd9
9 changed files with 87 additions and 28 deletions
|
|
@ -11,25 +11,27 @@
|
|||
@key-shortcut-modal="toggleKeyShortcutModal"
|
||||
@open-notification-panel="openNotificationPanel"
|
||||
/>
|
||||
<secondary-sidebar
|
||||
v-if="showSecondarySidebar"
|
||||
:account-id="accountId"
|
||||
:inboxes="inboxes"
|
||||
:labels="labels"
|
||||
:teams="teams"
|
||||
:custom-views="customViews"
|
||||
:menu-config="activeSecondaryMenu"
|
||||
:current-role="currentRole"
|
||||
:is-on-chatwoot-cloud="isOnChatwootCloud"
|
||||
@add-label="showAddLabelPopup"
|
||||
@toggle-accounts="toggleAccountModal"
|
||||
/>
|
||||
<div class="secondary-sidebar">
|
||||
<secondary-sidebar
|
||||
v-if="showSecondarySidebar"
|
||||
:class="sidebarClassName"
|
||||
:account-id="accountId"
|
||||
:inboxes="inboxes"
|
||||
:labels="labels"
|
||||
:teams="teams"
|
||||
:custom-views="customViews"
|
||||
:menu-config="activeSecondaryMenu"
|
||||
:current-role="currentRole"
|
||||
:is-on-chatwoot-cloud="isOnChatwootCloud"
|
||||
@add-label="showAddLabelPopup"
|
||||
@toggle-accounts="toggleAccountModal"
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
import adminMixin from '../../mixins/isAdmin';
|
||||
import { getSidebarItems } from './config/default-sidebar';
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
|
|
@ -58,6 +60,10 @@ export default {
|
|||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
sidebarClassName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -214,6 +220,14 @@ export default {
|
|||
width: 40rem;
|
||||
}
|
||||
}
|
||||
.off-canvas-content.is-open-left {
|
||||
transform: translateX(18.8rem);
|
||||
}
|
||||
|
||||
.secondary-sidebar {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.account-selector {
|
||||
cursor: pointer;
|
||||
|
|
@ -271,6 +285,8 @@ export default {
|
|||
}
|
||||
|
||||
.secondary-menu .nested.vertical.menu {
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
margin-left: var(--space-small);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,9 @@
|
|||
<div v-if="showSwitchButton" class="account-context--switch-group">
|
||||
<woot-button
|
||||
variant="clear"
|
||||
size="tiny"
|
||||
icon="arrow-swap"
|
||||
class="cursor-pointer"
|
||||
class="switch-button"
|
||||
@click="$emit('toggle-accounts')"
|
||||
>
|
||||
{{ $t('SIDEBAR.SWITCH') }}
|
||||
|
|
@ -54,8 +55,7 @@ export default {
|
|||
border: 1px solid var(--color-border);
|
||||
font-size: var(--font-size-mini);
|
||||
padding: var(--space-small);
|
||||
margin-bottom: var(--space-small);
|
||||
width: 100%;
|
||||
margin: var(--space-small) var(--space-small) 0 var(--space-small);
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -68,6 +68,10 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.switch-button {
|
||||
margin-right: var(--space-small);
|
||||
}
|
||||
|
||||
.account-context--switch-group {
|
||||
--overlay-shadow: linear-gradient(
|
||||
to right,
|
||||
|
|
|
|||
|
|
@ -242,17 +242,32 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '~dashboard/assets/scss/woot';
|
||||
|
||||
.secondary-menu {
|
||||
background: var(--white);
|
||||
border-right: 1px solid var(--s-50);
|
||||
height: 100%;
|
||||
width: 19rem;
|
||||
width: 20rem;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
padding: var(--space-small);
|
||||
overflow-y: hidden;
|
||||
|
||||
@include breakpoint(xlarge down) {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@include breakpoint(xlarge up) {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
overflow: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.menu {
|
||||
padding: var(--space-small);
|
||||
overflow-y: auto;
|
||||
height: 94%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="row app-wrapper">
|
||||
<sidebar
|
||||
:route="currentRoute"
|
||||
:class="sidebarClassName"
|
||||
:sidebar-class-name="sidebarClassName"
|
||||
@open-notification-panel="openNotificationPanel"
|
||||
@toggle-account-modal="toggleAccountModal"
|
||||
@open-key-shortcut-modal="toggleKeyShortcutModal"
|
||||
|
|
@ -44,8 +44,8 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
|
|||
import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
|
||||
import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal';
|
||||
import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector';
|
||||
import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
|
||||
import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
|
||||
import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel';
|
||||
import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -77,7 +77,7 @@ export default {
|
|||
return '';
|
||||
}
|
||||
if (this.isSidebarOpen) {
|
||||
return 'off-canvas position-left is-transition-push is-open';
|
||||
return 'off-canvas is-open';
|
||||
}
|
||||
return 'off-canvas is-transition-push is-closed';
|
||||
},
|
||||
|
|
@ -86,7 +86,7 @@ export default {
|
|||
return '';
|
||||
}
|
||||
if (this.isSidebarOpen) {
|
||||
return 'off-canvas-content is-open-left has-transition-push has-position-left';
|
||||
return 'off-canvas-content is-open-left has-transition-push';
|
||||
}
|
||||
return 'off-canvas-content has-transition-push';
|
||||
},
|
||||
|
|
@ -144,6 +144,6 @@ export default {
|
|||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.off-canvas-content.is-open-left {
|
||||
transform: translateX(25.4rem);
|
||||
transform: translateX(20rem);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -273,3 +273,8 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.off-canvas-content.is-open-left.has-transition-push {
|
||||
transform: translateX(var(--space-giga));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~dashboard/assets/scss/woot';
|
||||
.secondary-menu {
|
||||
background: var(--white);
|
||||
border-right: 1px solid var(--s-50);
|
||||
|
|
@ -96,6 +97,14 @@ export default {
|
|||
overflow: hidden;
|
||||
padding: var(--space-small);
|
||||
|
||||
@include breakpoint(xlarge down) {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@include breakpoint(xlarge up) {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export const routes = [
|
|||
headerTitle: 'NOTIFICATIONS_PAGE.HEADER',
|
||||
icon: 'alert',
|
||||
showNewButton: false,
|
||||
showSidemenuIcon: false,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="settings-header">
|
||||
<h1 class="page-title">
|
||||
<woot-sidemenu-icon />
|
||||
<woot-sidemenu-icon v-if="showSidemenuIcon" />
|
||||
<back-button
|
||||
v-if="showBackButton"
|
||||
:button-label="backButtonLabel"
|
||||
|
|
@ -60,6 +60,10 @@ export default {
|
|||
type: String,
|
||||
default: '',
|
||||
},
|
||||
showSidemenuIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
:show-back-button="showBackButton"
|
||||
:back-url="backUrl"
|
||||
:show-new-button="showNewButton"
|
||||
:show-sidemenu-icon="showSidemenuIcon"
|
||||
/>
|
||||
<keep-alive v-if="keepAlive">
|
||||
<router-view />
|
||||
|
|
@ -44,6 +45,10 @@ export default {
|
|||
type: [String, Object],
|
||||
default: '',
|
||||
},
|
||||
showSidemenuIcon: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue