fixed side issue collapsing

This commit is contained in:
pramod.mahajan 2025-11-24 19:48:03 +05:30
parent 25003d912e
commit f13005a031
4 changed files with 54 additions and 10 deletions

View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!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"> data-theme="theme-default" data-assets-path="/assets/" data-template="vertical-menu-template" data-style="light">
<!-- layout-menu-collapsed layout-menu-hover -->
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

View File

@ -31,7 +31,7 @@
} }
.app-brand-text { .app-brand-text {
font-size: 1.75rem; font-size: 1rem;
letter-spacing: -0.5px; letter-spacing: -0.5px;
/* text-transform: lowercase; */ /* text-transform: lowercase; */
} }

View File

@ -148,5 +148,41 @@ function Main () {
wheelPropagation: false 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");
});
});

View File

@ -27,18 +27,26 @@ const Sidebar = () => {
<a <a
href="/" 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>
<span className="text-blue">OnField</span>
<span>Work</span>
<span className="text-dark">.com</span>
</a> </a>
</Link> </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> <i className="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
</a> </a>
</div> </div>