Feb 2 [ADD] : Initial Commit 'jazzy_backend_theme'

jazzy_backend_theme/README.rst

@@ -0,0 +1,40 @@
+Jazzy Backend Theme
+==================
+* Jazzy Backend Theme module for Odoo 16 community editions
+
+Installation
+============
+	- www.odoo.com/documentation/15.0/setup/install.html
+	- Install our custom addon
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(https://www.odoo.com/documentation/user/15.0/legal/licenses/licenses.html)
+
+Company
+-------
+* 'Cybrosys Techno Solutions <https://cybrosys.com/>'__
+
+Credits
+-------
+* 'Cybrosys Techno Solutions <https://cybrosys.com/>'__
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+
+Bug Tracker
+-----------
+Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported.
+
+Maintainer
+==========
+This module is maintained by Cybrosys Technologies.
+
+For support and more information, please visit https://www.cybrosys.com
+
+Further information
+===================
+HTML Description: `<static/description/index.html>`__
+

jazzy_backend_theme/__init__.py

@@ -0,0 +1 @@
+from . import models

jazzy_backend_theme/__manifest__.py

@@ -0,0 +1,57 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2021-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: Cybrosys Techno Solutions(<https://www.cybrosys.com>)
+#
+#    You can modify it under the terms of the GNU LESSER
+#    GENERAL PUBLIC LICENSE (LGPL v3), Version 3.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details.
+#
+#    You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE
+#    (LGPL v3) along with this program.
+#    If not, see <http://www.gnu.org/licenses/>.
+#
+#############################################################################
+
+{
+    "name": "Jazzy Backend Theme v16",
+    "description": """Minimalist and elegant backend theme for Odoo 16, Backend Theme, Theme""",
+    "summary": "Jazzy backed Theme V16 is an attractive theme for backend",
+    "category": "Themes/Backend",
+    "version": "16.0.1.0.0",
+    'author': 'Cybrosys Techno Solutions',
+    'company': 'Cybrosys Techno Solutions',
+    'maintainer': 'Cybrosys Techno Solutions',
+    'website': "https://www.cybrosys.com",
+    "depends": ['base', 'web', 'mail'],
+    "data": [
+        'views/style.xml',
+        'views/res_config_settings.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'jazzy_backend_theme/static/src/components/app_menu/side_menu.xml',
+            'jazzy_backend_theme/static/src/layout/style/login.scss',
+            'jazzy_backend_theme/static/src/layout/style/layout_colors.scss',
+            'jazzy_backend_theme/static/src/components/app_menu/menu_order.css',
+            'jazzy_backend_theme/static/src/layout/style/layout_style.scss',
+            'jazzy_backend_theme/static/src/layout/style/sidebar.scss',
+            'jazzy_backend_theme/static/src/components/app_menu/search_apps.js',
+        ],
+    },
+    'images': [
+        'static/description/banner.png',
+        'static/description/theme_screenshot.png',
+    ],
+    'license': 'LGPL-3',
+    'installable': True,
+    'application': False,
+    'auto_install': False,
+}

jazzy_backend_theme/models/__init__.py

@@ -0,0 +1 @@
+from . import res_config_settings

jazzy_backend_theme/models/res_config_settings.py

@@ -0,0 +1,73 @@
+from odoo import models, fields
+
+
+class ResCompany(models.Model):
+    _inherit = 'res.company'
+
+    background_image = fields.Binary(string="Background Image", attachment=True)
+
+
+class ResConfigSettings(models.TransientModel):
+    _inherit = 'res.config.settings'
+
+    theme_background = fields.Binary(string="App menu Background",
+                                     related='company_id.background_image',
+                                     readonly=False)
+
+    app_bar_color = fields.Char(string='Appbar color',
+                                config_parameter='jazzy_backend_theme.appbar_color',
+                                default='#FFFFFF')
+    primary_accent = fields.Char(string="Navbar color",
+                                 config_parameter='jazzy_backend_theme.primary_accent_color',
+                                 default='#004589')
+    secondary_accent = fields.Char(string="Navbar color",
+                                   config_parameter='jazzy_backend_theme.secondary_color',
+                                   default='#0C4D9D')
+
+    kanban_bg_color = fields.Char(string="Kanban Bg Color",
+                                  config_parameter='jazzy_backend_theme.kanban_bg_color',
+                                  default='#F7F7F7')
+
+    primary_hover = fields.Char(string="Hover Primary Color",
+                                config_parameter='jazzy_backend_theme.primary_hover',
+                                default='#00376E')
+    light_hover = fields.Char(string="Light Hover",
+                              config_parameter='jazzy_backend_theme.light_hover',
+                              default='#ffffff')
+    appbar_text = fields.Char(string="Home Menu Text Color",
+                              config_parameter='jazzy_backend_theme.appbar_text',
+                              default='#F7F8F7')
+    secoundary_hover = fields.Char(string="AppBar Hover",
+                                   config_parameter='jazzy_backend_theme.secoundary_hover',
+                                   default='#F2F2F3')
+
+    def config_color_settings(self):
+        colors = {}
+        print("ppp", self.env.user.company_id.background_image)
+        colors['full_bg_img'] = self.env.user.company_id.background_image
+        colors['appbar_color'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.appbar_color');
+        colors['primary_accent'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.primary_accent_color');
+        colors['secondary_color'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.secondary_color');
+        colors['kanban_bg_color'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.kanban_bg_color');
+        colors['primary_hover'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.primary_hover');
+        colors['light_hover'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.light_hover');
+        colors['appbar_text'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.appbar_text');
+        colors['secoundary_hover'] = self.env[
+            'ir.config_parameter'].sudo().get_param(
+            'jazzy_backend_theme.secoundary_hover');
+
+        return colors

jazzy_backend_theme/static/description/index.html

@@ -0,0 +1,617 @@
+<div style="background-color: #714B67; min-height: 600px; width: 100%; padding: 15px; position: relative;">
+    <!-- TITLE BAR -->
+    <div
+        style="border-bottom: 1px solid #875A7B; padding: 15px; display: flex; justify-content: space-between; align-items: center;">
+        <img src="assets/misc/cybrosys-logo.png" width="42" height="42" style="width: 42px; height: 42px;" />
+        <div>
+            <div style="color: #7C7BAD; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                class="mr-2">
+                <i class="fa fa-check mr-1"></i>Community
+            </div>
+            <div style="color: #875A7B; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                class="mr-2">
+                <i class="fa fa-check mr-1"></i>Enterprise
+            </div>
+            <div style="color: #017E84; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: bold; background-color: white; display: inline-block; padding: 3px 10px; border-radius: 50px;"
+                class="mr-2">
+                <i class="fa fa-check mr-1"></i>Odoo.sh
+            </div>
+        </div>
+    </div>
+    <!-- END OF TITLE BAR -->
+
+    <!-- APP HERO -->
+    <h1 style="color: #FFFFFF; font-weight: bolder; font-size: 50px; text-align: center; margin-top: 50px;">Jazzy Backend Theme</h1>
+    <p style="color:#FFFFFF; padding: 8px 15px; text-align: center; font-size: 24px;"> Clean &amp;Minimal Backend Theme for Odoo 16</p>
+    <!-- END OF APP HERO -->
+    <img src="assets/screenshots/hero.gif"
+        style="width: 75%; height: auto; position: absolute; margin-left: auto; margin-right: auto; top: 45%; left: 12%; right: auto;" />
+
+</div>
+
+<!-- NAVIGATION SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px; margin-top: 300px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/compass.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Explore This
+        Module</h2>
+</div>
+<div class="row my-4" style="font-family: 'Montserrat', sans-serif;">
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#overview">
+            <div class="d-flex justify-content-between align-items-center"
+                style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Overview</span>
+                    <span
+                        style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">Learn
+                        more about this
+                        module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36" />
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#features">
+            <div class="d-flex justify-content-between align-items-center"
+                style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Features</span>
+                    <span
+                        style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+                        features of this
+                        module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36" />
+            </div>
+        </a>
+    </div>
+    <div class="col-sm-12 col-md-6 my-3">
+        <a href="#screenshots">
+            <div class="d-flex justify-content-between align-items-center"
+                style="background-color: #f5f5f5; padding: 30px; width: 100%;">
+                <div>
+                    <span style="color: #714B67; font-size: 24px; font-weight: 500; display: block;">Screenshots</span>
+                    <span
+                        style="color: #714B67; font-size: 16px; font-weight: 400; color:#282F33;  display: block;">View
+                        screenshots for this
+                        module</span>
+                </div>
+                <img src="assets/misc/right-arrow.png" width="36" height="36" />
+            </div>
+        </a>
+    </div>
+</div>
+<!-- END OF NAVIGATION SECTION -->
+
+<!-- OVERVIEW SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="overview">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pie-chart.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Overview
+    </h2>
+</div>
+<div class="row" style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 py-4">
+       he app provides a user friendly backend
+        theme for Odoo 15.0 community edition.
+    </div>
+</div>
+<!-- END OF OVERVIEW SECTION -->
+
+<!-- FEATURES SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="features">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/features.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Features
+    </h2>
+</div>
+<div class="row" style="font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 14px; line-height: 200%;">
+    <div class="col-sm-12 col-md-6">
+        <div class="d-flex align-items-center" style="margin-top: 40px; margin-bottom: 40px">
+            <img src="assets/misc/check-box.png" class="mr-2" />
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Well-Crafted.</span>
+        </div>
+        <div class="d-flex align-items-center" style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2" />
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Efficent Design.</span>
+        </div>
+        <div class="d-flex align-items-center" style="margin-top: 30px; margin-bottom: 30px">
+            <img src="assets/misc/check-box.png" class="mr-2" />
+            <span style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Clearer insight.</span>
+        </div>
+    </div>
+</div>
+<!-- END OF FEATURES SECTION -->
+
+<!-- SCREENSHOTS SECTION -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;" id="screenshots">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/pictures.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Screenshots
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">App Menu</h3>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">The App Menu is the main attraction of the Jazzy backend theme. It has a fully responsive layout with a new highlighted color combination and a more modern interface for all applications. Moreover, the Jazzy backend theme improves your experience with Odoo, providing you with a fully customizable background image, Navbar color, and many more.</p>
+            <img src="assets/screenshots/1.png" class="img-thumbnail">
+            <img src="assets/screenshots/13.png" class="img-thumbnail">
+
+        </div>
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Theme Settings</h3>
+             <h2 class="mt-3">Jazzy Backend Theme Settings</h2>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">To improve your experience with Odoo the Jazzy backend theme provides a fully
+        configurable theme settings menu.</p>
+            <img src="assets/screenshots/2.png" class="img-thumbnail">
+        </div>
+
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Custom AppBar</h3>
+            <h2 class="mt-3">AppBar</h2>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Easly accessible side bar where it reveals the side bar menu on just a click. Moreover, its also
+        fully customisable with Jazzy backend theme.</p>
+            <img src="assets/screenshots/3.png" class="img-thumbnail">
+        </div>
+         <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Responsive Layout</h3>
+            <h2 class="mt-3">Truly Responsive</h2>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">One of the critical highlights of the Jazzy backend theme is that it was genuinely responsive; moreover, it provides an efficient interface to manage a mobile device.</p>
+<!--            <img src="assets/screenshots/4.png" class="img-thumbnail">-->
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Custom Kanban View</h3>
+            <h2 class="mt-3">Kanban view</h2>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Jazzy Backend Theme gives a colorful & elegant kanban view, and it's fully customizable with this theme.</p>
+            <img src="assets/screenshots/4.png" class="img-thumbnail">
+        </div>
+        <div style="display: block; margin: 30px auto;">
+            <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Search Option</h3>
+            <h2 class="mt-3">Advanced Searching for App Menus</h2>
+            <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Jazzy Backend Theme gives a more complex and powerful search than standard search, providing search options like enterprise edition.</p>
+            <img src="assets/screenshots/5.png" class="img-thumbnail">
+        </div>
+        <div>
+            <div style="display: block; margin: 30px auto;">
+                <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Form View</h3>
+                <h2 class="mt-3">Custom Form view</h2>
+                <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Jazzy Backend theme provides a fully modified and colorful form view with the full view
+            experience.</p>
+                <img src="assets/screenshots/6.png" class="img-thumbnail">
+            </div>
+            <div style="display: block; margin: 30px auto;">
+                <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Vibrent ui</h3>
+                <h2 class="mt-3">Attractive Customizable User Interface</h2>
+                <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">It provides fully attractive, and a elgant User Interface with completely customizability.</p>
+                <img src="assets/screenshots/7.png" class="img-thumbnail">
+            </div>
+        </div>
+        <div>
+            <div style="display: block; margin: 30px auto;">
+                <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Mobile </h3>
+                <h2 class="mt-3">Kanban View</h2>
+            </div>
+            <div style="display: block; margin: 30px auto;">
+                <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Responsive kanban view</h3>
+                <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">It gives a fully responsive kanban view in Mobile view, which is also fully customizable in the Jazzy Backend theme.</p>
+                <img src="assets/screenshots/14.png" class="img-thumbnail">
+            </div>
+            <div style="display: block; margin: 30px auto;">
+                <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Form View</h3>
+                <h2 class="mt-3">Visualized form view</h2>
+                <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">It puts forward a fully visualized form view with colorful and attractive aspects which the user can customize.</p>
+                <img src="assets/screenshots/15.png" class="img-thumbnail">
+            </div>
+            <div style="display: block; margin: 30px auto;">
+                <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">List view</h3>
+                <h2 class="mt-3">Modified Tree view</h2>
+                <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Jazzy Backend Theme provides fully modified list view and amazing table designs with stunning look outputs.</p>
+                <img src="assets/screenshots/16.png" class="img-thumbnail">
+            </div>
+            <div style="display: block; margin: 30px auto;">
+                <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">settings</h3>
+                <h2 class="mt-3">Fully Redesigned Settings</h2>
+                <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">Mobile friendly and Redesigned settings with stylish view.</p>
+                <img src="assets/screenshots/17.png" class="img-thumbnail">
+            </div>
+            <div style="display: block; margin: 30px auto;">
+                <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Employe module</h3>
+                <h2 class="mt-3">Modified Form view for employees</h2>
+                <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">It provides the Employees with a form view with redesigned and various modified features.</p>
+                <img src="assets/screenshots/18.png" class="img-thumbnail">
+            </div>
+            <div style="display: block; margin: 30px auto;">
+                <h3 style="font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: bold;">Search View</h3>
+                <h2 class="mt-3">Ultra Modern Search view</h2>
+                <p style="font-weight: 400; font-family: 'Montserrat', sans-serif; font-size: 14px;">It has an advanced search view with a highly modified search option for easy usage and an improved experience with Odoo.</p>
+                <img src="assets/screenshots/19.png" class="img-thumbnail">
+            </div>
+        </div>
+
+    </div>
+</div>
+<!-- END OF SCREENSHOTS SECTION -->
+
+<!-- RELATED PRODUCTS -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/categories.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Related
+        Products
+    </h2>
+</div>
+<div class="row">
+    <div class="col-sm-12">
+        <div id="demo1" class="row carousel slide" data-ride="carousel">
+            <!-- The slideshow -->
+            <div class="carousel-inner" style="padding: 30px;">
+                <div class="carousel-item" style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/dynamic_accounts_report/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/1.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/custom_gantt_view/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/2.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/project_custom_gantt/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/3.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <div class="carousel-item active" style="min-height: 198.656px;">
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/account_reports_xlsx/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/4.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/base_accounting_kit/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/5.png">
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-xs-12 col-sm-4 col-md-4 mb16 mt16" style="float:left">
+                        <a href="https://apps.odoo.com/apps/modules/15.0/hr_payroll_community/" target="_blank">
+                            <div style="border-radius:10px">
+                                <img class="img img-responsive center-block" style="border-radius: 0px;"
+                                    src="assets/modules/6.png">
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <!-- Left and right controls -->
+            <a class="carousel-control-prev" href="#demo1" data-slide="prev" style="width:35px; color:#000"> <span
+                    class="carousel-control-prev-icon"><i class="fa fa-chevron-left" style="font-size:24px"></i></span>
+            </a> <a class="carousel-control-next" href="#demo1" data-slide="next" style="width:35px; color:#000">
+                <span class="carousel-control-next-icon"><i class="fa fa-chevron-right"
+                        style="font-size:24px"></i></span>
+            </a>
+        </div>
+    </div>
+</div>
+<!-- END OF RELATED PRODUCTS -->
+
+<!-- OUR SERVICES -->
+
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/star.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Our Services
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #1dd1a1 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/cogs.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Customization</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #ff6b6b !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/wrench.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #6462CD !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/lifebuoy.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Support</h6>
+        </div>
+
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #ffa801 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/user.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Hire
+                Odoo
+                Developer</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #54a0ff  !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/puzzle.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Integration</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #6d7680 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/update.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Migration</h6>
+        </div>
+
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #786fa6 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/consultation.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Consultancy</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #f8a5c2 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/training.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Implementation</h6>
+        </div>
+
+        <div class="col-lg-4 d-flex flex-column justify-content-center align-items-center my-4">
+            <div class="d-flex justify-content-center align-items-center mx-3 my-3"
+                style="background-color: #e6be26 !important; border-radius: 15px !important; height: 80px; width: 80px;">
+                <img src="assets/icons/license.png" class="img-responsive" height="48px" width="48px">
+            </div>
+            <h6 class="text-center" style="font-family: Montserrat, 'sans-serif' !important; font-weight: bold;">
+                Odoo
+                Licensing Consultancy</h6>
+        </div>
+    </div>
+
+</div>
+
+<!-- END OF END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/corporate.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Our
+        Industries
+    </h2>
+</div>
+
+<div class="container my-5">
+    <div class="row">
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/trading-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Trading
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easily procure
+                    and
+                    sell your products</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    POS
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Easy
+                    configuration
+                    and convivial experience</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/education-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Education
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    A platform for
+                    educational management</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px"
+                    width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Manufacturing
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Plan, track and
+                    schedule your operations</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    E-commerce &amp; Website
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Mobile
+                    friendly,
+                    awe-inspiring product pages</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/service-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Service Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Keep track of
+                    services and invoice</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Restaurant
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    Run your bar or
+                    restaurant methodically</p>
+            </div>
+        </div>
+
+        <div class="col-lg-3">
+            <div class="my-4 d-flex flex-column justify-content-center"
+                style="background-color: #f6f8f9 !important; border-radius: 0px; padding: 2rem !important; height: 250px !important;">
+                <img src="assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px" width="48px">
+                <h5 style="font-family: Montserrat, sans-serif !important; color: #000 !important; font-weight: bold;">
+                    Hotel Management
+                </h5>
+                <p style="font-family: Montserrat, sans-serif !important; font-size: 0.9rem !important;">
+                    An
+                    all-inclusive
+                    hotel management application</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- END OF END OF OUR INDUSTRIES -->
+
+<!-- SUPPORT -->
+<div class="d-flex align-items-center" style="border-bottom: 2px solid #714B67; padding: 15px 0px;">
+    <div class="d-flex justify-content-center align-items-center mr-2"
+        style="background-color: #F5F5F5; border-radius: 0px; width: 40px; height: 40px;">
+        <img src="assets/misc/customer-support.png" />
+    </div>
+    <h2 class="mt-2" style="font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: bold;">Support
+    </h2>
+</div>
+<div class="container mt-5">
+    <div class="row">
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4"
+                    style="background-color: #714B67; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/support.png" height="48" width="48" style="width: 42px; height: 42px;" />
+                </div>
+                <div>
+                    <h4>Need Help?</h4>
+                    <p style="line-height: 100%;">Got questions or need help? Get in touch.</p>
+                    <a href="mailto:odoo@cybrosys.com">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">
+                            odoo@cybrosys.com</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-12 col-md-6">
+            <div style="background-color: #F6F8F9; padding: 30px; display: flex; align-items: center;">
+                <div class="mr-4"
+                    style="background-color: #2AC44D; display: inline-block; height: 70px; width: 70px; display: flex; align-items: center; justify-content: center;">
+                    <img src="assets/misc/whatsapp.png" height="52" width="52" style="width: 52px; height: 52px;" />
+                </div>
+                <div>
+                    <h4>WhatsApp</h4>
+                    <p style="line-height: 100%;">Say hi to us on WhatsApp!</p>
+                    <a href="https://api.whatsapp.com/send?phone=918606827707">
+                        <p style="font-weight: 400; font-size: 28px; line-height: 80%; color: #714B67;">+91 86068
+                            27707</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-12 my-5 d-flex justify-content-center align-items-center">
+            <img src="assets/misc/logo.png" width="144" height="31"
+                style="width:144px; height: 31px; margin-top: 40px;" />
+        </div>
+    </div>
+</div>
+<!-- END OF SUPPORT -->

jazzy_backend_theme/static/src/components/app_menu/menu_order.css

@@ -0,0 +1,114 @@
+.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;
+
+}
+/*.search-results {*/
+/*    float: left;*/
+/*    position: relative;*/
+/*    width: 100vw;*/
+/*    height: 100vh;*/
+/*    background: #fff;*/
+/*    display: flex;*/
+/*    justify-content: center;*/
+/*    align-items: center;*/
+/*    padding: 0 20rem;*/
+/*}*/
+.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_main_navbar .dropdown-menu.show {
+    max-height: none !important;
+    min-width: 100vw;
+    min-heigt: 100vh;
+    overflow: auto;
+    margin-top: 0;
+}
+.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%;
+
+}
+.form-control {
+    padding: 0 !important;
+}
+@media (max-width: 1371px){
+
+}
+
+@media (max-width:992px) {
+
+}
+
+@media (max-width:400px) {
+
+}

jazzy_backend_theme/static/src/components/app_menu/search_apps.js

@@ -0,0 +1,122 @@
+/** @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 core from 'web.core';
+
+const commandProviderRegistry = registry.category("command_provider");
+const { onMounted } = owl;
+
+import { patch } from 'web.utils';
+var rpc = require('web.rpc');
+patch(NavBar.prototype, 'jazzy_backend_theme/static/src/js/appMenu.js', {
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+     setup() {
+        this._super();
+        this._search_def = $.Deferred();
+        let { apps, menuItems } = computeAppsAndMenuItems(this.menuService.getMenuAsTree("root"));
+        this._apps = apps;
+        this._searchableMenus = menuItems;
+        this.colors = this.fetch_data();
+        onMounted(this.onMounted);
+    },
+    fetch_data: function() {
+        var self = this;
+        rpc.query({model: 'res.config.settings',method: 'config_color_settings',args: [0],}).then(function(result){
+            self.colors = result;
+            console.log("$$$",result);
+            if (result.primary_accent !== false){
+                document.documentElement.style.setProperty("--primary-accent",result.primary_accent);
+            }
+            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.secondary_color !== false){
+                document.documentElement.style.setProperty("--primary-accent-border",result.secondary_color);}
+            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.secoundary_hover !== false){
+                document.documentElement.style.setProperty("--secoundary-hover",result.secoundary_hover);}
+            if (result.kanban_bg_color !== false){
+                document.documentElement.style.setProperty("--kanban-bg-color",result.kanban_bg_color);}
+        });
+    },
+
+    onMounted() {
+        this.$search_container = $(".search-container");
+        this.$search_input = $(".search-input input");
+        this.$search_results = $(".search-results");
+        this.$app_menu = $(".app-menu");
+        this.$dropdown_menu = $(".dropdown-menu");
+    },
+     _searchMenusSchedule: function () {
+        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: 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.html(
+            core.qweb.render(
+                "jazzy_backend_theme.SearchResults",
+                {
+                    results: results,
+                    widget: this,
+                }
+            )
+        );
+    },
+});

jazzy_backend_theme/static/src/components/app_menu/side_menu.xml

@@ -0,0 +1,98 @@
+<templates id="template" xml:space="preserve">
+    <t t-inherit="web.NavBar.AppsMenu" t-inherit-mode="extension" owl="1">
+        <xpath expr="//Dropdown"
+               position="replace">
+            <li class="dropdown d-flex justify-content-center align-items-center">
+                <a class="full" data-bs-toggle="dropdown" data-display="static"
+                   href="#">
+                    <i class="fa fa-th-large"
+                       style="font-size: 18px !important; color: white; margin-top: 3px;"/>
+                </a>
+                <div class="dropdown-menu fullscreen-menu" role="menu">
+                        <div class="search-container form-row align-items-center m-auto mb-5 col-12">
+                            <div class="search-input col-md-10 ml-auto mr-auto mb-5"
+                                 t-on-input="_searchMenusSchedule">
+                                    <div class="input-group">
+                                        <div class="input-group-prepend">
+                                            <div class="input-group-text">
+                                                <i class="fa fa-search"/>
+                                            </div>
+                                        </div>
+                                        <input type="search"
+                                               autocomplete="off"
+                                               placeholder="Search menus..."
+                                               class="form-control"/>
+                                    </div>
+                                </div>
+                            <div class="search-results col-md-10 ml-auto mr-auto"/>
+                        </div>
+
+                    <div class="nav-container">
+                            <div class="app-menu">
+                                <t t-foreach="menuService.getApps()" t-as="app" t-key="app_index">
+                                          <a role="menuitem"
+                                             t-attf-href="#menu_id={{app.id}}"
+                                             class="dropdown-item o_app mt0"
+                                             t-att-data-menu-id="app.menuID"
+                                             t-att-data-menu-xmlid="app.xmlID"
+                                             t-att-data-action-id="app.actionID">
+                                        <img t-if="app.webIcon.includes('.png')" t-att-title="app.name"
+                                             style="width: 70px !important;height: 70px !important;border-radius: 10px !important;margin: 5px 5px 5px 5px;"
+                                             t-attf-src="data:image/png;base64,{{app.webIconData}}"/>
+                                              <img t-if="app.webIcon.includes('.svg')" t-att-title="app.name"
+                                                   style="width: 70px !important;height: 70px !important;border-radius: 10px !important;margin: 5px 5px 5px 5px;"
+                                                   t-attf-src="data:image/svg+xml;base64,{{app.webIconData}}"/>
+                                              <b class="a_app_menu_title"><t t-esc="app.name"/></b>
+                                    </a>
+
+                                </t>
+                            </div>
+                        </div>
+                    </div>
+            </li>
+        </xpath>
+    </t>
+    <t t-name="jazzy_backend_theme.SearchResults">
+        <t t-foreach="results" t-as="result">
+            <div class="search_icons">
+            <a t-attf-class="o-menu-search-result dropdown-item col-12 ml-auto mr-auto #{result_first ? 'active' : ''}"
+               t-attf-style="background-image:url('data:image/svg+xml;base64,#{result.webIconData}')"
+               t-attf-href="#menu_id=#{result.id}&amp;action_id=#{result.actionID}"
+               t-att-data-menu-id="result.id"
+               t-att-data-action-id="result.actionID"
+               t-raw="result.name"
+               onclick="$('.dropdown-menu').removeClass('show'); $('.search-results').addClass('o_hidden'); $('.app-menu').removeClass('o_hidden'); $('.search-input input').val('');"/>
+            </div>
+        </t>
+    </t>
+
+    <t t-inherit="web.NavBar" t-inherit-mode="extension" owl="1">
+        <xpath expr="//nav[hasclass('o_main_navbar')]" position="after">
+
+    <div class="sidebar_panel" id="sidebar_panel">
+        <div class="sidebar">
+            <ul class="sidebar_menu">
+                <t t-foreach="menuService.getApps()" t-as="app" t-key="app_index">
+                    <li>
+                        <a role="menuitem"
+                           t-attf-href="#menu_id={{app.id}}"
+                           class="dropdown-item o_app mt0"
+                           t-att-data-menu-id="app.menuID"
+                           t-att-data-menu-xmlid="app.xmlID"
+                           t-att-data-action-id="app.actionID">
+                            <img t-if="app.webIcon.includes('.png')" t-att-title="app.name"
+                                 style="width: 25px !important;height: 25px !important;border-radius: 5px !important;padding:0 !important;"
+                                 t-attf-src="data:image/png;base64,{{app.webIconData}}"/>
+                            <img t-if="app.webIcon.includes('.svg')" t-att-title="app.name"
+                                 style="width: 25px !important;height: 25px !important;border-radius: 5px !important;padding:0 !important;"
+                                 t-attf-src="data:image/svg+xml;base64,{{app.webIconData}}"/>
+                        </a>
+                    </li>
+                </t>
+	        </ul>
+	    </div>
+    </div>
+    </xpath>
+  </t>
+
+</templates>

jazzy_backend_theme/static/src/layout/style/color.css

@@ -0,0 +1,14 @@
+:root{
+    --primary_accent: black !default;
+    --secondary_accent: #ffffff !default;
+    --inverse_accent: #ffffff !default;
+    --kanban-bg-color:#f7f7f7;
+    --o-kanban-color-border-width: 8px;
+    --selected_row: #ffffff !default;
+    --bg_white: #ffffff !default;
+    --f_color: #555b6d !default;
+    --color_white : #ffffff !default;
+    --primary_hover: #00376e !default;
+    --light_hover: #d5d5d5;
+    --fullscreen-bg-color: #C5F0FC !important;
+}

jazzy_backend_theme/static/src/layout/style/layout_colors.scss

@@ -0,0 +1,33 @@
+$primary_accent: var(--primary-accent) !important;
+$secondary_accent: var(--secondary-accent) !important;
+$inverse_accent: var(--inverse-accent) !important;
+$kanban-bg-color:var(--kanban-bg-color) !important;
+$o-kanban-color-border-width: var(--o-kanban-color-border-width) !important;
+$selected_row: var(--selected-row) !important;
+$bg_white: var(--bg-white) !important;
+$f_color: var(--f-color) !important;
+$color_white : var(--color-white) !important;
+$primary_hover: var(--primary-hover) !important;
+$light_hover: var(--light-hover) !important;
+
+$fullscreen-bg-color: var(--fullscreen-bg-color) !important;
+
+
+:root{
+    --primary-accent: #004589 ;
+    --primary-accent-border: #ffffff;
+    --app-bar-accent: #ffffff;
+    --full-screen-bg: url(/jazzy_backend_theme/static/description/assets/background.jpg) ;
+
+    --kanban-bg-color:#f7f7f7;
+    --o-kanban-color-border-width: 8px !important;
+    --selected-row: #ffffff !important;
+    --app-menu-font-color:#ffffff;
+    --bg-white: #ffffff !important;
+    --f-color: #555b6d !important;
+    --color-white : #ffffff !important;
+    --primary-hover: #00376e;
+    --light-hover: #d5d5d5 ;
+    --secoundary-hover:#ffffff;
+    --fullscreen-bg-color: #C5F0FC !important;
+}

jazzy_backend_theme/static/src/layout/style/layout_style.scss

@@ -0,0 +1,457 @@
+.bg-primary{
+    background-color: var(--primary-accent) !important;
+}
+.o_field_widget.o_field_many2one .o_external_button {
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+    padding-left:1%;
+    padding-right:0.5%;
+
+    margin-left: 2px;
+    font-size: 19px;
+    color: #7C7BAD;
+    border: none;
+}
+
+.app_bar .app_container a:hover{
+    background:var(--secoundary-hover) !important;
+}
+
+.fullscreen-menu{
+    height: calc(100vh - 46px);
+    background: var(--full-screen-bg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    min-width: 100%;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    margin-top: 0;
+    position: fixed;
+    top: 46px;
+    left: -1px;
+    padding: 2.5rem 0;
+}
+.a_app_menu_title{
+    color: var(--app-menu-font-color) !important;
+}
+.o_main_navbar{
+    background-color:var(--primary-accent) !important;
+    border-bottom: 1px solid var(--primary-hover) !important;
+}
+.dropdown-toggle {
+    &:hover{
+        background: var(--primary-hover) !important;
+    }
+}
+
+.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto {
+
+    background-repeat: no-repeat;
+    background-size: 23px;
+    padding-left: 40px;
+    margin-bottom: 5px;
+
+}
+
+//Top bar
+//icon color
+.o_searchview .o_searchview_facet .o_searchview_facet_label {
+    background-color: var(--primary-accent) !important;
+}
+.btn-secondary {
+    color: #fff !important;
+    background-color: var(--primary-accent) !important;
+    border-color: var(--primary-accent) !important;
+    margin:0 5px 0 0;
+    &:hover{
+        background-color: var(--primary-hover) !important;
+    }
+}
+
+.o_searchview {
+    background-color: var(--bg-white) !important;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 1px 25px 3px 5px;
+}
+.o_searchview .o_searchview_input_container {
+    display: flex;
+    flex-flow: row wrap;
+    position: relative;
+    border-radius: 10px;
+}
+.o_searchview .o_searchview_input_container .o_searchview_facet {
+    display: flex;
+    -webkit-box-flex: 0;
+    flex: 0 0 auto;
+    margin: 1px 3px 0 0;
+    max-width: 100%;
+    border-radius: 10px;
+    position: relative;
+}
+
+.o_searchview .o_searchview_facet .o_facet_values{
+     border-radius: 10px !important;
+     background-color:  #e2e2e0 !important;
+}
+.o_searchview .o_searchview_input_container .o_searchview_facet .o_searchview_facet_label {
+    align-items: center;
+    color: var(--bg-white) !important;
+    -webkit-box-flex: 0;
+    flex: 0 0 auto;
+    padding: 0 3px;
+    border-radius: 10px;
+    display: flex;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+}
+//module icon
+.oe_module_icon {
+    width: 70px;
+    max-height: 70px;
+    max-width: 23%;
+    float: left;
+    border-radius: 10px;
+}
+
+.o_base_settings .o_setting_container .settings_tab .selected{
+    background-color: var(--primary-hover);
+}
+
+
+.app_bar .app_container .scroll_container .app_items_wrapper .app_items{
+    background-color:var(--app-bar-accent);
+}
+.app_bar .app_container .scroll_container .app_items_wrapper .app_items .o-app-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 5px;
+
+}
+
+//photo
+.o_kanban_view .o_kanban_record.o_kanban_record_has_image_fill .o_kanban_image_fill_left {
+    margin-top: -8px;
+    margin-bottom: -8px;
+    margin-left: -8px;
+    border-radius: 10px;
+}
+
+//drowpdowm
+.o-dropdown.dropup > .o-dropdown--menu, .o-dropdown.dropdown > .o-dropdown--menu, .o-dropdown.dropleft > .o-dropdown--menu, .o-dropdown.dropright > .o-dropdown--menu {
+    left: auto;
+    right: auto;
+    margin-left: 0;
+    margin-right: 0;
+    border-radius: 10px;
+}
+
+//kanban
+.o_kanban_view.o_kanban_grouped .o_kanban_record, .o_kanban_view.o_kanban_grouped .o_kanban_quick_create {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    border-radius: 10px;
+}
+.o_form_view .oe_button_box .btn.oe_stat_button {
+    color: var(--primary-accent) !important;
+    height: 44px;
+    padding: 0 6px 0 0 !important;
+    text-align: left;
+    white-space: nowrap;
+    background-color: transparent;
+    opacity: 0.8;
+    border-radius: 0px;
+    margin-bottom: 0;
+}
+.o_dashboards .o_website_dashboard div.o_box {
+    color: rgba(73, 80, 87, 0.76);
+    background-color: white;
+    background-size: cover;
+    margin-top: 16px;
+    position: static;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+}
+
+//button
+.custom-control-input:checked ~ .custom-control-label::before {
+    color: #fff;
+    border-color: var(--primary-accent) !important;
+    background-color: var(--primary-accent) !important;
+}
+
+//current date calender
+.o_calendar_view .o_calendar_widget .fc-timeGridDay-view .fc-widget-header.fc-today, .o_calendar_view .o_calendar_widget .fc-timeGridWeek-view .fc-widget-header.fc-today {
+    border-radius: 25px;
+    background: var(--primary-accent) !important;
+    color: var(--bg-white) !important;
+}
+// Tabs Start
+.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
+    border: none;
+    border-bottom: solid;
+    font-weight: bold;
+    background: var(--primary-accent) !important;
+    color: var(--bg-white) !important;
+    border-radius: 5px,50px,5px,50px;
+}
+//website
+.o_dashboards .o_website_dashboard .o_dashboard_common .o_inner_box {
+    padding-top: 10px;
+    text-align: center;
+    border: 1px solid var(--bg-white) !important;
+    height: 80px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+    color: var(--color-white) !important;
+    background-color: var(--primary-accent) !important;
+    border-radius:10px;
+
+    &:hover{
+        background-color: var(--primary-hover) !important;
+    }
+}
+.o_purchase_dashboard .table > thead > tr > td.o_main, .o_purchase_dashboard .table tbody > tr > td.o_main {
+    background-color: var(--primary-accent) !important;
+    border-radius:10px;
+}
+
+.dropdown-menu.show {
+    display: block;
+    border-radius: 0;
+
+}
+
+.o_mail_preview .o_mail_preview_image.o_mail_preview_app > img {
+    border-radius: 10px;
+}
+
+//Graph
+.o_calendar_view .fc-view .fc-event.o_calendar_color_3:not(.o_calendar_hatched):not(.o_calendar_striked) {
+    background: var(--primary-hover) !important;
+    border-radius: 10px;
+}
+
+//Event
+.text-center {
+    text-align: center !important;
+    border-radius: 10px;
+}
+
+//form control icons
+.o_form_view .oe_button_box .oe_stat_button .o_button_icon {
+    color: var(--primary-accent) !important;
+}
+//.o_required_modifier.o_input, .o_required_modifier .o_input {
+//    background-color: var(--primary-accent) !important;
+//}
+
+//small icons
+.o_search_panel .o_search_panel_category .o_search_panel_section_icon {
+    color: var(--primary-accent) !important;
+}
+.badge-primary {
+    color: var(--color-white) !important;
+    background-color: var(--primary-accent) !important;
+}
+//wizard
+.modal.o_technical_modal .modal-content {
+    border-radius: 10px;
+}
+//Navbar
+.nav-container{
+    height: auto !important;
+    background: transparent !important;
+    float: none !important;
+    padding: 0 !important;
+    width: 850px !important;
+    margin: 0 auto !important;
+}
+.o_nav_entry{
+    &:hover{
+        background-color: var(--primary-hover) !important;
+    }
+}
+ .app-menu{
+     width: 100%;
+     display: flex;
+     flex-wrap: wrap;
+     justify-content: flex-start;
+     margin: 0 auto;
+     margin-right: 70px;
+
+}
+//Responsive
+.o_MobileMessagingNavbar_tab.o-active{
+    color: var(--primary-accent) !important;
+}
+@media (max-width: 768px){
+    .app-menu{
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        justify-content: flex-start;
+        margin: 0 auto;
+        }
+    .o_cp_bottom{
+        flex-wrap: wrap !important;
+    }
+    .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled {
+
+        margin-right: 10px;
+    }
+    .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled:not(.btn-primary), .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled:not(.btn-primary):hover, .o_form_view .o_form_statusbar > .o_statusbar_status > .o_arrow_button.disabled:not(.btn-primary):focus
+    {
+    margin-left:10px;
+    }
+    .o_form_view .o_form_statusbar > .o_field_widget {
+        margin-left: -24px !important;
+        margin-top: 1px !important;
+    }
+    .o_form_view .o_form_statusbar{
+        flex-direction: column !important;
+        padding-left: 0px !important;
+    }
+}
+@media (min-width: 768px){
+    .o_form_view .o_form_sheet_bg > .o_form_sheet {
+        margin: 12px auto;
+        border-radius: 10px;
+    }
+
+    .search-container{
+        width: 750px;
+        margin: 0 auto;
+    }
+
+}
+
+@media (max-width:767px){
+
+    .o_form_view .o_group{
+        width:100% !important;
+    }
+
+    .dropdown-menu.show {
+        display: block;
+        border-radius:0;
+    }
+    .o_control_panel .breadcrumb > li {
+    display: inline-block;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: top;
+    }
+    .o_control_panel .o_cp_top_right {
+        min-height: 30px;
+        max-width: 100%;
+        margin-left: 10%;
+    }
+    .o_form_view .o_form_sheet_bg > .o_form_sheet {
+        min-width: 100%;
+        max-width: 100%;
+        min-height: 100%;
+        border: 1px solid #c8c8d3;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+        background: white;
+        margin: 4.8px auto;
+        padding: 24px;
+        padding-right: 16px;
+        padding-left: 16px;
+    }
+    .oe_topbar_name{
+        display:none;
+    }
+
+    .nav-container {
+    /*float: left;*/
+    position: relative;
+    width: 100vw !important;
+    /*height: 100%;*/
+    /*background: #fff;*/
+    display: flex;
+    /* justify-content: start; */
+    align-items: start;
+    margin-top: 2rem;
+    }
+
+    .o_cp_top{
+        flex-wrap: wrap !important;
+    }
+    .o_cp_top_left, .o_cp_searchview{
+        width: 100%;
+    }
+    .o_cp_top_right{
+        width: 100%;
+        margin: 1.5rem auto;
+        margin-left: 0 !important;
+    }
+
+    //Search Panel
+    .o_content o_controller_with_searchpanel, .o_controller_with_searchpanel{
+        display:flex !important;
+        flex-direction: column !important;
+    }
+
+    .o_search_panel{
+        display: flex;
+        overflow-x: auto;
+        overflow-y: auto;
+        height: 200px;
+        width: 100%;
+        section{
+            margin-right: 1rem;
+        }
+    }
+    .o_search_panel section {
+        width: 100% !important;
+    }
+    .o_setting_container{
+        display: flex;
+        flex-direction: column;
+    }
+    .settings_tab{
+        display: flex;
+        flex-direction: row !important;
+        overflow-x: auto;
+        height: 40px;
+    }
+    .settings{
+        margin-top: 1.5rem;
+    }
+}
+//@media(max-width:716px){
+
+    //html .o_web_client > .o_action_manager > .o_action > .o_content{
+      //  overflow-x: hidden !important;
+   // }
+//}
+
+@media (max-width:524px){
+
+    .o_control_panel .o_cp_bottom_right > .o_cp_pager
+    {
+        margin-top:5px;
+    }
+    div.app-menu *::before{
+        box-sizing:none;
+    }
+    div.app-menu *::after{
+        box-sizing:none;
+    }
+}
+@media (max-width:493px){
+    .o_control_panel .o_cp_bottom_left > .o_cp_action_menus {
+        margin-left: 0px;
+        padding-right: 10px;
+    }
+}

jazzy_backend_theme/static/src/layout/style/login.scss

@@ -0,0 +1,150 @@
+
+#wrapwrap > main {
+    background: #f8f8fb;
+}
+.navbar {
+    background: #fff !important;
+}
+
+body {
+    font-family: 'Poppins', sans-serif !important;
+}
+body.bg-100 {
+    background-color: #000000 !important;
+}
+.card.o_database_list {
+    align-items: center;
+    max-width: 450px !important
+}
+.card.o_database_list .card-body {
+    background-color: #fff !important;
+    border-radius: 5px !important;
+    -webkit-box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03) !important;
+    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63, .03) !important;
+    width: 450px;
+}
+.o_main_navbar .o_menu_sections {
+    flex-wrap: w
+}
+a {
+    color: #556ee6;
+    text-decoration: none;
+}
+a:hover {
+    color: #4458b8;
+    text-decoration: underline;
+}
+.alert-info {
+    color: #306391;
+    background-color: #dcedfc;
+    border-color: #cbe4fb;
+}
+.oe_login_form button.btn-link {
+    color: #495057;
+    font-weight: 500;
+    font-size: 14px !important;
+}
+.oe_login_form button.btn-link:hover {
+    color: #171a1c;
+}
+
+//login button starts
+.btn-primary {
+    color: #fff;
+    background-color: #556ee6;
+    border-color: #556ee6;
+}
+.btn-primary:hover {
+    color: #fff;
+    background-color: #485ec4;
+    border-color: #4458b8;
+}
+.btn-check:active+.btn-primary,
+.btn-check:checked+.btn-primary,
+.btn-primary.active,.btn-primary:active,
+.show>.btn-primary.dropdown-toggle {
+    color: #fff;
+    background-color: #4458b8 !important;
+    border-color: #4053ad !important;
+}
+.btn-check:focus+.btn-primary, .btn-primary:focus {
+    color: #fff;
+    background-color: #485ec4 !important;
+    border-color: #4458b8 !important;
+    -webkit-box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important;
+    box-shadow: 0 0 0 .15rem rgba(111,132,234,.5) !important;
+}
+.oe_login_form .btn {
+    display: inline-block;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    padding: .47rem .75rem;
+    border-radius: .25rem;
+    -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+}
+.btn-secondary {
+    color: #fff !important;
+    background-color: #74788d !important;
+    border-color: #74788d !important;
+}
+.btn-secondary:hover {
+    color: #fff !important;
+    background-color: #636678 !important;
+    border-color: #5d6071 !important;
+}
+.btn-secondary:active {
+    color: #fff;
+    background-color: #5d6071 !important;
+    border-color: #575a6a !important;
+}
+.btn-secondary i,.btn-secondary span {
+    color: #fff !important;
+}
+.btn-fill-secondary:focus, .btn-secondary:focus, .btn-fill-secondary.focus, .focus.btn-secondary {
+    box-shadow: none !important;
+}
+//login button ends
+
+//input starts
+.oe_login_form input {
+    display: block;
+    width: 100%;
+    height: 40px !important;
+    padding: 10px 20px;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da !important;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: .25rem;
+    -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
+    box-shadow: none !important;
+    margin-bottom:10px !important;
+}
+form label {
+    font-weight: 400 !important;
+}
+.oe_login_form a.btn.btn-secondary {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.35rem 0.75rem;
+}
+.oe_login_form a.btn.btn-secondary i.fa.fa-database {
+    margin-left: 5px;
+}

jazzy_backend_theme/static/src/layout/style/sidebar.scss

@@ -0,0 +1,66 @@
+#sidebar_panel {
+    height: calc(100% - 0%);
+   position: fixed;
+    background-color: var(--app-bar-accent);
+    width: 50px;
+    overflow-y: scroll;
+    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
+    scrollbar-width: none;  /* Hide scrollbar for Firefox */
+    z-index: 999;
+}
+#sidebar_panel::-webkit-scrollbar {
+    display: none; /* Hide scrollbar for Chrome, Safari and Opera */
+}
+.sidebar_panel .sidebar {
+    padding: 0;
+    white-space: nowrap;
+    padding-bottom: 20px;
+    padding-top: 5px;
+}
+
+.sidebar_panel .sidebar .sidebar_menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.sidebar_panel .sidebar .sidebar_menu li {
+    margin: 0;
+    padding: 0;
+    border: 0px;
+    display: block;
+    /*margin-bottom:5px;*/
+}
+.dropdown-item{
+    padding: 10px 10px 10px 10px;
+}
+.o_main_navbar .o_menu_brand {
+  text-decoration: none !important;
+  margin-left: 10px;
+}
+.sidebar_panel .sidebar .sidebar_menu li a {
+    margin: 0;
+    border: 0px;
+    display: block;
+    cursor: pointer;
+    overflow: hidden;
+    color: #ffffff;
+    font-size: 13px;
+    transition:.3s all;
+}
+.sidebar_panel .sidebar .sidebar_menu li:hover  a {
+    background: var(--secoundary-hover) !important;
+    color: #fff;
+}
+
+.sidebar_panel .sidebar .sidebar_menu li a .sidebar_img {
+    width: 30px;
+    border-radius:5px;
+}
+
+html .o_web_client > .o_action_manager{
+    margin-left:50px;
+}
+.sidebar_panel .sidebar .sidebar_menu li .nav-link {
+    padding:10px 10px 10px 10px;
+}

