devops_admin
/
odex30_standard
mirror of https://github.com/hydracp9/odex30_standard
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Enhance sidebar settings with color schema and background options

This commit is contained in:
Altahir Hassan 2026-01-20 17:07:38 +04:00
parent 9a74671234
commit 90bc0679b4
3 changed files with 633 additions and 448 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
odex30_base/odex_sidebar_backend_theme2/models/res_config_settings.py
View File

@ -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()

865
odex30_base/odex_sidebar_backend_theme2/static/src/scss/sidebar_menu.scss
View File

@ -2,455 +2,456 @@
1. Main Sidebar Design
=================================== */
.custom_sidebar {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 270px;
height: 100vh;
overflow: auto;
background-color: #151a2d;
z-index: 999;
transform: translateX(0%);
transition: all 0.4s ease-in-out;
display: flex;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 270px;
height: 100vh;
overflow: auto;
background-color: var(--ox-sidebar-bg-color, #151a2d);
z-index: 999;
transform: translateX(0%);
transition: all 0.4s ease-in-out;
&:not(.is-open) {
transform: translateX(-100%) !important;
/* Use !important to force hiding */
}
/* =============== Add New Flyout =============== */
&.is-collapsed {
overflow: visible;
li {
position: relative;
z-index: 1000;
&:not(.is-open) {
transform: translateX(-100%) !important;
/* Use !important to force hiding */
}
.flyout-panel {
display: none;
position: absolute;
left: 100%;
top: 0;
min-width: 220px;
background: #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;
/* =============== Add New Flyout =============== */
&.is-collapsed {
overflow: visible;
li {
position: relative;
z-index: 1000;
}
.flyout-panel {
display: none;
position: absolute;
left: 100%;
top: 0;
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 {
display: block;
opacity: 1;
transform: translateX(0) scale(1);
pointer-events: auto;
&.is-collapsed {
width: 90px;
transform: translateX(0);
.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 {
list-style: none;
padding: 6px 4px;
display: flex;
flex-direction: column;
gap: 6px;
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");
}
}
}
.flyout-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
transition: background 150ms ease;
white-space: nowrap;
&::-webkit-scrollbar {
width: 8px;
}
.flyout-item:hover {
background: rgba(255, 255, 255, 0.05);
&::-webkit-scrollbar-track {
background: var(--ox-sidebar-scrollbar-track-color, #0e1223);
}
.flyout-item .icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
&::-webkit-scrollbar-thumb {
background-color: var(--ox-sidebar-scrollbar-thumb-color, #151a2d);
border-radius: 4px;
}
.flyout-item .label {
color: #fff;
font-size: 0.95rem;
&::-webkit-scrollbar-thumb:hover {
background-color: var(--ox-sidebar-scrollbar-thumb-hover-color, #151a2d);
}
/* 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;
justify-content: center;
flex-direction: column;
display: flex;
position: relative;
padding: 25px 20px;
align-items: center;
justify-content: space-between;
.header-logo {
img {
width: 46px;
height: 46px;
.header-logo {
img {
width: 46px;
height: 46px;
display: block;
object-fit: contain;
border-radius: 50%;
}
}
}
.sidebar-toggler {
position: static;
width: 50%;
margin-top: 25px;
}
.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 {
.sidebar_menu_list {
padding: 0 8px;
flex: 1;
display: flex;
flex-direction: column;
&.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;
}
}
}
}
}
}
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 {
.sidebar_menu_list {
list-style: none;
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
cursor: pointer;
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;
gap: 4px;
padding: 0 15px;
flex-direction: column;
transform: translateY(15px);
transition: 0.4s ease;
.nav_icon {
font-size: 24px;
margin: 0 10px;
&.primary-nav {
.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 {
font-size: 1rem;
transition: opacity 0.3s ease;
}
}
&.secondary-nav {
margin-top: auto;
// width: calc(100% - 30px);
background: var(--ox-sidebar-bg-color, #151a2d);
padding: 20px 15px;
.dropdown_menu {
height: 0;
overflow-y: hidden;
list-style: none;
padding-left: 15px;
transition: height 0.4s ease;
}
.nav-item {
position: relative;
// margin: 0 15px;
&:hover>.nav-link {
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;
transition: all 0.3s ease-in-out;
margin-left: 0 !important;
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;
display: flex;
align-items: center;
width: auto;
height: calc(var(--o-navbar-height) - 0px);
border-radius: 0;
user-select: none;
background: transparent;
color: var(--NavBar-entry-color, rgba(255, 255, 255, 0.9));
font-size: 1.2em;
padding: 0 15px;
border: none;
position: relative;
display: flex;
align-items: center;
width: auto;
height: calc(var(--o-navbar-height) - 0px);
border-radius: 0;
user-select: none;
background: transparent;
color: var(--NavBar-entry-color, rgba(255, 255, 255, 0.9));
font-size: 1.2em;
padding: 0 15px;
border: none;
}

22
odex30_base/odex_sidebar_backend_theme2/views/res_config_settings.xml
View File

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