fixed side issue collapsing

2025-11-24 19:48:03 +05:30
4 changed files with 54 additions and 10 deletions
--- a/index.html
+++ b/index.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr"
+<html lang="en" lang="en" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact layout-menu-collapsed " dir="ltr"
  data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light">
-
+<!-- layout-menu-collapsed layout-menu-hover -->
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
--- a/public/assets/css/default.css
+++ b/public/assets/css/default.css
@ -31,7 +31,7 @@
 }
 .app-brand-text {
-  font-size: 1.75rem;
+  font-size: 1rem;
  letter-spacing: -0.5px;
  /* text-transform: lowercase; */
 }
--- a/public/assets/js/main.js
+++ b/public/assets/js/main.js
@ -148,5 +148,41 @@ function Main () {
        wheelPropagation: false
      });
    }
 };
 document.addEventListener("DOMContentLoaded", function () {
  const html = document.documentElement;
  /******************************
   * SIDEBAR HOVER BEHAVIOR
   ******************************/
  document.addEventListener("mouseover", function (e) {
    const isInsideSidebar = e.target.closest("#layout-menu");
    if (isInsideSidebar && html.classList.contains("layout-menu-collapsed")) {
      html.classList.add("layout-menu-hover");
    }
  });
  document.addEventListener("mouseout", function (e) {
    const leftSidebar = !e.relatedTarget || !e.relatedTarget.closest("#layout-menu");
    if (leftSidebar) {
      html.classList.remove("layout-menu-hover");
    }
  });
  /******************************
   * TOGGLE MENU BUTTON OVERRIDE
   ******************************/
  document.body.addEventListener("click", function (e) {
    const btn = e.target.closest(".layout-menu-toggle");
    if (!btn) return;
    e.preventDefault();
    html.classList.toggle("layout-menu-collapsed");
    html.classList.remove("layout-menu-hover");
  });
 });
--- a/src/components/Layout/Sidebar.jsx
+++ b/src/components/Layout/Sidebar.jsx
@ -27,18 +27,26 @@ const Sidebar = () => {
          <a
            href="/"
-            className="app-brand-link fw-bold navbar-brand text-green fs-6"
+            className="app-brand-link d-flex align-items-center gap-1 fw-bold navbar-brand "
          >
-            <span className="app-brand-logo demo">
+            <span className="app-brand-logo demo d-flex align-items-center">
-              <img src="/img/brand/marco.png" width="50" />
+              <img
                src="/img/brand/marco.png"
                width="40"
                height="40"
                alt="OnFieldWork logo"
              />
            </span>
            <span className="app-brand-text">
              <span className="text-primary ">OnField</span>
              <span className="mx-1">Work</span>
              <span className="text-dark">.com</span>
            </span>
            <span className="text-blue">OnField</span>
            <span>Work</span>
            <span className="text-dark">.com</span>
          </a>
        </Link>
-        <a className="layout-menu-toggle menu-link text-large ms-auto">
+        <a className="layout-menu-toggle menu-link text-large ms-auto cursor-pointer">
          <i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
        </a>
      </div>