dashboard responsive fix

Author: Youil412

package.json

@@ -16,9 +16,10 @@
     "@testing-library/user-event": "14.4.3",
     "apexcharts": "3.41.0",
     "axios": "^1.7.2",
-    "bootstrap": "5.3.0",
+    "bootstrap": "^5.3.3",
     "bootstrap-icons": "1.10.5",
     "history": "5.3.0",
+    "jquery": "^3.7.1",
     "node-sass": "9.0.0",
     "prop-types": "15.8.1",
     "react": "18.2.0",

public/assets/css/sb-admin-2.min.css

@@ -2302,7 +2302,7 @@ textarea.form-control {
 .form-check {
     position: relative;
     display: block;
-    padding-left: 1.25rem
+    /* padding-left: 1.25rem */
 }
 
 .form-check-input {
@@ -11651,11 +11651,11 @@ a:focus {
 }
 
 .sidebar .sidebar-brand {
-    height: 4.375rem;
+    /* height: 4.375rem; */
     text-decoration: none;
     font-size: 1rem;
     font-weight: 800;
-    padding: 1.5rem 1rem;
+    /* padding: 1.5rem 1rem; */
     text-align: center;
     text-transform: uppercase;
     letter-spacing: .05rem;
@@ -11671,7 +11671,7 @@ a:focus {
 }
 
 .sidebar hr.sidebar-divider {
-    margin: 0 1rem 1rem
+    /* margin: 0 1rem 1rem */
 }
 
 .sidebar .sidebar-heading {

src/views/AdminDashboard.js

@@ -1,26 +1,57 @@
 import React from "react";
 import { useDispatch, useSelector } from 'react-redux';
+import { useEffect } from "react";
+import $ from "jquery"; // Import jQuery
+import "bootstrap"; // Import Bootstrap JavaScript
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IMAGE_BASE_URL } from "../config";
-// import Blog from '../components/Blog';
 import { Link } from "react-router-dom";
 
 const AdminDashboard = () => {
 
    const { setting } = useSelector((state) => state.setting);
 
+   useEffect(() => {
+      const handleClick = () => {
+         $('body').toggleClass('sidebar-toggled');
+         $('.sidebar').toggleClass('toggled');
+
+         // Listen for the collapse transition to complete
+         $('.sidebar .collapse').on('transitionend', function () {
+            if ($('.sidebar').hasClass('toggled')) {
+               $('.sidebar .collapse').collapse('hide');
+            }
+         });
+      };
+
+      // Check if jQuery is loaded before adding the event listener
+      if ($) {
+         $('#sidebarToggleTop').on('click', handleClick);
+      } else {
+         console.log('jQuery is not loaded');
+      }
+
+      // Clean up the event listener
+      return () => {
+         $('#sidebarToggleTop').off('click', handleClick);
+      };
+   }, []); // Empty dependency array ensures the effect runs only once
+
    return (
       <>
          <div id="wrapper">
 
             <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
 
-               <Link to='/' className="sidebar-brand d-flex align-items-center justify-content-center">
-                  <img src={IMAGE_BASE_URL + setting.site_logo} alt='logo' className='logo-style' />
-                  <div class="sidebar-brand-text mx-3">Dashboard</div>
+               <Link to='/' className="sidebar-brand d-flex flex-column align-items-center justify-content-center">
+                  <img
+                     src={setting.site_logo !== undefined ? IMAGE_BASE_URL + setting.site_logo : '../assets/Today_Talks_Logo.png'}
+                     alt='logo'
+                     className='logo-style'
+                  />
                </Link>
 
-               <hr class="sidebar-divider my-0" />
+               <hr class="sidebar-divider" />
 
                <li class="nav-item active">
                   <Link to='/' className="nav-link"> <FontAwesomeIcon icon="fa-solid fa-user" />
@@ -31,23 +62,12 @@ const AdminDashboard = () => {
 
                <hr class="sidebar-divider" />
 
-               <div class="sidebar-heading">
-                  Authentication
-               </div>
-
                <li class="nav-item">
                   <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
                      aria-expanded="true" aria-controls="collapseTwo">
                      <FontAwesomeIcon icon="fa-solid fa-right-to-bracket" />
                      <span>Login</span>
                   </a>
-                  <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
-                     <div class="bg-white py-2 collapse-inner rounded">
-                        <h6 class="collapse-header">Custom Components:</h6>
-                        <a class="collapse-item" href="buttons.html">Buttons</a>
-                        <a class="collapse-item" href="cards.html">Cards</a>
-                     </div>
-                  </div>
                </li>
 
                <li class="nav-item">
@@ -56,21 +76,8 @@ const AdminDashboard = () => {
                      <FontAwesomeIcon icon="fa-solid fa-registered" />
                      <span>Register</span>
                   </a>
-                  <div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities"
-                     data-parent="#accordionSidebar">
-                     <div class="bg-white py-2 collapse-inner rounded">
-                        <h6 class="collapse-header">Custom Utilities:</h6>
-                        <a class="collapse-item" href="utilities-color.html">Colors</a>
-                        <a class="collapse-item" href="utilities-border.html">Borders</a>
-                        <a class="collapse-item" href="utilities-animation.html">Animations</a>
-                        <a class="collapse-item" href="utilities-other.html">Other</a>
-                     </div>
-                  </div>
                </li>
-
                <hr class="sidebar-divider" />
-
-
             </ul>
 
             <div id="content-wrapper" class="d-flex flex-column">

yarn.lock

@@ -3298,10 +3298,10 @@ [email protected]:
   resolved "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz"
   integrity sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==
 
-[email protected].0:
-  version "5.3.0"
-  resolved "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz"
-  integrity sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==
+bootstrap@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.3.tgz#de35e1a765c897ac940021900fcbb831602bac38"
+  integrity sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
@@ -6773,6 +6773,11 @@ jiti@^1.21.0:
   resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.3.tgz"
   integrity sha512-uy2bNX5zQ+tESe+TiC7ilGRz8AtRGmnJH55NC5S0nSUjvvvM2hJHmefHErugGXN4pNv4Qx7vLsnNw9qJ9mtIsw==
 
+jquery@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.1.tgz#083ef98927c9a6a74d05a6af02806566d16274de"
+  integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
+
 js-base64@^2.4.9:
   version "2.6.4"
   resolved "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz"