feat: implement sidebar

resources/views/layouts/partials/sidebar.blade.php

@@ -0,0 +1,36 @@
+<link rel="stylesheet" href="{{ asset('assets/frontend/css/app.css') }}">
+
+<!-- Main Sidebar - Collapsible -->
+<nav id="sidebar" class="col-md-2 col-lg-2 d-none d-md-block bgGradDown sidebar min-vh-100 pt-4 position-fixed">
+    <div class="sidebar-sticky vh-100">
+        <!-- Collapse button -->
+        <div class="d-flex justify-content-end mb-3 px-3">
+            <button id="sidebarCollapse" class="btn btn-transparent">
+                <i id="sidebarIcon" class="fas fa-arrow-left text-white"></i>
+            </button>
+        </div>
+        
+        <ul class="nav flex-column position-relative customHeight">
+            @include('layouts.partials.sidebar_navigators')
+        </ul>
+    </div>
+</nav>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const sidebarCollapseButton = document.getElementById('sidebarCollapse');
+        const sidebarIcon = document.getElementById('sidebarIcon');
+        const sidebar = document.getElementById('sidebar');
+
+        sidebarCollapseButton.addEventListener('click', function () {
+            sidebar.classList.toggle('collapsed');
+            if (sidebar.classList.contains('collapsed')) {
+                sidebarIcon.classList.remove('fa-arrow-left');
+                sidebarIcon.classList.add('fa-arrow-right');
+            } else {
+                sidebarIcon.classList.remove('fa-arrow-right');
+                sidebarIcon.classList.add('fa-arrow-left');
+            }
+        });
+    });
+</script>