From 71edab6b74804cc44c10dc0fa56377b133edf1ea Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Wed, 26 May 2021 02:10:34 +0100
Subject: [PATCH] Add icon to Collapsible sections

---
 src/assets/icons/arrow.svg                    |  3 +++
 src/components/Sidebar.vue                    |  8 ++++++
 src/components/sidebar/CollapsibleSection.vue | 25 ++++++++++++++++---
 3 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/arrow.svg

diff --git a/src/assets/icons/arrow.svg b/src/assets/icons/arrow.svg
new file mode 100644
index 0000000..33654d0
--- /dev/null
+++ b/src/assets/icons/arrow.svg
@@ -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>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index d940f83..007dfa5 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -195,11 +195,19 @@ export default defineComponent({
 			background-color: transparent;
 			color: inherit;
 			text-align: left;
+			display: flex;
+			align-items: center;
 
 			&:hover, &:focus-visible, &.focus-visible, &:active {
 				background-color: transparent;
 				color: inherit;
 			}
+
+			.svg-icon {
+				margin-left: auto;
+				width: 1.5rem;
+                height: 1.5rem;
+			}
 		}
 
 		.section__content {
diff --git a/src/components/sidebar/CollapsibleSection.vue b/src/components/sidebar/CollapsibleSection.vue
index c80537c..fcc512f 100644
--- a/src/components/sidebar/CollapsibleSection.vue
+++ b/src/components/sidebar/CollapsibleSection.vue
@@ -1,9 +1,12 @@
 <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"
 		        @click.prevent="toggle" @keydown="handleKeydown" :title="title"
 		        :aria-expanded="!collapsed" :aria-controls="`${name}-content`">
-			<slot name="heading"></slot>
+			<span>
+				<slot name="heading"></slot>
+			</span>
+			<SvgIcon name="arrow"></SvgIcon>
 		</button>
 		<div :id="`${name}-content`" role="region" :aria-labelledby="`${name}-heading`" :aria-hidden="collapsed">
 			<slot></slot>
@@ -15,10 +18,12 @@
 	import {useStore} from "@/store";
 	import {LiveAtlasSidebarSection} from "@/index";
 	import {defineComponent} from "@vue/runtime-core";
+	import SvgIcon from "@/components/SvgIcon.vue";
+	import '@/assets/icons/arrow.svg';
 
 	export default defineComponent({
 		name: 'CollapsibleSection',
-
+		components: {SvgIcon},
 		props: {
 			name: {
 				type: String as () => LiveAtlasSidebarSection,
@@ -59,3 +64,17 @@
 		}
 	});
 </script>
+
+<style lang="scss" scoped>
+	.section--collapsible {
+		.section__heading .svg-icon {
+			transform: rotate(180deg);
+		}
+
+		&.section--collapsed {
+			.section__heading .svg-icon {
+				transform: none;
+			}
+		}
+	}
+</style>