Refactor sidebar menu templates and JavaScript components for improved structure and functionality

This commit is contained in:
abuzaid4exp 2025-11-17 12:08:40 +02:00
parent ed605e4de9
commit 0a1cdc9d93
6 changed files with 9 additions and 34 deletions

View File

@ -15,8 +15,8 @@
'web.assets_backend': [
'odex_sidebar_backend_theme/static/src/scss/sidebar_menu.scss',
# 'odex_sidebar_backend_theme/static/src/xml/sidebar_menu_template.xml',
# 'odex_sidebar_backend_theme/static/src/xml/menu_item_template.xml',
'odex_sidebar_backend_theme/static/src/xml/sidebar_menu_template.xml',
'odex_sidebar_backend_theme/static/src/xml/menu_item_template.xml',
'odex_sidebar_backend_theme/static/src/js/sidebar_menu.js',
'odex_sidebar_backend_theme/static/src/js/menu_item.js',

View File

@ -4,23 +4,7 @@ import { Component, xml } from "@odoo/owl";
import { useService } from "@web/core/utils/hooks";
export class MenuItem extends Component {
static template = xml`
<li t-att-class="{ 'has-children': props.menu.children.length > 0, 'open': props.menu.isOpen }">
<div class="menu-item-container">
<a href="#" class="menu-item-link" t-on-click.prevent="() => this.selectMenu(props.menu)">
<t t-esc="props.menu.name"/>
</a>
<span t-if="props.menu.children.length > 0"
class="toggle-icon"
t-on-click="() => this.toggleMenu(props.menu, props.siblings)"/>
</div>
<ul t-if="props.menu.isOpen and props.menu.children.length > 0" class="submenu_list">
<t t-foreach="props.menu.children" t-as="childMenu" t-key="childMenu.id">
<MenuItem menu="childMenu" siblings="props.menu.children"/>
</t>
</ul>
</li>`
static template = "odex_sidebar_backend_theme.MenuItem"
static components = { MenuItem };

View File

@ -6,18 +6,7 @@ import { useService } from "@web/core/utils/hooks";
import { MenuItem } from "./menu_item";
export class SidebarMenu extends Component {
static template = xml`
<div class="custom_sidebar" t-att-class="{ 'is-open': state.isOpen }">
<div class="custom_icon_close" t-on-click="toggleSidebar">
<i class="fa fa-close"/>
</div>
<ul class="sidebar_menu_list">
<t t-foreach="state.menus" t-as="app" t-key="app.id">
<MenuItem menu="app" siblings="state.menus"/>
</t>
</ul>
</div>`
;
static template = "odex_sidebar_backend_theme.SidebarMenu"
static components = { MenuItem };

View File

@ -42,7 +42,7 @@ color: #fff;
transition: all 0.3s ease-in-out;
}
/* تعديل عرض الشريط العلوي والمحتوى الرئيسي */
/* تعديل الشريط العلوي والمحتوى الرئيسي */
.o_navbar,
.o_action_manager {
transition: all 0.3s ease-in-out;

View File

@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="odex_sidebar_backend_theme.MenuItem" owl="1">
<li t-att-class="{ 'has-children': props.menu.children.length > 0, 'open': props.menu.isOpen }">
<li t-att-class="{ 'has-children': props.menu.children.length > 0, 'open': props.menu.isOpen }">
<div class="menu-item-container">
<a href="#" class="menu-item-link" t-on-click.prevent="() => this.selectMenu(props.menu)">
<t t-esc="props.menu.name"/>

View File

@ -1,8 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="odex_sidebar_backend_theme.SidebarMenu" owl="1">
<!-- تأكد من أن هذا الكلاس الديناميكي موجود -->
<div class="custom_sidebar" t-att-class="{ 'is-open': state.isOpen }">
<div class="custom_icon_close" t-on-click="toggleSidebar">
<i class="fa fa-close"/>
</div>
<ul class="sidebar_menu_list">
<t t-foreach="state.menus" t-as="app" t-key="app.id">
<MenuItem menu="app" siblings="state.menus"/>