Refactor sidebar sections

- Rename CollapsibleSection to SidebarSection with a collapsible prop
- Move section__content element to SidebarSection
- Move sidebar section styling to SidebarSection
This commit is contained in:
James Lyne 2022-01-10 19:36:06 +00:00
parent 450a5ee46c
commit 6d49021220

View File

@ -43,7 +43,7 @@ import {defineComponent} from "@vue/runtime-core";
import SvgIcon from "@/components/SvgIcon.vue"; import SvgIcon from "@/components/SvgIcon.vue";
import '@/assets/icons/arrow.svg'; import '@/assets/icons/arrow.svg';
import {MutationTypes} from "@/store/mutation-types"; import {MutationTypes} from "@/store/mutation-types";
import {computed, ref} from "vue"; import {computed} from "vue";
export default defineComponent({ export default defineComponent({
name: 'SidebarSection', name: 'SidebarSection',
@ -64,12 +64,7 @@ export default defineComponent({
const store = useStore(), const store = useStore(),
title = computed(() => store.state.messages.toggleTitle), title = computed(() => store.state.messages.toggleTitle),
collapsed = computed(() => store.state.ui.sidebar[props.name].collapsed), collapsed = computed(() => store.state.ui.sidebar[props.name].collapsed),
customPosition = computed(() => store.state.ui.sidebar[props.name].customPosition), smallScreen = computed(() => store.state.ui.smallScreen);
customSize = computed(() => store.state.ui.sidebar[props.name].customSize),
smallScreen = computed(() => store.state.ui.smallScreen),
offsetX = ref(0),
offsetY = ref(0);
const toggle = () => { const toggle = () => {
if(!props.collapsible) { if(!props.collapsible) {
@ -82,8 +77,6 @@ export default defineComponent({
return { return {
title, title,
collapsed, collapsed,
customPosition,
customSize,
smallScreen, smallScreen,
toggle, toggle,
} }