Improved Archive page

src/pages/Archive.tsx

@@ -28,15 +28,26 @@ const sortedYears = Object.keys(dataByYear).map(Number).sort((a, b) => b - a);
 
 const Archive = () => {
   const [performersByYear, setPerformersByYear] = useState<Record<number, PerformerCard[]>>({});
+  const [expandedYears, setExpandedYears] = useState<Record<number, boolean>>({});
 
   useEffect(() => {
     const initial: Record<number, PerformerCard[]> = {};
+    const initialExpanded: Record<number, boolean> = {};
     for (const year of sortedYears) {
       initial[year] = dataByYear[year].map((p) => ({ ...p, showDesc: false }));
+      initialExpanded[year] = false;
     }
     setPerformersByYear(initial);
+    setExpandedYears(initialExpanded);
   }, []);
 
+  const toggleYear = (year: number) => {
+    setExpandedYears((prev) => ({
+      ...prev,
+      [year]: !prev[year],
+    }));
+  };
+
   const togglePerformerDesc = (year: number, id: string) => {
     setPerformersByYear((prev) => ({
       ...prev,
@@ -51,7 +62,27 @@ const Archive = () => {
       <h1>Arkisto</h1>
       {sortedYears.map((year) => (
         <React.Fragment key={year}>
+          <div
+            className={styles.yearTitle}
+            onClick={() => toggleYear(year)}
+          >
             <h2 className={styles.year}>{year}</h2>
+            <button className={shared.openingChevron}>
+              {expandedYears[year] ? (
+                <BiChevronDown size='3rem' />
+              ) : (
+                <BiChevronLeft size='3rem' />
+              )}
+            </button>
+          </div>
+          <div className={styles.yearPerformers}>
+            <CSSTransition
+              in={expandedYears[year]}
+              timeout={300}
+              classNames='heightTransition'
+              unmountOnExit
+            >
+              <div className={styles.yearPerformersContent}>
                 {(performersByYear[year] ?? []).map((p) => (
                   <div className={styles.performerContainer} key={p.id}>
                     <img
@@ -95,6 +126,9 @@ const Archive = () => {
                     </div>
                   </div>
                 ))}
+              </div>
+            </CSSTransition>
+          </div>
         </React.Fragment>
       ))}
     </section>

styles/Archive.module.scss

@@ -7,11 +7,40 @@
   margin-bottom: 1em;
 }
 
+.yearTitle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  width: 100%;
+  margin-bottom: 1em;
+
+  h2 {
+    flex: 1;
+    min-width: 0;
+  }
+
+  h2:hover {
+    color: rgb(117, 117, 117);
+    transition: color 0.3s;
+  }
+}
+
+.yearPerformers {
+  width: 100%;
+  overflow: hidden;
+}
+
+.yearPerformersContent {
+  width: 100%;
+}
+
 .performerContainer {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  width: 90%;
+  width: 100%;
+  box-sizing: border-box;
 
   p {
     padding-left: 1rem;
@@ -22,14 +51,14 @@
     width: 100%;
     margin-top: 2rem;
     margin-bottom: 2rem;
-    width: 100%;
   }
 }
 
 .performerTextContainer {
-  width: 80%;
+  flex: 1;
   margin-left: 1rem;
   margin-top: 1rem;
+  min-width: 0;
 }
 
 .performerTitle {
@@ -41,7 +70,8 @@
 
   h2 {
     margin-left: 1rem;
-    width: 100%;
+    flex: 1;
+    min-width: 0;
   }
 
   h2:hover {

styles/transitions.scss

@@ -15,3 +15,36 @@
   opacity: 0;
   transition: opacity 1000ms;
 }
+
+// Height transition for Archive page
+.heightTransition-enter {
+  max-height: 0;
+  overflow: hidden;
+}
+
+.heightTransition-enter-active {
+  max-height: 10000px;
+  overflow: hidden;
+  transition: max-height 300ms ease-out;
+}
+
+.heightTransition-enter-done {
+  max-height: 10000px;
+  overflow: hidden;
+}
+
+.heightTransition-exit {
+  max-height: 10000px;
+  overflow: hidden;
+}
+
+.heightTransition-exit-active {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 300ms ease-out;
+}
+
+.heightTransition-exit-done {
+  max-height: 0;
+  overflow: hidden;
+}