diff --git a/index.html b/index.html
index 24a9ef36..525634c5 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
-
-
+
diff --git a/public/assets/css/default.css b/public/assets/css/default.css
index 8503dc87..6e2cafb7 100644
--- 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; */
}
diff --git a/public/assets/js/main.js b/public/assets/js/main.js
index cc356fa7..272f0369 100644
--- 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");
+ });
+});
diff --git a/src/components/Layout/Sidebar.jsx b/src/components/Layout/Sidebar.jsx
index 1f4b63b8..4d51ddf2 100644
--- a/src/components/Layout/Sidebar.jsx
+++ b/src/components/Layout/Sidebar.jsx
@@ -27,18 +27,26 @@ const Sidebar = () => {
-
- 
+
+
+
+
+
+ OnField
+ Work
+ .com
- OnField
- Work
- .com
-
+