From 2deb7dd254ea119e1c05d3d555611dd15e09f17a Mon Sep 17 00:00:00 2001
From: Sallu9007 <sallumoghul007@gmail.com>
Date: Sun, 27 Apr 2025 22:21:43 +0530
Subject: [PATCH] feat: implement  sidebar

---
 public/assets/frontend/css/app.css            |  13 +
 resources/views/layouts/app.blade.php         | 171 +++++---
 .../views/layouts/partials/navbar.blade.php   |  41 ++
 .../views/layouts/partials/sidebar.blade.php  |  36 ++
 .../partials/sidebar_navigators.blade.php     | 392 ++++++++++++++++++
 5 files changed, 599 insertions(+), 54 deletions(-)
 create mode 100644 resources/views/layouts/partials/navbar.blade.php
 create mode 100644 resources/views/layouts/partials/sidebar.blade.php
 create mode 100644 resources/views/layouts/partials/sidebar_navigators.blade.php
diff --git a/public/assets/frontend/css/app.css b/public/assets/frontend/css/app.css
index 8be117e..e8139e1 100644
--- a/public/assets/frontend/css/app.css
+++ b/public/assets/frontend/css/app.css
@@ -24,4 +24,17 @@
 }
 .bg-light2{
     background-color: #ffffff !important;
+}
+.nav-item .nav-link {
+    padding: 0.4rem 0.75rem;
+    font-size: 0.9rem;
+}
+
+.nav-item .nav-link img {
+    max-height: 18px;
+    width: auto;
+}
+
+.nav-item .sidebar-text {
+    font-size: 0.85rem;
 }
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 72c8124..cd69709 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -10,21 +11,21 @@
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700&display=swap" rel="stylesheet" />
-    
+
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    
+
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    
+
     <!-- DataTables CSS -->
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap5.min.css">
-    
+
     <!-- Select2 CSS -->
     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
-    
+
     <!-- Custom CSS -->
     <style>
         :root {
@@ -37,26 +38,26 @@
             --light-bg: #f9fafb;
             --dark-bg: #1f2937;
         }
-        
+
         body {
             font-family: 'Inter', sans-serif;
             background-color: #f3f4f6;
         }
-        
+
         .navbar {
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
         }
-        
+
         .card {
             border-radius: 0.75rem;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
             transition: all 0.3s ease;
         }
-        
+
         .card:hover {
             box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
         }
-        
+
         .card-header {
             background-color: white;
             border-bottom: 1px solid #e5e7eb;
@@ -64,64 +65,64 @@
             border-top-right-radius: 0.75rem !important;
             padding: 1.25rem;
         }
-        
+
         .table {
             --bs-table-striped-bg: rgba(59, 130, 246, 0.05);
         }
-        
+
         .table th {
             font-weight: 600;
             background-color: #f8fafc;
             color: #334155;
         }
-        
+
         .btn-primary {
             background-color: var(--primary-color);
             border-color: var(--primary-color);
         }
-        
+
         .btn-primary:hover {
             background-color: var(--secondary-color);
             border-color: var(--secondary-color);
         }
-        
+
         .dropdown-menu {
             border-radius: 0.5rem;
             box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
         }
-        
+
         .page-title {
             color: #1e293b;
             font-weight: 600;
         }
-        
-        .dataTables_wrapper .dataTables_length, 
+
+        .dataTables_wrapper .dataTables_length,
         .dataTables_wrapper .dataTables_filter {
             margin-bottom: 1.5rem;
         }
-        
-        .dataTables_wrapper .dataTables_length select, 
+
+        .dataTables_wrapper .dataTables_length select,
         .dataTables_wrapper .dataTables_filter input {
             border: 1px solid #d1d5db;
             border-radius: 0.375rem;
             padding: 0.375rem 0.75rem;
         }
-        
+
         .dataTables_wrapper .dataTables_paginate .paginate_button {
             margin: 0 0.25rem;
             border-radius: 0.375rem;
         }
-        
+
         .dataTables_wrapper .dataTables_paginate .paginate_button.current {
             background: var(--primary-color) !important;
             border-color: var(--primary-color) !important;
             color: white !important;
         }
-        
+
         .dt-buttons {
             margin-bottom: 1rem;
         }
-        
+
         .dt-button {
             background-color: #f3f4f6 !important;
             border-color: #d1d5db !important;
@@ -130,34 +131,74 @@
             padding: 0.375rem 0.75rem !important;
             font-size: 0.875rem !important;
         }
-        
+
         .dt-button:hover {
             background-color: #e5e7eb !important;
             border-color: #9ca3af !important;
         }
-        
+
         .modal-content {
             border-radius: 0.75rem;
             border: none;
         }
-        
+
         .modal-header {
             border-top-left-radius: 0.75rem;
             border-top-right-radius: 0.75rem;
             background-color: #f8fafc;
         }
