admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fixed side issue collapsing

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -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" />

2
public/assets/css/default.css
View File

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

36
public/assets/js/main.js
View File

@ -149,4 +149,40 @@ function Main () {
});
}
};
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");
});
});

22
src/components/Layout/Sidebar.jsx
View File

@ -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">
<img src="/img/brand/marco.png" width="50" />
<span className="app-brand-logo demo d-flex align-items-center">
<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>