Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add icon to Collapsible sections

Browse Source
This commit is contained in:
James Lyne 2021-05-26 02:10:34 +01:00
parent e65b70acc4
commit 71edab6b74
3 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/icons/arrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="234.46pt" height="247.78pt" version="1.0" viewBox="0 0 234.46 247.78" xmlns="http://www.w3.org/2000/svg">
<path d="m19.626 58.589c-3.9626 0-7.9261 1.5194-10.963 4.5557l-1.1646 1.1646c-6.0727 6.0727-6.0727 15.852 0 21.925l98.421 98.421c3.1262 3.1262 7.2326 4.6291 11.312 4.5366 4.0782 0.0918 8.1837-1.411 11.309-4.5366l98.421-98.421c6.0727-6.0727 6.0727-15.852 0-21.925l-1.1646-1.1646c-6.0727-6.0727-15.85-6.0727-21.923 0l-86.643 86.645-86.645-86.645c-3.0364-3.0364-6.9975-4.5557-10.96-4.5557z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 519 B

8
src/components/Sidebar.vue
View File

@ -195,11 +195,19 @@ export default defineComponent({
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
text-align: left; text-align: left;
display: flex;
align-items: center;
&:hover, &:focus-visible, &.focus-visible, &:active { &:hover, &:focus-visible, &.focus-visible, &:active {
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
} }
.svg-icon {
margin-left: auto;
width: 1.5rem;
height: 1.5rem;
}
} }
.section__content { .section__content {

25
src/components/sidebar/CollapsibleSection.vue
View File

@ -1,9 +1,12 @@
<template> <template>
<section :class="{'sidebar__section': true, 'section--collapsed': collapsed}"> <section :class="{'sidebar__section': true, 'section--collapsible': true, 'section--collapsed': collapsed}">
<button :id="`${name}-heading`" type="button" class="section__heading" <button :id="`${name}-heading`" type="button" class="section__heading"
@click.prevent="toggle" @keydown="handleKeydown" :title="title" @click.prevent="toggle" @keydown="handleKeydown" :title="title"
:aria-expanded="!collapsed" :aria-controls="`${name}-content`"> :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
<slot name="heading"></slot> <span>
<slot name="heading"></slot>
</span>
<SvgIcon name="arrow"></SvgIcon>
</button> </button>
<div :id="`${name}-content`" role="region" :aria-labelledby="`${name}-heading`" :aria-hidden="collapsed"> <div :id="`${name}-content`" role="region" :aria-labelledby="`${name}-heading`" :aria-hidden="collapsed">
<slot></slot> <slot></slot>
@ -15,10 +18,12 @@
import {useStore} from "@/store"; import {useStore} from "@/store";
import {LiveAtlasSidebarSection} from "@/index"; import {LiveAtlasSidebarSection} from "@/index";
import {defineComponent} from "@vue/runtime-core"; import {defineComponent} from "@vue/runtime-core";
import SvgIcon from "@/components/SvgIcon.vue";
import '@/assets/icons/arrow.svg';
export default defineComponent({ export default defineComponent({
name: 'CollapsibleSection', name: 'CollapsibleSection',
components: {SvgIcon},
props: { props: {
name: { name: {
type: String as () => LiveAtlasSidebarSection, type: String as () => LiveAtlasSidebarSection,
@ -59,3 +64,17 @@
} }
}); });
</script> </script>
<style lang="scss" scoped>
.section--collapsible {
.section__heading .svg-icon {
transform: rotate(180deg);
}
&.section--collapsed {
.section__heading .svg-icon {
transform: none;
}
}
}
</style>