Add 1 files

index.html

@@ -446,25 +446,28 @@
                         </div>
                     </div>
                     
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
-                        <div class="bg-white rounded-lg shadow p-6">
-                            <h2 class="text-lg font-semibold mb-4">Engagement Overview</h2>
-                            <div class="h-80">
-                                <canvas id="engagementChart"></canvas>
-                            </div>
-                        </div>
-                        
-                        <div class="bg-white rounded-lg shadow p-6">
-                            <h2 class="text-lg font-semibold mb-4">Club Categories</h2>
-                            <div class="h-80">
-                                <canvas id="clubCategoriesChart"></canvas>
-                            </div>
-                        </div>
-                    </div>
+    <div class="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-6 mb-6">
+    <!-- Left Side: 70% -->
+    <div class="bg-white rounded-lg shadow p-6">
+        <h2 class="text-lg font-semibold mb-4">Engagement Overview</h2>
+        <div class="h-80">
+            <canvas id="engagementChart"></canvas>
+        </div>
+    </div>
+
+    <!-- Right Side: 30% -->
+    <div class="bg-white rounded-lg shadow p-6">
+        <h2 class="text-lg font-semibold mb-4">Club Categories</h2>
+        <div class="h-80">
+            <canvas id="clubCategoriesChart"></canvas>
+        </div>
+    </div>
+</div>
+
                     
                     <div class="bg-white rounded-lg shadow p-6">
                         <h2 class="text-lg font-semibold mb-4">Monthly Participation</h2>
-                        <div class="h-80">
+                        <div >
                             <canvas id="monthlyParticipationChart"></canvas>
                         </div>
                     </div>
@@ -919,8 +922,8 @@
         // Sidebar toggle functionality
         document.getElementById('toggleSidebar').addEventListener('click', function() {
             document.querySelector('.sidebar').classList.toggle('collapsed');
-            document.querySelector('.main-content').classList.toggle('ml-64');
-            document.querySelector('.main-content').classList.toggle('ml-20');
+           
+            document.querySelector('.main-content').classList.toggle('mr-5');
         });
         
         // Dark mode toggle functionality