feat: Enhance sidebar settings with color schema and background options

odex30_base/odex_sidebar_backend_theme2/models/res_config_settings.py

@@ -6,56 +6,147 @@ from odoo import fields,api, models
 class ResConfigSettings(models.TransientModel):
     _inherit = 'res.config.settings'
 
+    # Sidebar Menu Enable Setting
     sidebar_menu_enable = fields.Boolean(
         config_parameter='odex_sidebar_backend_theme2.sidebar_menu_enable',
         string='Enable Sidebar Menu',
         help='Enable or disable the sidebar menu in the backend'
     )
     
+    # Navigation Menu Section Disable Setting
     disable_nav_menu_section = fields.Boolean(
         config_parameter='odex_sidebar_backend_theme2.disable_nav_menu_section',
         string='Disable Navigation Menu Section',
         help='Enable or disable the top navigation bar menu section in the backend interface'
     )
     
+    # Sidebar Menu Icon Setting
     sidebar_menu_icon = fields.Binary(
         string="Sidebar Icon",
         help="Upload an icon for the sidebar menu.",
     )
 
+    # Uncollapsed Sidebar Overlay Setting
     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
+    # Sidebar Background Settings
+    sidebar_background_type = fields.Selection(
+        [('color', 'Color'), ('image', 'Image')],
+        config_parameter='odex_sidebar_backend_theme2.sidebar_background_type',
+        string='Sidebar Background Type',
+        default='color',
+        help='Choose the type of background for the sidebar'
+    )
+    sidebar_background_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_background_color',
+        default='#151a2d',
+        string='Sidebar Background Color',
+        help='Set the background color for the sidebar (hex code or color name)'
+    )
+    sidebar_background_image = fields.Binary(
+        string='Sidebar Background Image',
+        help='Upload an image to use as the sidebar background'
+    )
+
+    # Sidebar Links Color Settings
+    sidebar_links_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_color',
+        default='#ffffff',
+        string='Sidebar Links Color',
+        help='Set the color for the sidebar links (hex code or color name)'
+    )
+    sidebar_links_hover_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_hover_color',
+        default='#151a2d',
+        string='Sidebar Links Hover Color',
+        help='Set the hover color for the sidebar links (hex code or color name)'
+    )
+    sidebar_links_active_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_active_color',
+        default='#151a2d',
+        string='Sidebar Links Active Color',
+        help='Set the active color for the sidebar links (hex code or color name)'
+    )
+    sidebar_links_bg_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_bg_color',
+        default='#ffffff00',
+        string='Sidebar Links Background Color',
+        help='Set the background color for the sidebar links (hex code or color name)'
+    )
+    sidebar_links_hover_bg_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_hover_bg_color',
+        default='#151a2d',
+        string='Sidebar Links Hover Background Color',
+        help='Set the hover background color for the sidebar links (hex code or color name)'
+    )
+    sidebar_links_active_bg_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_links_active_bg_color',
+        default='#ffffff',
+        string='Sidebar Links Active Background Color',
+        help='Set the active background color for the sidebar links (hex code or color name)'
+    )
+    sidebar_scrollbar_track_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_scrollbar_track_color',
+        default='#2f3542',
+        string='Sidebar Scrollbar Track Color',
+        help='Set the color for the sidebar scrollbar track (hex code or color name)'
+    )
+    sidebar_scrollbar_thumb_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_color',
+        default='#151a2d',
+        string='Sidebar Scrollbar Thumb Color',
+        help='Set the color for the sidebar scrollbar thumb (hex code or color name)'
+    )
+    sidebar_scrollbar_thumb_hover_color = fields.Char(
+        config_parameter='odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_hover_color',
+        default='#151a2d',
+        string='Sidebar Scrollbar Thumb Hover Color',
+        help='Set the hover color for the sidebar scrollbar thumb (hex code or color name)'
+    )
+
     def get_values(self):
         res = super(ResConfigSettings, self).get_values()
         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')
