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

odex30_base/odex_sidebar_backend_theme/__manifest__.py

@@ -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',

odex30_base/odex_sidebar_backend_theme/static/src/js/menu_item.js

@@ -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 };
     

odex30_base/odex_sidebar_backend_theme/static/src/js/sidebar_menu.js

@@ -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 };
 

odex30_base/odex_sidebar_backend_theme/static/src/scss/sidebar_menu.scss

@@ -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;

odex30_base/odex_sidebar_backend_theme/static/src/xml/menu_item_template.xml

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

odex30_base/odex_sidebar_backend_theme/static/src/xml/sidebar_menu_template.xml

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