-        
+
         .form-check-input:checked {
             background-color: var(--primary-color);
             border-color: var(--primary-color);
         }
-        
+
         .wrap-text {
             white-space: normal;
             word-wrap: break-word;
             max-width: 250px;
         }
     </style>
+    <style>
+        /* Sidebar collapse functionality */
+        #sidebar {
+            min-width: 250px;
+            max-width: 250px;
+            transition: all 0.3s;
+            z-index: 999;
+        }
+
+        #sidebar.active {
+            min-width: 80px;
+            max-width: 80px;
+        }
+
+        #sidebar.active .sidebar-text,
+        #sidebar.active h6.textWhite:not(.sidebar-icon) {
+            display: none;
+        }
+
+        #sidebar.active .col-2 {
+            width: 100% !important;
+        }
+
+        #sidebar.active .nav-link {
+            text-align: center;
+            padding: 10px 5px;
+        }
+
+        #main-content {
+            transition: all 0.3s;
+            margin-left: 250px;
+            width: calc(100% - 250px);
+        }
+
+        /* When sidebar is collapsed, adjust main content */
+        body.sidebar-collapsed #main-content {
+            margin-left: 80px;
+            width: calc(100% - 80px);
+        }
+    </style>
 
     <!-- Scripts -->
     @vite(['resources/css/app.css', 'resources/js/app.js'])
@@ -165,36 +206,35 @@
 
 <body class="font-sans antialiased">
     <div class="min-h-screen bg-gray-100">
-        @include('layouts.navigation')
+        @include('layouts.partials.navbar')
 
-        <!-- Page Heading -->
-        @hasSection('header')
-        <header class="bg-white shadow">
-            <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-                @yield('header')
-            </div>
-        </header>
-        @endif
+        <div class="container-fluid">
+            <div class="row">
+                <!-- Sidebar -->
+                @include('layouts.partials.sidebar')
 
-        <!-- Page Content -->
-        <main class="py-6">
-            @yield('content')
-        </main>
-        
-        <!-- Footer -->
-        <footer class="bg-white py-4 shadow-inner mt-auto">
-            <div class="container text-center text-gray-500">
-                <p class="text-sm">© {{ date('Y') }} {{ config('app.name', 'Faculty Portal') }}. All rights reserved.</p>
+                <!-- Main Content Area -->
+                <main role="main" class="col-md-10 col-lg-10 ms-auto px-4" id="main-content">
+                    @yield('content')
+
+                    <!-- Footer -->
+                    <footer class="bg-white py-4 shadow-inner mt-auto">
+                        <div class="container text-center text-gray-500">
+                            <p class="text-sm">© {{ date('Y') }} {{ config('app.name', 'Faculty Portal') }}. All rights reserved.</p>
+                        </div>
+                    </footer>
+                </main>
             </div>
-        </footer>
+        </div>
     </div>
-    
+
+
     <!-- jQuery -->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    
+
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
-    
+
     <!-- DataTables JS -->
     <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
     <script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
@@ -205,15 +245,38 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
     <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
     <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
-    
+
     <!-- Select2 JS -->
     <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
-    
+
     <!-- Chart JS -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
 
-    
+    <script>
+        $(document).ready(function() {
+            $('#sidebarCollapse').on('click', function() {
+                $('#sidebar').toggleClass('active');
+                $('body').toggleClass('sidebar-collapsed');
+
+                // Save state to localStorage
+                if ($('#sidebar').hasClass('active')) {
+                    localStorage.setItem('sidebarCollapsed', 'true');
+                } else {
+                    localStorage.setItem('sidebarCollapsed', 'false');
+                }
+            });
+
+            // Check if sidebar was collapsed previously
+            if (localStorage.getItem('sidebarCollapsed') === 'true') {
+                $('#sidebar').addClass('active');
+                $('body').addClass('sidebar-collapsed');
+            }
+        });
+    </script>
+
+
     @yield('scripts')
 </body>
+
 </html>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/navbar.blade.php b/resources/views/layouts/partials/navbar.blade.php
