💄 Add arrows to accordions

Author: Frontendland

public/icons/arrow-down.svg

@@ -11,7 +11,15 @@ const {
 <ul data-id="accordion">
     {items.map(item => (
         <li>
-            <div class="accordion-title">{item.title}</div>
+            <div class="accordion-title">
+                {item.title}
+                <img
+                    src="/icons/arrow-down.svg"
+                    alt="GitHub"
+                    width={15}
+                    height={15}
+                />
+            </div>
             <div class="accordion-wrapper">
                 <div class="accordion-content">
                     <Fragment set:html={item.content} />

src/components/Accordion/Accordion.astro

@@ -22,6 +22,12 @@
                 on:click={() => toggle(index)}
             >
                 {item.title}
+                <img
+                    src="/icons/arrow-down.svg"
+                    alt="GitHub"
+                    width={15}
+                    height={15}
+                />
             </div>
             <div class="accordion-wrapper">
                 <div class="accordion-content">

src/components/Accordion/Accordion.svelte

@@ -21,6 +21,12 @@ export const Accordion = ({ items }: AccordionProps) => {
                         onClick={() => toggle(index)}
                     >
                         {item.title}
+                        <img
+                            src="/icons/arrow-down.svg"
+                            alt="GitHub"
+                            width={15}
+                            height={15}
+                        />
                     </div>
                     <div className="accordion-wrapper">
                         <div className="accordion-content">

src/components/Accordion/Accordion.tsx

@@ -20,13 +20,27 @@ ul {
         }
 
         .accordion-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             cursor: pointer;
 
-            &.open + .accordion-wrapper {
-                grid-template-rows: 1fr;
-    
-                .accordion-content {
-                    padding: 10px 0;
+            img {
+                @include Transition(transform);
+                filter: brightness(.7);
+            }
+
+            &.open {
+                img {
+                    transform: rotate(180deg);
+                }
+
+                + .accordion-wrapper {
+                    grid-template-rows: 1fr;
+        
+                    .accordion-content {
+                        padding: 10px 0;
+                    }
                 }
             }
         }
@@ -40,7 +54,7 @@ ul {
         .accordion-content {
             @include Transition();
             overflow: hidden;
-            color: #DDD;
+            color: #BBB;
         }
     }
 }