AjmalCybro
10 months ago
6 changed files with 139 additions and 97 deletions
@ -1,55 +1,109 @@ |
|||||
// Utility function to apply CSS styles and class modifications
|
/** @odoo-module **/ |
||||
function adjustLayoutOnSidebarToggle(isOpen) { |
|
||||
const actionManager = $(".o_action_manager"); |
|
||||
const sidebarIcon = $(".side_bar_icon"); |
|
||||
const navbar = $(".o_main_navbar"); |
|
||||
const topHeading = $(".top_heading"); |
|
||||
|
|
||||
if (isOpen) { |
|
||||
$("#sidebar_panel").show(); |
|
||||
if (window.matchMedia("(min-width: 768px)").matches) { |
|
||||
actionManager.css({ 'margin-left': '200px', 'transition': 'all .1s linear' }); |
|
||||
sidebarIcon.css({ 'margin-left': '200px', 'transition': 'all .1s linear' }); |
|
||||
} |
|
||||
navbar.addClass("small_nav").addClass(navbar.data("id")); |
|
||||
actionManager.addClass("sidebar_margin").addClass(actionManager.data("id")); |
|
||||
topHeading.addClass("sidebar_margin").addClass(topHeading.data("id")); |
|
||||
} else { |
|
||||
$("#sidebar_panel").hide(); |
|
||||
actionManager.css({ 'margin-left': '0px' }); |
|
||||
sidebarIcon.css({ 'margin-left': '0px' }); |
|
||||
navbar.removeClass("small_nav").removeClass(navbar.data("id")); |
|
||||
actionManager.removeClass("sidebar_margin").removeClass(actionManager.data("id")); |
|
||||
topHeading.removeClass("sidebar_margin").removeClass(topHeading.data("id")); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// Toggle sidebar visibility on click
|
import { NavBar } from '@web/webclient/navbar/navbar'; |
||||
$(document).on("click", "#openSidebar", () => { |
import { patch } from "@web/core/utils/patch"; |
||||
$("#openSidebar").hide(); |
|
||||
$("#closeSidebar").show(); |
|
||||
adjustLayoutOnSidebarToggle(true); |
|
||||
}); |
|
||||
|
|
||||
$(document).on("click", "#closeSidebar", () => { |
import {Component, onWillDestroy, useExternalListener, onMounted, useRef, onWillUnmount,} from "@odoo/owl"; |
||||
$("#closeSidebar").hide(); |
|
||||
$("#openSidebar").show(); |
patch(NavBar.prototype, { |
||||
adjustLayoutOnSidebarToggle(false); |
setup() { |
||||
}); |
super.setup(); |
||||
|
|
||||
|
this.openElement = useRef("openSidebar"); |
||||
|
this.closeElement = useRef("closeSidebar"); |
||||
|
this.topHeading = useRef("sidebar_icon"); |
||||
|
this.sidebarLinks = useRef("sidebarLinks"); |
||||
|
const sidebarLinkHandler = this.handleSidebarLinkClick.bind(this); |
||||
|
const openSidebarHandler = this.openSidebar.bind(this); |
||||
|
const closeSidebarHandler = this.closeSidebar.bind(this); |
||||
|
onMounted(() => { |
||||
|
const openSidebarElement = this.openElement.el |
||||
|
const closeSidebarElement = this.closeElement.el |
||||
|
const sidebarLinkElements = this.sidebarLinks.el.children; |
||||
|
if (sidebarLinkElements) { |
||||
|
Array.from(sidebarLinkElements).forEach(link => { |
||||
|
link.addEventListener('click', sidebarLinkHandler); |
||||
|
}); |
||||
|
} |
||||
|
if (openSidebarElement) { |
||||
|
openSidebarElement.addEventListener('click', openSidebarHandler); |
||||
|
} |
||||
|
if (closeSidebarElement) { |
||||
|
closeSidebarElement.addEventListener('click', closeSidebarHandler); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
onWillUnmount(() => { |
||||
|
const openSidebarElement = this.openElement.el |
||||
|
const closeSidebarElement = this.closeElement.el |
||||
|
const sidebarLinkElements = this.sidebarLinks.el.children; |
||||
|
if (openSidebarElement) { |
||||
|
openSidebarElement.removeEventListener('click', openSidebarHandler); |
||||
|
} |
||||
|
if (closeSidebarElement) { |
||||
|
closeSidebarElement.removeEventListener('click', closeSidebarHandler); |
||||
|
} |
||||
|
if (sidebarLinkElements) { |
||||
|
Array.from(sidebarLinkElements).forEach(link => { |
||||
|
link.removeEventListener('click', sidebarLinkHandler); |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
// Handle menu item clicks
|
openSidebar() { |
||||
$(document).on("click", ".sidebar a", function () { |
this.root.el.nextElementSibling.style.marginLeft = '200px'; |
||||
const $this = $(this); |
this.root.el.nextElementSibling.style.transition = 'all .1s linear'; |
||||
const menuItems = $(".sidebar a"); |
const openSidebarElement = this.openElement.el |
||||
|
const closeSidebarElement = this.closeElement.el |
||||
|
if (openSidebarElement) openSidebarElement.style.display = 'none'; |
||||
|
if (closeSidebarElement) closeSidebarElement.style.display = 'block'; |
||||
|
if (this.root.el.lastChild && this.root.el.lastChild.nodeType === Node.ELEMENT_NODE) { |
||||
|
this.root.el.lastChild.style.display = 'block'; |
||||
|
} |
||||
|
|
||||
menuItems.removeClass("active"); |
if (this.topHeading.el && this.topHeading.el.nodeType === Node.ELEMENT_NODE) { |
||||
$this.addClass("active"); |
this.topHeading.el.style.marginLeft = '200px'; |
||||
|
this.topHeading.el.style.transition = 'all .1s linear'; |
||||
|
this.topHeading.el.style.width = 'auto'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
// Adjust the header to reflect the active menu
|
closeSidebar() { |
||||
$("header").removeClass().addClass($this.data("id")); |
console.log('Sidebar closed', this.topHeading); |
||||
|
this.root.el.nextElementSibling.style.marginLeft = '0px'; |
||||
|
this.root.el.nextElementSibling.style.transition = 'all .1s linear'; |
||||
|
const openSidebarElement = this.openElement.el |
||||
|
const closeSidebarElement = this.closeElement.el |
||||
|
if (openSidebarElement) openSidebarElement.style.display = 'block'; |
||||
|
if (closeSidebarElement) closeSidebarElement.style.display = 'none'; |
||||
|
if (this.root.el.lastChild && this.root.el.lastChild.nodeType === Node.ELEMENT_NODE) { |
||||
|
this.root.el.lastChild.style.display = 'none'; |
||||
|
} |
||||
|
if (this.topHeading.el && this.topHeading.el.nodeType === Node.ELEMENT_NODE) { |
||||
|
this.topHeading.el.style.marginLeft = '0px'; |
||||
|
this.topHeading.el.style.width = 'auto'; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
// Close sidebar after menu item selection
|
handleSidebarLinkClick(event) { |
||||
adjustLayoutOnSidebarToggle(false); |
const closeSidebarElement = this.closeElement.el |
||||
$("#closeSidebar").hide(); |
if (closeSidebarElement) closeSidebarElement.style.display = 'none'; |
||||
$("#openSidebar").show(); |
if (this.topHeading.el && this.topHeading.el.nodeType === Node.ELEMENT_NODE) { |
||||
|
this.topHeading.el.style.marginLeft = '0px'; |
||||
|
} |
||||
|
if (this.topHeading.el && this.topHeading.el.nodeType === Node.ELEMENT_NODE) { |
||||
|
this.topHeading.el.style.marginLeft = '0px'; |
||||
|
this.topHeading.el.style.width = '100%'; |
||||
|
} |
||||
|
const li = event.currentTarget; |
||||
|
const a = li.firstElementChild; |
||||
|
const id = a.getAttribute('data-id'); |
||||
|
document.querySelector('header').className = id; |
||||
|
Array.from(this.sidebarLinks.el.children).forEach(li => { |
||||
|
li.firstElementChild.classList.remove('active'); |
||||
|
}); |
||||
|
a.classList.add('active'); |
||||
|
this.closeSidebar(); |
||||
|
} |
||||
}); |
}); |
||||
@ -1,26 +0,0 @@ |
|||||
<?xml version="1.0" encoding="UTF-8"?> |
|
||||
<templates id="template" xml:space="preserve"> |
|
||||
<!-- Extend the web.NavBar template to add a sidebar --> |
|
||||
<t t-name="code_backend_theme_enterprice.sidebar" t-inherit="web.NavBar" t-inherit-mode="extension" owl="1"> |
|
||||
<!-- Add the sidebar panel right after the navbar --> |
|
||||
<xpath expr="//nav[hasclass('o_main_navbar')]" position="after"> |
|
||||
<div class="sidebar_panel" id="sidebar_panel"> |
|
||||
<div class="sidebar"> |
|
||||
<!-- Sidebar close button --> |
|
||||
<div class="sidebar_close"> |
|
||||
<a id="closeSidebar" style="cursor: pointer;"> |
|
||||
<img src="/code_backend_theme_enterprise/static/src/img/icons/close.png"/> |
|
||||
</a> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Sidebar logo --> |
|
||||
<div class="sidebar_logo"> |
|
||||
<img src="/web/binary/company_logo" class="logo_img"/> |
|
||||
</div> |
|
||||
|
|
||||
<!-- Additional sidebar content can go here --> |
|
||||
</div> |
|
||||
</div> |
|
||||
</xpath> |
|
||||
</t> |
|
||||
</templates> |
|
||||
Loading…
Reference in new issue