From 0f8020255ca0f368a2f388d20c964373d43b6a44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Tis=C3=A4ter?=
 <77273035+marcustisater-kivra@users.noreply.github.com>
Date: Wed, 10 Jul 2024 08:38:58 +0200
Subject: [PATCH] fix: set navbar items to be open by default (#49)

Sets all navbar items open by default.
---
 src/webapp/layout/Navbar.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/webapp/layout/Navbar.tsx b/src/webapp/layout/Navbar.tsx
index fd9da1f..0e03035 100644
--- a/src/webapp/layout/Navbar.tsx
+++ b/src/webapp/layout/Navbar.tsx
@@ -38,7 +38,8 @@ export function Navbar({ routes, onItemClick }: Props) {
 
 function MenuItems({ routes, onItemClick }: Props) {
   const {
-    defaultAccordionValue,
+    accordionValues,
+    setAccordionValues,
     activeStoryUrl,
     searchString,
     setSearchString,
@@ -74,7 +75,11 @@ function MenuItems({ routes, onItemClick }: Props) {
       {stories.map(([name, { stories }]) => {
         return (
           <div key={name}>
-            <Accordion defaultValue={defaultAccordionValue}>
+            <Accordion
+              multiple
+              onChange={setAccordionValues}
+              value={accordionValues}
+            >
               <Accordion.Item value={name} style={{ border: 0 }}>
                 <AccordionTrigger>
                   <AccordionTitle>{name}</AccordionTitle>
@@ -132,14 +137,16 @@ const useStoriesList = (routes: NestedStoryRoute) => {
       ] as const
   );
   const allAccordionValues = routesEntries.map(([name]) => name);
-  const defaultAccordionValue = allAccordionValues[0];
+  const [accordionValues, setAccordionValues] =
+    useState<string[]>(allAccordionValues);
 
   return {
     activeStoryUrl: location.pathname,
     stories,
     searchString,
     setSearchString,
-    defaultAccordionValue,
+    accordionValues,
+    setAccordionValues,
   };
 };
 
@@ -251,15 +258,6 @@ const SearchBar = styled.div({
   margin: "0px 0px 24px 0px",
 });
 
-const CategoryTitle = styled.p({
-  color: "var(--green-primary)",
-  fontSize: "0.875rem",
-  fontWeight: 700,
-  textTransform: "uppercase",
-  marginTop: "0.75rem",
-  marginBottom: "0.5rem",
-});
-
 /**
  * Title of the application, eg. React Components
  */