+        sidebar_background_type = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_background_type')
+        sidebar_background_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_background_color')
+        sidebar_background_image = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_background_image')
+        sidebar_links_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_color')
+        sidebar_links_hover_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_hover_color')
+        sidebar_links_active_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_active_color')
+        sidebar_links_bg_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_bg_color')
+        sidebar_links_hover_bg_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_hover_bg_color')
+        sidebar_links_active_bg_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_links_active_bg_color')
+        sidebar_scrollbar_track_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_scrollbar_track_color')
+        sidebar_scrollbar_thumb_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_color')
+        sidebar_scrollbar_thumb_hover_color = IrConfigParam.get_param('odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_hover_color')
+
         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'),
             uncollapsed_sidebar_overlay=uncollapsed_sidebar_overlay == 'True',
+            sidebar_background_type=sidebar_background_type or 'color',
+            sidebar_background_color=sidebar_background_color or '#151a2d',
+            sidebar_background_image=sidebar_background_image or False,
+            sidebar_links_color=sidebar_links_color or '#ffffff',
+            sidebar_links_hover_color=sidebar_links_hover_color or '#151a2d',
+            sidebar_links_active_color=sidebar_links_active_color or '#151a2d',
+            sidebar_links_bg_color=sidebar_links_bg_color or '#ffffff00',
+            sidebar_links_hover_bg_color=sidebar_links_hover_bg_color or '#151a2d',
+            sidebar_links_active_bg_color=sidebar_links_active_bg_color or '#ffffff',
+            sidebar_scrollbar_track_color=sidebar_scrollbar_track_color or '#2f3542',
+            sidebar_scrollbar_thumb_color=sidebar_scrollbar_thumb_color or '#151a2d',
+            sidebar_scrollbar_thumb_hover_color=sidebar_scrollbar_thumb_hover_color or '#151a2d',
         )
         return res
     
-    def _generate_sidebar_css(self):
-        """Generate CSS rules for sidebar menu state"""
-        if self.disable_nav_menu_section:
-            return """
-.o_main_navbar .o_menu_sections {
-    display: none!important;
-    visibility: hidden!important;
-}
-"""
-        return ""
-    
-    # save the setting value
     def set_values(self):
         super(ResConfigSettings, self).set_values()
         IrConfigParam = self.env['ir.config_parameter'].sudo()
@@ -75,7 +166,56 @@ class ResConfigSettings(models.TransientModel):
             'odex_sidebar_backend_theme2.uncollapsed_sidebar_overlay',
             str(self.uncollapsed_sidebar_overlay)
         )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_background_type',
+            self.sidebar_background_type or 'color'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_background_color',
+            self.sidebar_background_color or '#151a2d'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_background_image',
+            self.sidebar_background_image or False
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_color',
+            self.sidebar_links_color or '#ffffff'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_hover_color',
+            self.sidebar_links_hover_color or '#151a2d'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_active_color',
+            self.sidebar_links_active_color or '#151a2d'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_bg_color',
+            self.sidebar_links_bg_color or '#ffffff00'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_hover_bg_color',
+            self.sidebar_links_hover_bg_color or '#151a2d'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_links_active_bg_color',
+            self.sidebar_links_active_bg_color or '#ffffff'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_scrollbar_track_color',
+            self.sidebar_scrollbar_track_color or '#2f3542'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_color',
+            self.sidebar_scrollbar_thumb_color or '#151a2d'
+        )
+        IrConfigParam.set_param(
+            'odex_sidebar_backend_theme2.sidebar_scrollbar_thumb_hover_color',
+            self.sidebar_scrollbar_thumb_hover_color or '#151a2d'
+        )
 
+        # Store sidebar menu icon URL
         if self.sidebar_menu_icon:
             # Store the image URL in config parameter
             image_url = f"/web/image/res.config.settings/{self.id}/sidebar_menu_icon"
@@ -92,6 +232,32 @@ class ResConfigSettings(models.TransientModel):
             
         return True
     
