+ Customising theme
+ +Hue backend theme provides a fully configurable theme settings menu.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/hue_backend_theme/static/src/components/app_menu/menu_order.css b/hue_backend_theme/static/src/components/app_menu/menu_order.css
new file mode 100644
index 000000000..74ce973da
--- /dev/null
+++ b/hue_backend_theme/static/src/components/app_menu/menu_order.css
@@ -0,0 +1,118 @@
+.nav-container {
+ float: left;
+ position: relative;
+ width: 99vw;
+ height: 100%;
+ background: #fff;
+ display: flex;
+ justify-content: start;
+ align-items: start;
+ padding: 0px 20rem;
+ margin-top: 2rem;
+}
+.o_main_navbar .dropdown-menu .show {
+ max-height: auto !important;
+ min-width: 100%;
+ overflow: auto;
+ margin-top: 0;
+ position: static;
+ top: 0;
+ display: flex;
+ box-shadow: none;
+ border: none;
+ flex-wrap: wrap;
+ flex-direction: row;
+ overflow: unset;
+}
+.dropdown-item.o_app.mt0 {
+ flex-basis: 20%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ margin-bottom: 23px;
+}
+.o_setting_search {
+ position: relative;
+ .searchInput {
+ height: 28px;
+ padding: 0px;
+ border: 0px;
+ border-dropdown-item bottom: 1px solid gray('400');
+ border-color: gray('700');
+ box-shadow: none;
+ font-weight: 500;
+ }
+ .searchIcon {
+ @include o-position-absolute(4px, 0);
+ color: gray('700');
+ }
+}
+.search-container.has-results {
+ height: 100%;
+ .search-input {
+ height: 3em;
+ }
+ .search-results {
+ height: calc(100% - 3em);
+ overflow: auto;
+ }
+}
+.app-menu {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+}
+.o_base_settings_view .o_form_renderer {
+ --settings__tab-color: #111827;
+}
+.o_main_navbar .dropdown-menu.show {
+ max-height: none !important;
+ min-width: 100vw;
+ min-height: 100vh;
+ overflow: auto;
+ margin-top: 0px;
+}
+.o-mail-DiscussSidebar .btn {
+ padding: 0 !important;
+}
+
+.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto {
+ background-repeat: no-repeat;
+ background-size: 100%;
+ padding-left: 30%;
+ margin-bottom: 5%;
+}
+
+.sidebar_panel .o-dropdown,
+.sidebar_panel .CallSystrayMenuContainer,
+.sidebar_panel .MessagingMenuContainer,
+.sidebar_panel .o_switch,
+.sidebar_panel .o_menu_systray_item,
+.sidebar_panel .o_edit_website_container,
+.sidebar_panel .o_ActivityMenuView{
+ //**display: none !important;**//
+}
+
+.sidebar_panel .o_debug_manager,
+.sidebar_panel .o_switch_company_menu,
+.sidebar_panel .o-mail-DiscussSystray-class{
+ display: none !important;
+}
+.sidebar_panel .o_menu_systray button{
+ display: none !important;
+}
+.sidebar_panel .o_menu_systray .o_user_menu button{
+ display: block !important;
+}
+.dropdown-item{
+ text-decoration: none !important;
+}
+.dropdown-menu.fullscreen-menu.show {
+ inset: -5px auto auto 0px !important;
+}
+.search-container.has-results
+.search-results {
+ margin-left: 100px !important;
+ color: white !important;
+}
diff --git a/hue_backend_theme/static/src/components/app_menu/search_apps.js b/hue_backend_theme/static/src/components/app_menu/search_apps.js
new file mode 100644
index 000000000..517a2ca4c
--- /dev/null
+++ b/hue_backend_theme/static/src/components/app_menu/search_apps.js
@@ -0,0 +1,127 @@
+/** @odoo-module */
+
+import { NavBar } from "@web/webclient/navbar/navbar";
+import { registry } from "@web/core/registry";
+const { fuzzyLookup } = require('@web/core/utils/search');
+import { computeAppsAndMenuItems } from "@web/webclient/menus/menu_helpers";
+import { useService } from "@web/core/utils/hooks";
+const commandProviderRegistry = registry.category("command_provider");
+import { useRef, onMounted, useSubEnv } from "@odoo/owl";
+import { patch } from "@web/core/utils/patch";
+
+patch(NavBar.prototype, {
+ // To modify the Navbar properties and functions.
+ setup() {
+ super.setup()
+ var self = this;
+ this._search_def = $.Deferred();
+ let { apps, menuItems } = computeAppsAndMenuItems
+ (this.menuService.getMenuAsTree("root"));
+ this._apps = apps;
+ this._searchableMenus = menuItems;
+ this.fetch_data();
+ this.search_container = useRef('search_container');
+ this.search_input = useRef('search_input');
+ this.app_menu = useRef('app_menu');
+ this.search_results = useRef('search_results');
+ onMounted(() => {
+ this.setClass();
+ })
+ },
+ async fetch_data() {
+ // To fetch colors from database.
+ this.orm = useService("orm")
+ var result = await this.orm.call("res.config.settings",
+ "config_color_settings", [0])
+ if (result.primary_accent) {
+ document.documentElement.style.setProperty("--primary-accent",
+ result.primary_accent);
+ }
+ if (result.appbar_hover !== false){
+ document.documentElement.style.setProperty("--appbar-hover",
+ result.appbar_hover);
+ }
+ if (result.appbar_color !== false){
+ document.documentElement.style.setProperty("--app-bar-accent",
+ result.appbar_color);
+ }
+ if (result.primary_hover !== false){
+ document.documentElement.style.setProperty("--primary-hover",
+ result.primary_hover);
+ }
+ if (result.full_bg_img !== false){
+ document.documentElement.style.setProperty("--full-screen-bg",
+ 'url(data:image/png;base64,'+result.full_bg_img+')');
+ }
+ if (result.appbar_text !== false){
+ document.documentElement.style.setProperty("--app-menu-font-color",
+ result.appbar_text);
+ }
+ if (result.kanban_bg_color !== false){
+ document.documentElement.style.setProperty("--kanban-bg-color",
+ result.kanban_bg_color);
+ }
+ },
+ setClass() {
+ // Set variable for html elements.
+ this.$search_container = $(this.search_container.el)
+ this.$search_input = $(this.search_input.el);
+ this.$search_results = $(this.search_results.el);
+ this.$app_menu = $(this.app_menu.el);
+ this.$dropdown_menu = $(this.search_container.el.parentElement);
+ },
+ _searchMenusSchedule() {
+ // Hide / Show based on search input.
+ this.$search_results.removeClass("o_hidden")
+ this.$app_menu.addClass("o_hidden");
+ this._search_def.reject();
+ this._search_def = $.Deferred();
+ setTimeout(this._search_def.resolve.bind(this._search_def), 50);
+ this._search_def.done(this._searchMenus.bind(this));
+ },
+ _searchMenus() {
+ // App menu search function
+ var query = this.$search_input.val();
+ if (query === "") {
+ this.$search_container.removeClass("has-results");
+ this.$app_menu.removeClass("o_hidden");
+ this.$search_results.empty();
+ return;
+ }
+ var results = [];
+ fuzzyLookup(query, this._apps, (menu) => menu.label)
+ .forEach((menu) => {
+ results.push({
+ category: "apps",
+ name: menu.label,
+ actionID: menu.actionID,
+ id: menu.id,
+ webIconData: menu.webIconData,
+ });
+ });
+ fuzzyLookup(query, this._searchableMenus, (menu) =>
+ (menu.parents + " / " + menu.label).split("/").reverse().join("/")
+ ).forEach((menu) => {
+ results.push({
+ category: "menu_items",
+ name: menu.parents + " / " + menu.label,
+ actionID: menu.actionID,
+ id: menu.id,
+ });
+ });
+ this.$search_container.toggleClass(
+ "has-results",
+ Boolean(results.length)
+ );
+ this.$search_results.empty()
+ var resultsHtml = ""
+ results.forEach(function(result) {
+ resultsHtml += ""
+ })
+ this.$search_results.append(resultsHtml);
+ },
+ onAppClick(app) {
+ this.onNavBarDropdownItemSelection(app);
+ }
+})
diff --git a/hue_backend_theme/static/src/components/app_menu/side_menu.xml b/hue_backend_theme/static/src/components/app_menu/side_menu.xml
new file mode 100644
index 000000000..23f16babe
--- /dev/null
+++ b/hue_backend_theme/static/src/components/app_menu/side_menu.xml
@@ -0,0 +1,118 @@
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ 
+
+
+
+
+
+
+ Supports:
+
+
+ Community
+
+
+
+
+ Availability:
+
+
+ Odoo Online
+
+
+ Odoo.sh
+
+
+ On Premise
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Our Features
+ +info includes 300+ elements that you may need to create website without + external plugins.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Smooth navigation
+ +Easily accessible sidebar where it reveals the sidebar menu on just a click.
+
+
+
+
+
+
+
+
+
+
+ Highly responsive
+ +Critical highlights of the Hue backend theme is that it was genuinely responsive.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Theme Features
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+
+
+
+ Truly
+
+
+
+ Truly
+ Responsive
+
+
+
+
+ One of the critical highlights of + the Hue backend theme is that + it was genuinely responsive; moreover, it provides + an efficient interface to manage a mobile device.
+-
+
Appealing card hover style
+ - Detailed product filtering
+
- Modernized mini basket
+
- Cutting-edge single product
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Stunning
+
+
+
+ Stunning
+ Pages
+
+
+
+
+ Hue Backend Theme V18 is an Attractive Theme for Your + Odoo 18. This Theme Will Improve + Your Experience With Odoo.
+-
+
- Visually Stunning Design
+
- Customizable Layouts
+
- User-Friendly Navigation
+
+
+
+
+
+
+
+
+
+
+
+ Our Services
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+ ![]()
+
+
+
+
+
+
+ -
+
+
-
+
+
+
+ +
+ + +
+
Hue Backend Theme
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+