jazzy_backend_theme/views/res_config_settings.xml

@@ -0,0 +1,115 @@
+<odoo>
+    <record id="res_config_cam" model="ir.ui.view">
+        <field name="name">res.config.jazzy.backend.theme</field>
+        <field name="model">res.config.settings</field>
+        <field name="priority" eval="90"/>
+        <field name="inherit_id" ref="base.res_config_settings_view_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[@id='companies']" position='after'>
+                <h2>jazzy Backend Theme</h2>
+                <div class="row mt16 o_settings_container" name="barcode_scanner_using_cam">
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+<!--                            <field name="theme_background"/>-->
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="Background Image" for="theme_background" class="ml-4" required="1"/>
+                            <field name="theme_background" widget="image"/>
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="app_bar_color" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="App Bar Background Color" for="app_bar_color"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="appbar_text" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="AppMenu Text color" for="appbar_text"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="secoundary_hover" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="AppBar Hover color" for="secoundary_hover"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="primary_accent" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="Navbar Background Color" for="primary_accent"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="secondary_accent" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="Primary Border Color" for="secondary_accent"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="kanban_bg_color" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="Kanban Background Color" for="kanban_bg_color"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xs-12 col-md-6 o_setting_box">
+                        <div class="o_setting_left_pane">
+                            <field name="primary_hover" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="Primary Button Hover" for="primary_hover"/>
+
+                            <div class="text-muted">
+                            </div>
+                        </div>
+                    </div>
+<!--                    <div class="col-xs-12 col-md-6 o_setting_box">-->
+<!--                        <div class="o_setting_left_pane">-->
+
+<!--                        </div>-->
+<!--                        <div class="o_setting_right_pane">-->
+<!--                            <label string="Light Hover color" for="light_hover"/>-->
+<!--                            <field name="light_hover" widget="color"/>-->
+<!--                            <div class="text-muted">-->
+<!--                            </div>-->
+<!--                        </div>-->
+<!--                    </div>-->
+
+                </div>
+            </xpath>
+        </field>
+    </record>
+</odoo>

jazzy_backend_theme/views/style.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+    <template id="code_custom_layout" inherit_id="web.layout" name="Custom Layout">
+        <xpath expr="//meta[@content='IE=edge,chrome=1']" position="after">
+            <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
+            <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&amp;display=swap" rel="stylesheet"/>
+        </xpath>
+    </template>
+</odoo>