+    def _generate_sidebar_css(self):
+        """Generate CSS rules for sidebar menu state"""
+        css = f"""
+/* Sidebar Menu State CSS */
+:root {{
+    --ox-sidebar-bg-color: {self.sidebar_background_color};
+    --ox-sidebar-links-color: {self.sidebar_links_color};
+    --ox-sidebar-links-hover-color: {self.sidebar_links_hover_color};
+    --ox-sidebar-links-active-color: {self.sidebar_links_active_color};
+    --ox-sidebar-links-bg-color: {self.sidebar_links_bg_color};
+    --ox-sidebar-links-hover-bg-color: {self.sidebar_links_hover_bg_color};
+    --ox-sidebar-links-active-bg-color: {self.sidebar_links_active_bg_color};
+    --ox-sidebar-scrollbar-track-color: {self.sidebar_scrollbar_track_color};
+    --ox-sidebar-scrollbar-thumb-color: {self.sidebar_scrollbar_thumb_color};
+    --ox-sidebar-scrollbar-thumb-hover-color: {self.sidebar_scrollbar_thumb_hover_color};
+}}
+"""
+        if self.disable_nav_menu_section:
+            css += """
+.o_main_navbar .o_menu_sections {
+    display: none!important;
+    visibility: hidden!important;
+}
+"""
+        return css
+    
     @api.model
     def get_sidebar_setting(self):
         IrConfigParam = self.env['ir.config_parameter'].sudo()

odex30_base/odex_sidebar_backend_theme2/static/src/scss/sidebar_menu.scss

