fix: Improve rendering of TOC panel

frontend/src/components/CelexSelector/CelexSelector.test.tsx

@@ -12,7 +12,13 @@ describe("CelexSelector", () => {
     expect(getByLabelText("Select example:")).toBeInTheDocument();
     expect(getByRole("combobox")).toBeInTheDocument();
 
-    const options = getAllByRole("option");
+    const [def, ...options] = getAllByRole("option");
+
+    // First option is the disabled placeholder option
+    expect(def).toHaveValue("");
+    expect(def).toHaveTextContent("Select an example");
+    expect(def).toBeDisabled();
+
     expect(options).toHaveLength(examples.length);
     for (const i in examples) {
       expect(options[i]).toHaveValue(examples[i].id);

frontend/src/components/TOC/TOC.module.css

@@ -1,16 +1,15 @@
 .toc {
   font-size: 0.8rem;
-  min-width: 25vw;
+  flex: 1 0 25vw;
-  flex: 1 auto;
 
   &.hidden {
-    flex: 0 0;
+    display: none;
-    min-width: 0;
   }
 
+  transition: flex-basis 0.1s ease-in-out;
+
   overflow-y: scroll;
   overflow-x: wrap;
-  height: 100vh;
 
   .tocDivision {
     margin-block: 0.5rem;

frontend/src/components/TOC/TOC.tsx

@@ -55,15 +55,17 @@ function TOC({ toc }: TOCProps) {
   const [isVisible, setIsVisible] = useState(true);
 
   return (
-    <nav className={[styles.toc, isVisible ? "" : styles.hidden].join(" ")}>
+    <>
       <button
         onClick={() => setIsVisible(!isVisible)}
         className={styles.toggleButton}
       >
         {isVisible ? "<" : ">"}
       </button>
-      {toc.map((division) => renderDivision(division))}
+      <nav className={[styles.toc, isVisible ? "" : styles.hidden].join(" ")}>
-    </nav>
+        {toc.map((division) => renderDivision(division))}
+      </nav>
+    </>
   );
 }
 export default TOC;

frontend/src/lib/examples.ts

@@ -1,5 +1,9 @@
 export const examples = [
   { name: "GDPR", id: "32016R0679" },
   { name: "AI Act", id: "32024R1689" },
+  { name: "Cybersecurity Act", id: "32019R0881" },
   { name: "Cyber Resilience Act", id: "32024R2847" },
+  { name: "Medical Device Regulation", id: "32017R0745" },
+  { name: "NIS 2 Directive", id: "32022L2555" },
+  { name: "Digital Services Act", id: "32022R2065" },
 ];