new file mode 100644
index 0000000..c15161e
--- /dev/null
+++ b/resources/views/layouts/partials/navbar.blade.php
@@ -0,0 +1,41 @@
+<link rel="stylesheet" href="{{ asset('assets/frontend/css/app.css') }}">
+<style>
+    .navbar-profile-picture {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        object-fit: cover;
+        border: 2px solid #ddd;
+    }
+
+    /* Add padding to body to prevent content from hiding behind fixed navbar */
+    body {
+        padding-top: 70px;
+    }
+</style>
+<nav class="navbar navbar-expand-lg navbar-dark bgGrad text-white fixed-top">
+    <div class="container-fluid">
+        <div class="d-flex customPos">
+            <div class="d-block d-md-none">
+                <div class="btn btn-transparent" data-bs-toggle="offcanvas" data-bs-target="#sidebar" aria-controls="offcanvasScrolling">
+                    <img src="{{asset("assets/frontend/images/list.svg")}}" alt="list">
+                </div>
+            </div>
+            <a>
+                <img src="{{ asset('assets/frontend/logos/logoWhite.png') }}" alt="logo" width="72px">
+            </a>
+            <a class="navbar-brand text-light ms-md-3 textLg">Faculty Documentation Portal</a>
+        </div>
+        @if (!Auth::guest())
+        <ul class="navbar-nav me-md-5">
+            <div class="d-flex align-items-center bgRightShade">
+
+                <div class="d-none d-md-inline ms-2">
+                    {{ auth()->user()->name }}
+                </div>
+            </div>
+        </ul>
+        @endif
+        @yield('login')
+    </div>
+</nav>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/sidebar.blade.php b/resources/views/layouts/partials/sidebar.blade.php
new file mode 100644
index 0000000..3a55a90
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/sidebar_navigators.blade.php b/resources/views/layouts/partials/sidebar_navigators.blade.php
new file mode 100644
index 0000000..79b1002
--- /dev/null
+++ b/resources/views/layouts/partials/sidebar_navigators.blade.php
@@ -0,0 +1,392 @@
+<link rel="stylesheet" href="{{ asset('assets/frontend/css/app.css') }}">
+
+<!-- Transferred navigation from navigation.blade.php with classes for collapsible sidebar -->
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('dashboard') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/home-icon.svg') }}" alt="home-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Dashboard</h6>
+        </div>
+    </a>
+</li>
+@if(auth()->user()->role->name === 'Admin')
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('admin.ActivitiesAttendedResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Attended</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('admin.ActivitiesOrganisedResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Organised</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('admin.IvOrganisedResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">IV Organised</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('admin.PublicationsResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Publications</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('admin.BooksPublishedResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Books Published</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('admin.ExternalEngagementResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">External Engagement</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('admin.OnlineCoursesResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Online Courses</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('admin.PatentsResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Patents/Copyrights</h6>
+        </div>
+    </a>
+</li>
+<!-- Add other admin links here -->
+@elseif(auth()->user()->role->name === 'Coordinator')
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('coordinator.ActivitiesAttendedResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Attended</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('coordinator.ActivitiesOrganisedResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Organised</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('coordinator.IvOrganisedResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">IV Organised</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('coordinator.PublicationsResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Publications</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('coordinator.BooksPublishedResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Books Published</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('coordinator.ExternalEngagementResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">External Engagement</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('coordinator.OnlineCoursesResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Online Courses</h6>
+        </div>
+    </a>
+</li>
+<li class="nav-item">
+    <a class="nav-link py-1" href="{{ route('coordinator.PatentsResponses') }}">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Patents/Copyrights</h6>
+        </div>
+    </a>
+</li>
+@elseif(auth()->user()->role->name === 'Faculty')
+<li class="nav-item mt-1">
+    <a class="nav-link py-1" data-bs-toggle="collapse" href="#activitiesAttendedCollapse" role="button" aria-expanded="false" aria-controls="activitiesAttendedCollapse">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Attended</h6>
+            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+        </div>
+    </a>
+    <div class="collapse" id="activitiesAttendedCollapse">
+        <div class="ps-4">
+            <a class="nav-link py-1" href="{{ route('faculty.ActivitiesAttendedForm') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">Submit</h6>
+                </div>
+            </a>
+            <a class="nav-link py-1" href="{{ route('faculty.ActivitiesAttendedResponses') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">View</h6>
+                </div>
+            </a>
+        </div>
+    </div>
+</li>
+<li class="nav-item mt-1">
+    <a class="nav-link py-1" data-bs-toggle="collapse" href="#activitiesOrganisedCollapse" role="button" aria-expanded="false" aria-controls="activitiesOrganisedCollapse">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Organised</h6>
+            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+        </div>
+    </a>
+    <div class="collapse" id="activitiesOrganisedCollapse">
+        <div class="ps-4">
+            <a class="nav-link py-1" href="{{ route('faculty.ActivitiesOrganisedForm') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">Submit</h6>
+                </div>
+            </a>
+            <a class="nav-link py-1" href="{{ route('faculty.ActivitiesOrganisedResponses') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">View</h6>
+                </div>
+            </a>
+        </div>
+    </div>
+</li>
+<li class="nav-item mt-1">
+    <a class="nav-link py-1" data-bs-toggle="collapse" href="#ivOrganisedCollapse" role="button" aria-expanded="false" aria-controls="ivOrganisedCollapse">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Iv Organised</h6>
+            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+        </div>
+    </a>
+    <div class="collapse" id="ivOrganisedCollapse">
+        <div class="ps-4">
+            <a class="nav-link py-1" href="{{ route('faculty.IvOrganisedForm') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">Submit</h6>
+                </div>
+            </a>
+            <a class="nav-link py-1" href="{{ route('faculty.IvOrganisedResponses') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">View</h6>
+                </div>
+            </a>
+        </div>
+    </div>
+</li>
+<li class="nav-item mt-1">
+    <a class="nav-link py-1" data-bs-toggle="collapse" href="#publicationsCollapse" role="button" aria-expanded="false" aria-controls="publicationsCollapse">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Publications</h6>
+            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+        </div>
+    </a>
+    <div class="collapse" id="publicationsCollapse">
+        <div class="ps-4">
+            <a class="nav-link py-1" href="{{ route('faculty.PublicationsForm') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">Submit</h6>
+                </div>
+            </a>
+            <a class="nav-link py-1" href="{{ route('faculty.PublicationsResponses') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">View</h6>
+                </div>
+            </a>
+        </div>
+    </div>
+</li>
+<li class="nav-item mt-1">
+    <a class="nav-link py-1" data-bs-toggle="collapse" href="#booksPublishedCollapse" role="button" aria-expanded="false" aria-controls="booksPublishedCollapse">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Books Published</h6>
+            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+        </div>
+    </a>
+    <div class="collapse" id="booksPublishedCollapse">
+        <div class="ps-4">
+            <a class="nav-link py-1" href="{{ route('faculty.BooksPublishedForm') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">Submit</h6>
+                </div>
+            </a>
+            <a class="nav-link py-1" href="{{ route('faculty.BooksPublishedResponses') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">View</h6>
+                </div>
+            </a>
+        </div>
+    </div>
+</li>
+<li class="nav-item mt-1">
+    <a class="nav-link py-1" data-bs-toggle="collapse" href="#externalEngagementCollapse" role="button" aria-expanded="false" aria-controls="externalEngagementCollapse">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">External Engagement</h6>
+            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+        </div>
+    </a>
+    <div class="collapse" id="externalEngagementCollapse">
+        <div class="ps-4">
+            <a class="nav-link py-1" href="{{ route('faculty.ExternalEngagementForm') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">Submit</h6>
+                </div>
+            </a>
+            <a class="nav-link py-1" href="{{ route('faculty.ExternalEngagementResponses') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">View</h6>
+                </div>
+            </a>
+        </div>
+    </div>
+</li>
+<li class="nav-item mt-1">
+    <a class="nav-link py-1" data-bs-toggle="collapse" href="#onlineCoursesCollapse" role="button" aria-expanded="false" aria-controls="onlineCoursesCollapse">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Online Courses</h6>
+            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+        </div>
+    </a>
+    <div class="collapse" id="onlineCoursesCollapse">
+        <div class="ps-4">
+            <a class="nav-link py-1" href="{{ route('faculty.OnlineCoursesForm') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">Submit</h6>
+                </div>
+            </a>
+            <a class="nav-link py-1" href="{{ route('faculty.OnlineCoursesResponses') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">View</h6>
+                </div>
+            </a>
+        </div>
+    </div>
+</li>
+<li class="nav-item mt-1">
+    <a class="nav-link py-1" data-bs-toggle="collapse" href="#patentsCollapse" role="button" aria-expanded="false" aria-controls="patentsCollapse">
+        <div class="d-flex align-items-center">
+            <div class="col-2">
+                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+            </div>
+            <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Patents/Copyrights</h6>
+            <i class="fas fa-chevron-down ms-auto small textWhite"></i>
+        </div>
+    </a>
+    <div class="collapse" id="patentsCollapse">
+        <div class="ps-4">
+            <a class="nav-link py-1" href="{{ route('faculty.PatentsForm') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">Submit</h6>
+                </div>
+            </a>
+            <a class="nav-link py-1" href="{{ route('faculty.PatentsResponses') }}">
+                <div class="d-flex align-items-center">
+                    <h6 class="m-0 textWhite sidebar-text small">View</h6>
+                </div>
+            </a>
+        </div>
+    </div>
+</li>
+<!-- Add other faculty links here -->
+@endif
+<li class="nav-item mt-auto mb-5">
+    <form method="POST" action="{{ route('logout') }}" class="nav-link py-1">
+        @csrf
+        <button type="submit" class="btn btn-link p-0 w-100 text-start">
+            <div class="d-flex align-items-center">
+                <div class="col-2">
+                    <img src="{{ asset('assets/frontend/images/signout.svg') }}" alt="signout-icon" class="img-fluid" style="max-height: 20px;">
+                </div>
+                <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small underline">Sign Out</h6>
+            </div>
+        </button>
+    </form>
+</li>
\ No newline at end of file
