Merge pull request #88 from expsa/odex_sidebar_menu_updates

feat: Add uncollapsed sidebar overlay setting and update sidebar menu…

odex30_base/odex_sidebar_backend_theme2/models/res_config_settings.py

@@ -22,6 +22,12 @@ class ResConfigSettings(models.TransientModel):
         string="Sidebar Icon",
         help="Upload an icon for the sidebar menu.",
     )
+
+    uncollapsed_sidebar_overlay = fields.Boolean(
+        config_parameter='odex_sidebar_backend_theme2.uncollapsed_sidebar_overlay',
+        string='Uncollapsed Sidebar Overlay',
+        help='Enable overlay effect when sidebar is uncollapsed'
+    )
     
     # set default value for the setting
     def get_values(self):
@@ -29,10 +35,12 @@ class ResConfigSettings(models.TransientModel):
         IrConfigParam = self.env['ir.config_parameter'].sudo()
         sidebar_menu_enable = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_menu_enable')
         disable_nav_menu_section = IrConfigParam.get_param('odex_sidebar_backend_theme2.disable_nav_menu_section')
+        uncollapsed_sidebar_overlay = IrConfigParam.get_param('odex_sidebar_backend_theme2.uncollapsed_sidebar_overlay')
         res.update(
             sidebar_menu_enable=sidebar_menu_enable == 'True',
             disable_nav_menu_section=disable_nav_menu_section == 'True',
-            sidebar_menu_icon=IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_menu_icon')
+            sidebar_menu_icon=IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_menu_icon'),
+            uncollapsed_sidebar_overlay=uncollapsed_sidebar_overlay == 'True',
         )
         return res
     
@@ -63,6 +71,10 @@ class ResConfigSettings(models.TransientModel):
             'odex_sidebar_backend_theme2.sidebar_menu_icon',
             self.sidebar_menu_icon or ''
         )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.uncollapsed_sidebar_overlay',
+            str(self.uncollapsed_sidebar_overlay)
+        )
         
         if self.sidebar_menu_icon:
             # Store the image URL in config parameter
@@ -85,4 +97,6 @@ class ResConfigSettings(models.TransientModel):
         IrConfigParam = self.env['ir.config_parameter'].sudo()
         sidebar_enabled = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_menu_enable') == 'True'
         sidebar_icon_url = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_menu_icon_url')
-        return {'sidebar_enabled': sidebar_enabled, 'sidebar_icon_url': sidebar_icon_url}
+        uncollapsed_sidebar_overlay = IrConfigParam.get_param('odex_sidebar_backend_theme2.uncollapsed_sidebar_overlay') == 'True'
+        
+        return {'sidebar_enabled': sidebar_enabled, 'sidebar_icon_url': sidebar_icon_url, 'uncollapsed_sidebar_overlay': uncollapsed_sidebar_overlay}

odex30_base/odex_sidebar_backend_theme2/static/src/js/sidebar_menu.js

@@ -23,26 +23,30 @@ export class SidebarMenu extends Component {
             isCollapsed: false,
             sidebarEnabled: false,
             sidebarMenuIconUrl: null,
+            overlayEnabled: false,
         });
 
         this.loadSidebarSetting()
 
         // =================== JavaScript Control Starts Here ===================
 
-        const applyLayoutChanges = (isOpen) => {
+        const applyLayoutChanges = (isOpen,isCollapsed) => {
             const actionManager = document.querySelector('.o_action_manager');
             const mainNavbar = document.querySelector('.o_navbar');
 
             // Determine sidebar width based on collapse state
-            const collapsedWidth = "90px";
-
-            if (isOpen) {
+            let collapsedWidth = "270px";
+            if (this.state.overlayEnabled) {
+                collapsedWidth = '90px';
+            }
+            console.log('Applying layout changes. Sidebar open:', isOpen, 'Sidebar collapsed:', isCollapsed);
+            if (!isCollapsed) {
                 if (actionManager) actionManager.style.marginInlineStart = collapsedWidth;
                 if (mainNavbar) mainNavbar.style.marginInlineStart = collapsedWidth;
             } else {
                 // If sidebar is hidden, remove margin
-                if (actionManager) actionManager.style.marginInlineStart = '0';
-                if (mainNavbar) mainNavbar.style.marginInlineStart = '0';
+                if (actionManager) actionManager.style.marginInlineStart = '90px';
+                if (mainNavbar) mainNavbar.style.marginInlineStart = '90px';
             }
         };
 
@@ -118,10 +122,14 @@ export class SidebarMenu extends Component {
             // Load sidebar menu icon URL
             this.state.sidebarMenuIconUrl = result.sidebar_icon_url || '/odex_sidebar_backend_theme2/static/src/img/logo.webp';
 
+            // Load overlay setting
+            this.state.overlayEnabled = result.uncollapsed_sidebar_overlay === true || result.uncollapsed_sidebar_overlay === 'True';
+
         } catch (error) {
             console.error('Error loading sidebar setting:', error);
             // Default to enabled if setting cannot be loaded
             this.state.sidebarEnabled = true;
+            this.state.overlayEnabled = false;
         }
     }
 

odex30_base/odex_sidebar_backend_theme2/views/res_config_settings.xml

@@ -21,6 +21,9 @@
                                     options="{'size': [128, 128]}"/>
                             </group>
                         </setting>
+                        <setting help="Enable overlay effect when sidebar is uncollapsed">
+                            <field name="uncollapsed_sidebar_overlay" />
+                        </setting>
                     </block>
                 </app>
             </xpath>