Merge pull request 'Add collapse button' (#19) from add-collapse-button into master

Reviewed-on: #19

backend/apps.yaml

@@ -39,3 +39,9 @@ sections:
   name: fgbhn
 - apps: []
   name: dfgb
+- apps:
+  - description: opensource s3 app
+    icon: minio.svg
+    name: Minio
+    url: https://minio.dvirlabs.com
+  name: Infra

frontend/src/components/SectionGrid.jsx

@@ -1,11 +1,49 @@
+import { useState, useRef, useEffect } from 'react';
 import AppGrid from './AppGrid';
+import { FaChevronDown } from 'react-icons/fa';
 import '../style/SectionGrid.css';
 
 function SectionGrid({ section, onEdit, onDelete }) {
+  const [collapsed, setCollapsed] = useState(false);
+  const contentRef = useRef(null);
+  const [height, setHeight] = useState('auto');
+
+  const toggle = () => {
+    setCollapsed(prev => !prev);
+  };
+
+  useEffect(() => {
+    if (!contentRef.current) return;
+
+    if (!collapsed) {
+      const scrollHeight = contentRef.current.scrollHeight;
+      setHeight(`${scrollHeight}px`);
+    } else {
+      setHeight('0px');
+    }
+  }, [collapsed, section.apps?.length]);
+
   return (
     <div className="section">
-      <h2 className="section-title">{section.name}</h2>
-      <AppGrid apps={section.apps} section={section.name} onEdit={onEdit} onDelete={onDelete} />
+      <div className="section-header" onClick={toggle}>
+        <h2 className="section-title">{section.name}</h2>
+        <FaChevronDown className={`toggle-icon ${collapsed ? 'collapsed' : ''}`} />
+      </div>
+
+      <div
+        ref={contentRef}
+        className="section-content"
+        style={{ maxHeight: height }}
+      >
+        <div className="app-grid-wrapper">
+          <AppGrid
+            apps={section.apps}
+            section={section.name}
+            onEdit={onEdit}
+            onDelete={onDelete}
+          />
+        </div>
+      </div>
     </div>
   );
 }

frontend/src/style/SectionGrid.css

@@ -1,15 +1,46 @@
 .section {
-  margin-bottom: 3rem;
+  margin: 0 auto 3rem auto;
   width: 100%;
-  max-width: 1000px;
+  max-width: 100%;
+  border-bottom: 1px solid #2e6dc0;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
 }
 
 .section-title {
   font-family: 'Rajdhani', sans-serif;
   font-size: 1.8rem;
-  text-align: left;
-  border-bottom: 1px solid #2e6dc0;
   font-weight: 500;
-  margin-bottom: 1rem;
   color: white;
+  margin: 0;
+}
+
+.toggle-icon {
+  font-size: 1.4rem;
+  color: #aaa;
+  transition: transform 0.25s ease, color 0.2s ease;
+}
+
+.toggle-icon:hover {
+  color: #2e6dc0;
+}
+
+.toggle-icon.collapsed {
+  transform: rotate(-90deg);
+}
+
+.section-content {
+  overflow: hidden;
+  transition: max-height 0.4s ease;
+}
+
+.app-grid-wrapper {
+  margin-bottom: 2rem;
+  padding: 0 1.5rem;
 }