@@ -2,455 +2,456 @@
    1. Main Sidebar Design
    =================================== */
 .custom_sidebar {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  position: fixed;
+    position: fixed;
-  top: 0;
+    top: 0;
-  left: 0;
+    left: 0;
-  width: 270px;
+    width: 270px;
-  height: 100vh;
+    height: 100vh;
-  overflow: auto;
+    overflow: auto;
-  background-color: #151a2d;
+    background-color: var(--ox-sidebar-bg-color, #151a2d);
-  z-index: 999;
+    z-index: 999;
-  transform: translateX(0%);
+    transform: translateX(0%);
-  transition: all 0.4s ease-in-out;
+    transition: all 0.4s ease-in-out;
 
-  &:not(.is-open) {
+    &:not(.is-open) {
-    transform: translateX(-100%) !important;
+        transform: translateX(-100%) !important;
-    /* Use !important to force hiding */
+        /* Use !important to force hiding */
-  }
-
-  /* =============== Add New Flyout =============== */
-
-  &.is-collapsed {
-    overflow: visible;
-
-    li {
-      position: relative;
-      z-index: 1000;
     }
 
-    .flyout-panel {
+    /* =============== Add New Flyout =============== */
-      display: none;
+
-      position: absolute;
+    &.is-collapsed {
-      left: 100%;
+        overflow: visible;
-      top: 0;
+
-      min-width: 220px;
+        li {
-      background: #151a2d;
+            position: relative;
-      color: #fff;
+            z-index: 1000;
-      border-radius: 10px;
+        }
-      padding: 10px;
+
-      box-shadow: 0 12px 30px rgba(8, 10, 20, 0.6);
+        .flyout-panel {
-      transform-origin: left top;
+            display: none;
-      transition: opacity 180ms ease, transform 180ms ease;
+            position: absolute;
-      opacity: 0;
+            left: 100%;
-      transform: translateX(-6px) scale(0.98);
+            top: 0;
-      pointer-events: none;
+            min-width: 220px;
+            background: var(--ox-sidebar-bg-color, #151a2d);
+            color: #fff;
+            border-radius: 10px;
+            padding: 10px;
+            box-shadow: 0 12px 30px rgba(8, 10, 20, 0.6);
+            transform-origin: left top;
+            transition: opacity 180ms ease, transform 180ms ease;
+            opacity: 0;
+            transform: translateX(-6px) scale(0.98);
+            pointer-events: none;
+        }
+
+        li:hover>.flyout-panel {
+            display: block;
+            opacity: 1;
+            transform: translateX(0) scale(1);
+            pointer-events: auto;
+        }
+
+        .flyout-list {
+            list-style: none;
+            padding: 6px 4px;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .flyout-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 8px 10px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 150ms ease;
+            white-space: nowrap;
+        }
+
+        .flyout-item:hover {
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .flyout-item .icon {
+            width: 28px;
+            height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .flyout-item .label {
+            color: #fff;
+            font-size: 0.95rem;
+        }
+
+        /* Submenu flyout */
+        .flyout-item.has-children {
+            position: relative;
+        }
+
+        .flyout-subpanel {
+            display: none;
+            position: absolute;
+            left: 100%;
+            top: 0;
+            min-width: 200px;
+            background: #151a2d;
+            border-radius: 10px;
+            padding: 10px;
+            box-shadow: 0 12px 30px rgba(8, 10, 20, 0.6);
+            opacity: 0;
+            transform: translateX(-6px) scale(0.98);
+            transition: opacity 180ms ease, transform 180ms ease;
+            pointer-events: none;
+            z-index: 1200;
+        }
+
+        .flyout-item.has-children:hover>.flyout-subpanel {
+            display: block;
+            opacity: 1;
+            transform: translateX(0) scale(1);
+            pointer-events: auto;
+        }
     }
 
-    li:hover > .flyout-panel {
+    &.is-collapsed {
-      display: block;
+        width: 90px;
-      opacity: 1;
+        transform: translateX(0);
-      transform: translateX(0) scale(1);
+
-      pointer-events: auto;
+        .sidebar-header {
+            padding: 25px 10px;
+            justify-content: center;
+            flex-direction: column;
+
+            .header-logo {
+                img {
+                    width: 46px;
+                    height: 46px;
+                }
+            }
+
+            .sidebar-toggler {
+                position: static;
+                width: 50%;
+                margin-top: 25px;
+            }
+        }
+
+        .sidebar-nav {
+            .sidebar_menu_list {
+                padding: 0 8px;
+
+                &.primary-nav {
+
+                    .has-children,
+                    li:not(.has-children) {
+                        position: relative;
+
+                        .menu-item-container {
+                            padding: 11px 8px;
+                            justify-content: center;
+
+                            .menu-item-icon {
+                                margin: 0;
+                                width: 30px;
+                                height: 30px;
+                            }
+
+                            .menu-item-link {
+                                display: none;
+                            }
+
+                            .toggle-icon {
+                                display: none;
+                            }
+
+                            &:hover {
+                                background-color: #eef2ff;
+                                color: #151a2d;
+                            }
+
+                            &:active {
+                                background-color: #d9e1fd;
+                                transform: scale(0.95);
+                            }
+                        }
+                    }
+
+                    .submenu_list {
+                        display: none;
+                    }
+                }
+
+                &.secondary-nav {
+                    width: auto;
+                    bottom: 20px;
+                    left: 0;
+                    right: 0;
+                    padding: 0 8px;
+
+                    .nav-item {
+                        position: relative;
+                        z-index: 1000;
+
+                        .nav-link {
+                            padding: 11px 8px;
+                            justify-content: center;
+
+                            .nav-label {
+                                display: none;
+                            }
+
+                            .nav_icon {
+                                margin: 0;
+                            }
+                        }
+
+                        .dropdown_menu {
+                            display: none;
+                        }
+
+                        // Flyout support for secondary-nav
+                        &:hover>.flyout-panel {
+                            display: block;
+                            opacity: 1;
+                            transform: translateX(0) scale(1);
+                            pointer-events: auto;
+                        }
+                    }
+                }
+            }
+        }
     }
 
-    .flyout-list {
+    li.open {
-      list-style: none;
+        >.menu-item-container {
-      padding: 6px 4px;
+            background-color: #fff;
-      display: flex;
+
-      flex-direction: column;
+            .menu-item-link {
-      gap: 6px;
+                color: #151a2d !important;
+            }
+
+            .toggle-icon {
+                transform: rotate(90deg);
+                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+            }
+        }
     }
 
-    .flyout-item {
+    &::-webkit-scrollbar {
-      display: flex;
+        width: 8px;
-      align-items: center;
-      gap: 10px;
-      padding: 8px 10px;
-      border-radius: 8px;
-      cursor: pointer;
-      transition: background 150ms ease;
-      white-space: nowrap;
     }
 
-    .flyout-item:hover {
+    &::-webkit-scrollbar-track {
-      background: rgba(255, 255, 255, 0.05);
+        background: var(--ox-sidebar-scrollbar-track-color, #0e1223);
     }
 
-    .flyout-item .icon {
+    &::-webkit-scrollbar-thumb {
-      width: 28px;
+        background-color: var(--ox-sidebar-scrollbar-thumb-color, #151a2d);
-      height: 28px;
+        border-radius: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
     }
 
-    .flyout-item .label {
+    &::-webkit-scrollbar-thumb:hover {
-      color: #fff;
+        background-color: var(--ox-sidebar-scrollbar-thumb-hover-color, #151a2d);
-      font-size: 0.95rem;
     }
 
-    /* Submenu flyout */
-    .flyout-item.has-children {
-      position: relative;
-    }
-
-    .flyout-subpanel {
-      display: none;
-      position: absolute;
-      left: 100%;
-      top: 0;
-      min-width: 200px;
-      background: #151a2d;
-      border-radius: 10px;
-      padding: 10px;
-      box-shadow: 0 12px 30px rgba(8, 10, 20, 0.6);
-      opacity: 0;
-      transform: translateX(-6px) scale(0.98);
-      transition: opacity 180ms ease, transform 180ms ease;
-      pointer-events: none;
-      z-index: 1200;
-    }
-
-    .flyout-item.has-children:hover > .flyout-subpanel {
-      display: block;
-      opacity: 1;
-      transform: translateX(0) scale(1);
-      pointer-events: auto;
-    }
-  }
-
-  &.is-collapsed {
-    width: 90px;
-    transform: translateX(0);
-
     .sidebar-header {
-      padding: 25px 10px;
+        display: flex;
-      justify-content: center;
+        position: relative;
-      flex-direction: column;
+        padding: 25px 20px;
+        align-items: center;
+        justify-content: space-between;
 
-      .header-logo {
+        .header-logo {
-        img {
+            img {
-          width: 46px;
+                width: 46px;
-          height: 46px;
+                height: 46px;
+                display: block;
+                object-fit: contain;
+                border-radius: 50%;
+            }
         }
-      }
 
-      .sidebar-toggler {
+        .sidebar-toggler {
-        position: static;
+            position: absolute;
-        width: 50%;
+            right: 20px;
-        margin-top: 25px;
+            height: 35px;
-      }
+            width: 35px;
+            color: #151a2d;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            background: #eef2ff;
+            align-items: center;
+            justify-content: center;
+            border-radius: 8px;
+            transition: 0.4s ease;
+
+            &:hover {
+                background: #d9e1fd;
+            }
+
+            span {
+                transition: 0.4s ease;
+            }
+
+            i {
+                font-size: 18px;
+                transition: transform 0.4s ease;
+            }
+        }
     }
 
     .sidebar-nav {
-      .sidebar_menu_list {
+        flex: 1;
-        padding: 0 8px;
+        display: flex;
+        flex-direction: column;
 
-        &.primary-nav {
+        .sidebar_menu_list {
-
+            list-style: none;
-          .has-children,
-          li:not(.has-children) {
-            position: relative;
-
-            .menu-item-container {
-              padding: 11px 8px;
-              justify-content: center;
-
-              .menu-item-icon {
-                margin: 0;
-                width: 30px;
-                height: 30px;
-              }
-
-              .menu-item-link {
-                display: none;
-              }
-
-              .toggle-icon {
-                display: none;
-              }
-
-              &:hover {
-                background-color: #eef2ff;
-                color: #151a2d;
-              }
-
-              &:active {
-                background-color: #d9e1fd;
-                transform: scale(0.95);
-              }
-            }
-          }
-
-          .submenu_list {
-            display: none;
-          }
-        }
-
-        &.secondary-nav {
-          width: auto;
-          bottom: 20px;
-          left: 0;
-          right: 0;
-          padding: 0 8px;
-
-          .nav-item {
-            position: relative;
-            z-index: 1000;
-
-            .nav-link {
-              padding: 11px 8px;
-              justify-content: center;
-
-              .nav-label {
-                display: none;
-              }
-
-              .nav_icon {
-                margin: 0;
-              }
-            }
-
-            .dropdown_menu {
-              display: none;
-            }
-
-            // Flyout support for secondary-nav
-            &:hover > .flyout-panel {
-              display: block;
-              opacity: 1;
-              transform: translateX(0) scale(1);
-              pointer-events: auto;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  li.open {
-    > .menu-item-container {
-      background-color: #fff;
-
-      .menu-item-link {
-        color: #151a2d !important;
-      }
-
-      .toggle-icon {
-        transform: rotate(90deg);
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
-      }
-    }
-  }
-
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: #2f3542;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: #151a2d;
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: #151a2d;
-  }
-
-  .sidebar-header {
-    display: flex;
-    position: relative;
-    padding: 25px 20px;
-    align-items: center;
-    justify-content: space-between;
-
-    .header-logo {
-      img {
-        width: 46px;
-        height: 46px;
-        display: block;
-        object-fit: contain;
-        border-radius: 50%;
-      }
-    }
-
-    .sidebar-toggler {
-      position: absolute;
-      right: 20px;
-      height: 35px;
-      width: 35px;
-      color: #151a2d;
-      border: none;
-      cursor: pointer;
-      display: flex;
-      background: #eef2ff;
-      align-items: center;
-      justify-content: center;
-      border-radius: 8px;
-      transition: 0.4s ease;
-
-      &:hover {
-        background: #d9e1fd;
-      }
-
-      span {
-        transition: 0.4s ease;
-      }
-
-      i {
-        font-size: 18px;
-        transition: transform 0.4s ease;
-      }
-    }
-  }
-
-  .sidebar-nav {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-
-    .sidebar_menu_list {
-      list-style: none;
-      display: flex;
-      gap: 4px;
-      padding: 0 15px;
-      flex-direction: column;
-      transform: translateY(15px);
-      transition: 0.4s ease;
-
-      &.primary-nav {
-        .has-children,
-        li:not(.has-children) {
-          &:hover {
-            > .menu-item-container {
-              background-color: #eef2ff;
-
-              .menu-item-link {
-                color: #151a2d;
-              }
-            }
-          }
-
-          .menu-item-container {
             display: flex;
-            gap: 12px;
+            gap: 4px;
-            align-items: center;
+            padding: 0 15px;
-            justify-content: space-between;
+            flex-direction: column;
-            cursor: pointer;
+            transform: translateY(15px);
-            transition: all 0.3s;
-            border: 1px solid #151a2d;
-            text-decoration: none;
-            padding: 11px 15px;
-            border-radius: 8px;
-            white-space: nowrap;
-
-            // image icon style
-            .menu-item-icon {
-              width: 25px;
-              height: 25px;
-              margin: 0 10px;
-              object-fit: contain;
-            }
-
-            // name style
-            .menu-item-link {
-              color: #fff;
-              flex-grow: 1;
-              font-size: 1rem;
-              text-decoration: none;
-              transition: opacity 0.3s ease;
-            }
-
-            // toggle icon style
-            .toggle-icon {
-              width: 20px;
-              height: 20px;
-              margin-right: 10px;
-              background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b9d0ec' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
-              background-repeat: no-repeat;
-              background-position: center;
-              transition: transform 0.2s ease-in-out;
-            }
-          }
-        }
-
-        .submenu_list {
-          list-style: none;
-          padding: 5px 0;
-
-          li {
-            .menu-item-container {
-              margin-left: 8px;
-              border: 1px solid transparent;
-              transition: all 0.2s ease;
-
-              &:hover {
-                background-color: #eef2ff;
-                border-color: #151a2d;
-
-                .menu-item-link {
-                  color: #151a2d;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &.secondary-nav {
-        margin-top: auto;
-        // width: calc(100% - 30px);
-        background: #151a2d;
-        padding: 20px 15px;
-
-        .nav-item {
-          position: relative;
-          // margin: 0 15px;
-
-          &:hover > .nav-link {
-            color: #151a2d !important;
-            background-color: #eef2ff;
-          }
-
-          .nav-link {
-            color: #fff !important;
-            display: flex;
-            gap: 12px;
-            white-space: nowrap;
-            border-radius: 8px;
-            padding: 11px 15px;
-            align-items: center;
-            text-decoration: none;
-            border: 1px solid #151a2d;
             transition: 0.4s ease;
 
-            .nav_icon {
+            &.primary-nav {
-              font-size: 24px;
+
-              margin: 0 10px;
+                .has-children,
+                li:not(.has-children) {
+                    &:hover {
+                        >.menu-item-container {
+                            background-color: var(--ox-sidebar-links-hover-bg-color, #eef2ff);
+
+                            .menu-item-link {
+                                color: var(--ox-sidebar-links-hover-color, #151a2d);
+                            }
+                        }
+                    }
+
+                    .menu-item-container {
+                        display: flex;
+                        gap: 12px;
+                        align-items: center;
+                        justify-content: space-between;
+                        cursor: pointer;
+                        transition: all 0.3s;
+                        border: 1px solid transparent;
+                        text-decoration: none;
+                        padding: 11px 15px;
+                        border-radius: 8px;
+                        white-space: nowrap;
+
+                        // image icon style
+                        .menu-item-icon {
+                            width: 25px;
+                            height: 25px;
+                            margin: 0 10px;
+                            object-fit: contain;
+                        }
+
+                        // name style
+                        .menu-item-link {
+                            color: #fff;
+                            flex-grow: 1;
+                            font-size: 1rem;
+                            text-decoration: none;
+                            transition: opacity 0.3s ease;
+                        }
+
+                        // toggle icon style
+                        .toggle-icon {
+                            width: 20px;
+                            height: 20px;
+                            margin-right: 10px;
+                            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23b9d0ec' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+                            background-repeat: no-repeat;
+                            background-position: center;
+                            transition: transform 0.2s ease-in-out;
+                        }
+                    }
+                }
+
+                .submenu_list {
+                    list-style: none;
+                    padding: 5px 0;
+
+                    li {
+                        .menu-item-container {
+                            margin-left: 8px;
+                            border: 1px solid transparent;
+                            transition: all 0.2s ease;
+
+                            &:hover {
+                                background-color: var(--ox-sidebar-links-hover-bg-color, #eef2ff);
+                                // border-color: #151a2d;
+
+                                .menu-item-link {
+                                    color: var(--ox-sidebar-links-hover-color, #151a2d);
+                                }
+                            }
+                        }
+                    }
+                }
             }
 
-            .nav-label {
+            &.secondary-nav {
-              font-size: 1rem;
+                margin-top: auto;
-              transition: opacity 0.3s ease;
+                // width: calc(100% - 30px);
-            }
+                background: var(--ox-sidebar-bg-color, #151a2d);
-          }
+                padding: 20px 15px;
 
-          .dropdown_menu {
+                .nav-item {
-            height: 0;
+                    position: relative;
-            overflow-y: hidden;
+                    // margin: 0 15px;
-            list-style: none;
+
-            padding-left: 15px;
+                    &:hover>.nav-link {
-            transition: height 0.4s ease;
+                        color: var(--ox-sidebar-links-hover-color, #151a2d) !important;
-          }
+                        background-color: var(--ox-sidebar-links-hover-bg-color, #eef2ff);
+                    }
+
+                    .nav-link {
+                        color: #fff !important;
+                        display: flex;
+                        gap: 12px;
+                        white-space: nowrap;
+                        border-radius: 8px;
+                        padding: 11px 15px;
+                        align-items: center;
+                        text-decoration: none;
+                        border: 1px solid transparent;
+                        transition: 0.4s ease;
+
+                        .nav_icon {
+                            font-size: 24px;
+                            margin: 0 10px;
+                        }
+
+                        .nav-label {
+                            font-size: 1rem;
+                            transition: opacity 0.3s ease;
+                        }
+                    }
+
+                    .dropdown_menu {
+                        height: 0;
+                        overflow-y: hidden;
+                        list-style: none;
+                        padding-left: 15px;
+                        transition: height 0.4s ease;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 
 /* ===================================
@@ -458,32 +459,32 @@
    =================================== */
 // Hide default application icon from top bar
 .o_navbar .o_main_navbar .o_navbar_apps_menu .o-dropdown {
-  display: none !important;
+    display: none !important;
 }
 
 .o_web_client {
-  margin-left: 0 !important;
+    margin-left: 0 !important;
-  transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
 }
 
 /* Adjust Top Bar and Main Content */
 .o_navbar,
 .o_action_manager {
-  transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
 }
 
 /* Open Icon Design (New) */
 .sidebar_toggle_icon {
-  position: relative;
+    position: relative;
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  width: auto;
+    width: auto;
-  height: calc(var(--o-navbar-height) - 0px);
+    height: calc(var(--o-navbar-height) - 0px);
-  border-radius: 0;
+    border-radius: 0;
-  user-select: none;
+    user-select: none;
-  background: transparent;
+    background: transparent;
-  color: var(--NavBar-entry-color, rgba(255, 255, 255, 0.9));
+    color: var(--NavBar-entry-color, rgba(255, 255, 255, 0.9));
-  font-size: 1.2em;
+    font-size: 1.2em;
-  padding: 0 15px;
+    padding: 0 15px;
-  border: none;
+    border: none;
 }

odex30_base/odex_sidebar_backend_theme2/views/res_config_settings.xml

@@ -12,18 +12,36 @@
                         <setting help="Enable or disable the sidebar menu in the backend interface">
                             <field name="sidebar_menu_enable" />
                         </setting>
-                        <setting help="Enable or disable the top navigation bar menu section in the backend interface">
+                        <setting
+                            help="Enable or disable the top navigation bar menu section in the backend interface">
                             <field name="disable_nav_menu_section" />
                         </setting>
                         <setting>
                             <group>
                                 <field name="sidebar_menu_icon" widget="image"
-                                    options="{'size': [128, 128]}"/>
+                                    options="{'size': [128, 128]}" />
                             </group>
                         </setting>
                         <setting help="Enable overlay effect when sidebar is uncollapsed">
                             <field name="uncollapsed_sidebar_overlay" />
                         </setting>
+                        <setting help="Color Schema Setting">
+                            <group>
+                                <field name="sidebar_background_type" />
+                                <field name="sidebar_background_color" widget="color" />
+                                <field name="sidebar_background_image" widget="image"
+                                    options="{'size': [128, 128]}" />
+                                <field name="sidebar_links_color" widget="color" />
+                                <field name="sidebar_links_hover_color" widget="color" />
+                                <field name="sidebar_links_active_color" widget="color" />
+                                <field name="sidebar_links_bg_color" widget="color" />
+                                <field name="sidebar_links_hover_bg_color" widget="color" />
+                                <field name="sidebar_links_active_bg_color" widget="color" />
+                                <field name="sidebar_scrollbar_track_color" widget="color" />
+                                <field name="sidebar_scrollbar_thumb_color" widget="color" />
+                                <field name="sidebar_scrollbar_thumb_hover_color" widget="color" />
+                            </group>
+                        </setting>
                     </block>
                 </app>
             </xpath>