Dec 21 : [ADD] Initial Commit 'jazzy_backend_theme'

jazzy_backend_theme/README.rst

@@ -0,0 +1,47 @@
+.. image:: https://img.shields.io/badge/license-LGPL--3-green.svg
+    :target: https://www.gnu.org/licenses/lgpl-3.0-standalone.html
+    :alt: License: LGPL-3
+
+Jazzy Backend Theme
+==================
+* Jazzy Backend Theme module for Odoo 17 community editions. This is a Minimalist and Elegant Backend Theme for Odoo 17. This theme will change your Old Experience to a New Experience with Odoo.
+
+Configuration
+-------------
+    - www.odoo.com/documentation/17.0/setup/install.html
+    - Install our custom addon
+
+Company
+-------
+* `Cybrosys Techno Solutions <https://cybrosys.com/>`__
+
+License
+-------
+General Public License, Version 3 (LGPL v3).
+(https://www.gnu.org/licenses/lgpl-3.0-standalone.html)
+
+Credits
+-------
+Developer: (V17) Developer ADVAITH BG, Contact: odoo@cybrosys.com
+
+Contacts
+--------
+* Mail Contact : odoo@cybrosys.com
+* Website : https://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
+
+.. image:: https://cybrosys.com/images/logo.png
+   :target: https://cybrosys.com"
+
+Further information
+-----------------
+HTML Description: `<static/description/index.html>`__

jazzy_backend_theme/__init__.py

@@ -0,0 +1,22 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: ADVAITH BG (odoo@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/>.
+#
+#############################################################################
+from . import models

jazzy_backend_theme/__manifest__.py

@@ -0,0 +1,58 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: ADVAITH BG (odoo@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",
+    "version": "17.0.1.0.0",
+    "category": "Themes/Backend",
+    "summary": "Jazzy backed Theme is an attractive theme for backend",
+    "description": """Minimalist and elegant backend theme for Odoo Backend""",
+    "author": "Cybrosys Techno Solutions",
+    "company": "Cybrosys Techno Solutions",
+    "maintainer": "Cybrosys Techno Solutions",
+    "website": "https://www.cybrosys.com",
+    "depends": ["web", "mail"],
+    "data": [
+        'views/layout_templates.xml',
+        'views/res_config_settings_views.xml',
+    ],
+    'assets': {
+        'web.assets_backend': [
+            'jazzy_backend_theme/static/src/components/app_menu/side_menu.xml',
+            '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',
+        ],
+        'web.assets_frontend': [
+            'jazzy_backend_theme/static/src/layout/style/login.scss'
+        ],
+    },
+    'images': [
+        'static/description/banner.jpg',
+        'static/description/theme_screenshot.jpg',
+    ],
+    'license': 'LGPL-3',
+    'installable': True,
+    'auto_install': False,
+    'application': False,
+}

jazzy_backend_theme/doc/RELEASE_NOTES.md

@@ -0,0 +1,9 @@
+## Module <jazzy_backend_theme>
+
+#### 15.12.2023
+
+#### Version 17.0.1.0.0
+
+##### ADD
+
+Initial commit for Jazzy Backend Theme

jazzy_backend_theme/models/__init__.py

@@ -0,0 +1,23 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: ADVAITH BG (odoo@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/>.
+#
+#############################################################################
+from . import res_company
+from . import res_config_settings

jazzy_backend_theme/models/res_company.py

@@ -0,0 +1,31 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: ADVAITH BG (odoo@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/>.
+#
+#############################################################################
+from odoo import models, fields
+
+
+class ResCompany(models.Model):
+    """Inherits the Res Company Model"""
+    _inherit = 'res.company'
+
+    background_image = fields.Binary(string="Background Image",
+                                     attachment=True,
+                                     help="Add Background image")

jazzy_backend_theme/models/res_config_settings.py

@@ -0,0 +1,93 @@
+# -*- coding: utf-8 -*-
+#############################################################################
+#
+#    Cybrosys Technologies Pvt. Ltd.
+#
+#    Copyright (C) 2023-TODAY Cybrosys Technologies(<https://www.cybrosys.com>)
+#    Author: ADVAITH BG (odoo@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/>.
+#
+#############################################################################
+from odoo import models, fields
+
+
+class ResConfigSettings(models.TransientModel):
+    """Inherits the Configuration settings Model"""
+    _inherit = 'res.config.settings'
+
+    theme_background = fields.Binary(string="App menu Background",
+                                     related='company_id.background_image',
+                                     readonly=False,
+                                     help="Add background image")
+    app_bar_color = fields.Char(string='Appbar color',
+                                config_parameter='jazzy_backend_theme.'
+                                                 'appbar_color',
+                                default='#000000',
+                                help="App bar color")
+    primary_accent = fields.Char(string="Navbar color",
+                                 config_parameter='jazzy_backend_theme.'
+                                                  'primary_accent_color',
+                                 default='#004589',
+                                 help="Navbar color")
+    primary_hover = fields.Char(string="Hover Primary Color",
+                                config_parameter='jazzy_backend_theme.'
+                                                 'primary_hover',
+                                default='#00376E',
+                                help="Hover primary color")
+    appbar_text = fields.Char(string="Home Menu Text Color",
+                              config_parameter='jazzy_backend_theme.'
+                                               'appbar_text',
+                              default='#ffffff',
+                              help="App bar text color")
+    secondary_hover = fields.Char(string="AppBar Hover",
+                                  config_parameter='jazzy_backend_theme.'
+                                                   'secondary_hover',
+                                  default='#F2F2F3',
+                                  help="Appbar hover")
+    kanban_bg_color = fields.Char(string="Kanban Bg Color",
+                                  config_parameter='jazzy_backend_theme.'
+                                                   'kanban_bg_color',
+                                  default='#F7F7F7',
+                                  help="Kanban view background color")
+
+    def config_color_settings(self):
+        """Define the configuration color settings"""
+        colors = {
+            'full_bg_img': self.env.user.company_id.background_image,
+            'appbar_color': self.env[
+              'ir.config_parameter'].sudo().get_param(
+              'jazzy_backend_theme.appbar_color'),
+            'primary_accent': self.env[
+              'ir.config_parameter'].sudo().get_param(
+              'jazzy_backend_theme.primary_accent_color'),
+            'secondary_color': self.env[
+              'ir.config_parameter'].sudo().get_param(
+              'jazzy_backend_theme.secondary_color'),
+            'kanban_bg_color': self.env[
+              'ir.config_parameter'].sudo().get_param(
+              'jazzy_backend_theme.kanban_bg_color'),
+            'primary_hover': self.env[
+              'ir.config_parameter'].sudo().get_param(
+              'jazzy_backend_theme.primary_hover'),
+            'light_hover': self.env[
+              'ir.config_parameter'].sudo().get_param(
+              'jazzy_backend_theme.light_hover'),
+            'appbar_text': self.env[
+              'ir.config_parameter'].sudo().get_param(
+              'jazzy_backend_theme.appbar_text'),
+            'secondary_hover': self.env[
+              'ir.config_parameter'].sudo().get_param(
+              'jazzy_backend_theme.secondary_hover')
+        }
+        return colors

jazzy_backend_theme/static/description/index.html

@@ -0,0 +1,513 @@
+<!-- HERO SECTION -->
+<div class="contianer">
+  <div class="row position-relative"
+    style="background-color: #191826 !important; height: 400px; margin-bottom: 6rem; border-radius: 1.5rem;">
+    <div class="col-lg-12 d-flex flex-column justify-content-start align-items-center">
+      <h1 class="display-1 text-white" style="padding-top: 5rem;">Jazzy Backend Theme</h1>
+      <p class="text-light small font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase;">Clean
+        &amp;Minimal Backend Theme for Odoo 17</p>
+    </div>
+    <img src="./images/hero.png" class="img img-fluid"
+      style="height: auto; width: 525px; top: 45%; left: 0; right: 0; margin-left: auto; margin-right: auto;"
+      height="auto" width="525px">
+  </div>
+</div>
+<!-- END OF HERO SECTION -->
+<!-- SHORT DESCRIPTION -->
+<div class="container">
+  <div class="row my-4">
+    <div class="col-lg-12 d-flex justify-content-center align-items-center">
+      <h6 class="text-muted text-center w-50" style="line-height: 22px;">The app provides a user-friendly backend
+        theme for Odoo 17.0 community edition.</h6>
+    </div>
+  </div>
+</div>
+<!-- END OF SHORT DESCRIPTION -->
+<!-- FEATURE ICONS -->
+<div class="container w-50" style="margin: 3rem auto;">
+  <div class="row">
+    <div class="col-lg-4 my-2 d-flex flex-column justify-content-center align-items-center">
+      <div
+        style="height: 100px; width: 100px; border: 8px solid #dedee5 ; border-radius: 50%; background-color: #d4d3dc; box-shadow: 0px 0px 0px 8px #f4f4f6;"
+        class="d-flex justify-content-center align-items-center">
+        <img height="60px" src="./images/icons/design.png">
+      </div>
+      <h6 class="my-4 text-center">Well-Crafted</h6>
+    </div>
+
+    <div class="col-lg-4 my-2 d-flex flex-column justify-content-center align-items-center">
+      <div
+        style="height: 100px; width: 100px; border: 8px solid #dedee5; border-radius: 50%; background-color: #d4d3dc; box-shadow: 0px 0px 0px 8px #f4f4f6;"
+        class="d-flex justify-content-center align-items-center">
+        <img height="60px" src="./images/icons/responsive.png">
+      </div>
+      <h6 class="my-4 text-center">Efficient Design</h6>
+    </div>
+
+    <div class="col-lg-4 my-2 d-flex flex-column justify-content-center align-items-center">
+      <div
+        style="height: 100px; width: 100px; border: 8px solid #dedee5; border-radius: 50%; background-color: #d4d3dc; box-shadow: 0px 0px 0px 8px #f4f4f6;"
+        class="d-flex justify-content-center align-items-center">
+        <img height="60px" src="./images/icons/quality.png">
+      </div>
+      <h6 class="my-4 text-center">Clearer insight</h6>
+    </div>
+  </div>
+</div>
+<!-- END OF FEATURE ICONS -->
+
+<!-- ONE COLUMN SECTION-->
+<div class="container" style="margin: 3rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center mt-3 display-4 text-weight-bold">App Menu</h2>
+      <p class="text-center lead text-muted mb-4">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>
+      <div class="row">
+        <div class="col-lg-8">
+          <img height="600px" width="auto" src="./images/desktop.gif" class="img img-fluid deep-4 rounded">
+        </div>
+        <div class="col-lg-4">
+          <img src="./images/mobile_view.gif" class="img img-fluid deep-4 rounded">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- END OF ONE COLUMN SECTION-->
+
+<!-- TWO COLUMN SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e ">Theme
+        Settings</span>
+      <h2 class="mt-3">Jazzy Backend Theme Settings</h2>
+      <p class="lead text-muted mb-4">To improve your experience with Odoo the Jazzy backend theme provides a fully
+        configurable theme settings menu.</p>
+      <img src="./assets/settings_customisation.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Custom
+        AppBar</span>
+      <h2 class="mt-3">AppBar</h2>
+      <p class="lead text-muted mb-4">Easily accessible sidebar where it reveals the sidebar menu on just a click. Moreover, its also
+        fully customisable with Jazzy backend theme.</p>
+      <img src="./images/app_bar.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+<!-- END OF TWO COLUMN SECTION-->
+
+<!-- RESPONSIVE SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-5 d-flex flex-column justify-content-center align-items-start">
+      <img src="./images/responsive.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+    <div class="col-lg-7 d-flex flex-column justify-content-center">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Responsive
+        Layout</span>
+      <h2 class="mt-3">Truly Responsive</h2>
+      <p class="lead text-muted mb-4">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>
+    </div>
+  </div>
+
+</div>
+<!-- END OF RESPONSIVE SECTION-->
+
+<!-- TWO COLUMN SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Custom
+        Kanban View</span>
+      <h2 class="mt-3">Kanban view</h2>
+      <p class="lead text-muted mb-4">Jazzy Backend Theme gives a colorful & elegant kanban view, and it's fully customizable with this theme.</p>
+      <img src="./images/kanban.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Search
+        Option</span>
+      <h2 class="mt-3">Advanced Searching for App Menus</h2>
+      <p class="lead text-muted mb-4">Jazzy Backend Theme gives a more complex and powerful search than standard search, providing search options like enterprise edition.</p>
+      <img src="./images/search.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+
+<!-- TWO COLUMN SECTION-->
+<div class="container" style="margin: 6rem auto;">
+  <span>
+  </span>
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">
+        Form View</span>
+      <h2 class="mt-3">Custom Form view</h2>
+      <p class="lead text-muted mb-4">Jazzy Backend theme provides a fully modified and colorful form view with the full view
+        experience.</p>
+      <img src="./images/sale_kanban.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Vibrant
+        ui</span>
+      <h2 class="mt-3">Attractive Customizable User Interface</h2>
+      <p class="lead text-muted mb-4">It provides fully attractive, and an elegant User Interface with completely customizable.</p>
+      <img src="./images/event.png" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+<!-- MOBILE -->
+<div class="container" style="margin: 6rem auto;">
+  <span>
+    <strong>
+      Mobile
+    </strong>
+  </span>
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">
+        Kanban View</span>
+      <h2 class="mt-3">Responsive kanban view</h2>
+      <p class="lead text-muted mb-4">It gives a fully responsive kanban view in Mobile view, which is also fully customizable in the Jazzy Backend theme.</p>
+      <img src="./images/mobile_kanban01.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Form
+        View</span>
+      <h2 class="mt-3">Visualized form view</h2>
+      <p class="lead text-muted mb-4">It puts forward a fully visualized form view with colorful and attractive aspects which the user can customize. </p>
+      <img src="./images/mobile_form.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+<div class="container" style="margin: 6rem auto;">
+  <span>
+  </span>
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">
+        List view</span>
+      <h2 class="mt-3">Modified Tree view</h2>
+      <p class="lead text-muted mb-4">Jazzy Backend Theme provides fully modified list view and amazing table designs
+        with stunning look outputs.</p>
+      <img src="./images/mobile_lost.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold"
+        style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">settings</span>
+      <h2 class="mt-3">Fully Redesigned Settings</h2>
+      <p class="lead text-muted mb-4">Mobile friendly and Redesigned settings with stylish view.</p>
+      <img src="./images/mobile_settings.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+<div class="container" style="margin: 6rem auto;">
+  <span>
+  </span>
+  <div class="row my-4">
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">
+        Employee module</span>
+      <h2 class="mt-3">Modified Form view for employees</h2>
+      <p class="lead text-muted mb-4">It provides the Employees with a form view with redesigned and various modified features.
+      </p>
+      <img src="./images/employe.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+    <div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
+      <span class="font-weight-bold" style="letter-spacing: 2px; text-transform: uppercase; color: #4a476e">Search
+        View</span>
+      <h2 class="mt-3">Ultra Modern Search view</h2>
+      <p class="lead text-muted mb-4">It has an advanced search view with a highly modified search option for easy usage and an improved experience with Odoo.</p>
+      <img src="./images/mobile_search.jpg" class="img img-fluid deep-2 rounded">
+    </div>
+
+  </div>
+</div>
+
+
+
+
+
+<!-- END OF TWO COLUMN SECTION-->
+
+<!-- OUR SERVICES -->
+<section class="container" style="margin-top: 6rem !important;">
+  <div class="row">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center"
+        style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
+        Our Services</h2>
+      <p class="text-center"
+        style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
+        We provide following services</p>
+    </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: #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>
+</section>
+<!-- END OF OUR SERVICES -->
+
+<!-- OUR INDUSTRIES -->
+<section class="container" style="margin-top: 6rem !important;">
+  <div class="row">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center"
+        style="font-family: Montserrat, 'sans-serif'; color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
+        Our Industries</h2>
+      <p class="text-center"
+        style="font-family: Montserrat, 'sans-serif'; color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
+        Our industry specifics and process segments to solve your complex business barriers.</p>
+    </div>
+
+    <div class="col-lg-3">
+      <div class="my-4 d-flex flex-column justify-content-center"
+        style="background-color: #f6f8f9 !important; border-radius: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/trading-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Trading
+        </h5>
+        <p style="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: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/pos-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          POS
+        </h5>
+        <p style="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: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/education-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Education
+        </h5>
+        <p style="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: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/manufacturing-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Manufacturing
+        </h5>
+        <p style="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: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/ecom-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          E-commerce &amp; Website
+        </h5>
+        <p style="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: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/service-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Service Management
+        </h5>
+        <p style="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: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/restaurant-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Restaurant
+        </h5>
+        <p style="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: 10px; padding: 2rem !important; height: 250px !important;">
+        <img src="./assets/icons/hotel-black.png" class="img-responsive mb-3" height="48px" width="48px">
+        <h5 style="color: #000 !important; font-weight: bold;">
+          Hotel Management
+        </h5>
+        <p style="font-size: 0.9rem !important;">An
+          all-inclusive
+          hotel management application</p>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<!-- END OF OUR INDUSTRIES -->
+
+<!-- FOOTER -->
+<!-- Footer Section -->
+<section class="container" style="margin: 5rem auto 2rem;">
+  <div class="row" style="max-width:1540px;">
+    <div class="col-lg-12 d-flex flex-column justify-content-center align-items-center">
+      <h2 class="text-center"
+        style="color: #000 !important; font-weight: 800 !important; font-size: 2rem !important; width: 80%;">
+        Need Help?</h2>
+      <p class="text-center"
+        style="color: #1a1a1a !important; font-weight: 300 !important; font-size: 1.3rem !important;">
+        Do you have any queries regarding our products &amp; services? Let us know.</p>
+    </div>
+  </div>
+
+  <!-- Contact Cards -->
+  <div class="row d-flex justify-content-center align-items-center" style="max-width:1540px; margin: 0 auto 2rem auto;">
+
+    <div class="col-lg-12" style="padding: 0rem 3rem 2rem; border-radius: 10px; margin-right: 3rem; ">
+
+      <div class="row mt-4">
+        <div class="col-lg-6">
+          <a href="mailto:odoo@cybrosys.com" target="_blank" class="btn btn-block mb-2 deep_hover"
+            style="text-decoration: none;  background-color: #4d4d4d; color: #FFF;  border-radius: 4px;"><i
+              class="fa fa-envelope mr-2"></i>odoo@cybrosys.com</a>
+        </div>
+        <div class="col-lg-6">
+          <a href="https://api.whatsapp.com/send?phone=918606827707" target="_blank"
+            class="btn btn-block mb-2 deep_hover"
+            style="text-decoration: none;  background-color: #25D366; color: #FFF;  border-radius: 4px;"><i
+              class="fa fa-whatsapp mr-2"></i>+91 86068 27707</a>
+        </div>
+      </div>
+    </div>
+
+  </div>
+  <!-- End of Contact Cards -->
+</section>
+<!-- Footer -->
+<section class="oe_container" style="padding: 2rem 3rem 1rem;">
+  <div class="row" style="max-width:1540px; margin: 0 auto; margin-right: 3rem; ">
+    <!-- Logo -->
+    <div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin-top: 3rem;">
+      <img src="https://www.cybrosys.com/images/logo.png" width="200px" height="auto" />
+    </div>
+    <!-- End of Logo -->
+    <div class="col-lg-12">
+      <hr
+        style="margin-top: 3rem;background: linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(229,229,229,1) 33%, rgba(229,229,229,1) 58%, rgba(0,212,255,0) 100%); height: 2px; border-style: none;">
+      <!-- End of Footer Section -->
+    </div>
+  </div>
+</section>
+  <!-- END OF FOOTER -->

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

@@ -0,0 +1,210 @@
+@keyframes fadeIn{
+	0%{
+		opacity: 0;
+	}
+	100%{
+		opacity: 1;
+	}
+}
+o_setting_search {
+	 position: relative;
+}
+.o_setting_search .searchInput {
+     height: 28px;
+     padding: 0px;
+     border: 0px;
+     box-shadow: none;
+     font-weight: 500;
+}
+.o_setting_search .searchIcon {
+	 color: gray('700');
+}
+.o_kanban_renderer{
+    background-color: var(--kanban-bg-color);
+}
+.oe_kanban_global_click{
+    border-radius: 15px;
+}
+ .search-container.has-results .search-input {
+	 height: 3em;
+}
+ .search-container.has-results .search-results {
+	 height: calc(100% - 3em);
+	 overflow: auto;
+	 margin-top: 10px;
+}
+
+.o_setting_search.col-md-10{
+    padding: 20px;
+}
+.app-menu {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: calc((100vw - 850px) / 2);
+    padding-right: calc((100vw - 850px) / 2);
+
+}
+.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto {
+    background-repeat: no-repeat;
+    background-size: contain;
+    padding-left: 5.5rem;
+}
+.form-control {
+    padding: 0 !important;
+}
+@media (max-width: 1371px){
+
+}
+@media (max-width:992px) {
+
+}
+@media (max-width:400px) {
+
+}
+.o_main_navbar .o_menu_brand {
+  text-decoration: none !important;
+  margin-left: 10px;
+}
+.o_navbar .o_main_navbar .dropdown-toggle .dropdown-menu .search-container {
+    padding-left: calc((100vw - 850px) / 2);
+    padding-right: calc((100vw - 850px) / 2);
+    padding-top:20px;
+    padding-bottom:20px;
+    display: table;
+}
+.o_apps_menu_opened .o_main_navbar .o_menu_brand{
+    display:none;
+}
+.app_components {
+    position: absolute;
+    height: 100vh;
+    width: 100%;
+    background: #f5f5f5f0;
+    z-index: 99;
+    top: 40px;
+    display:none;
+    background: url("../../src/img/background.jpg"), linear-gradient(to bottom, #71639e, #b0adba);
+}
+.app-menu a{
+    flex-basis: 19%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 23px;
+}
+o_setting_search {
+	 position: relative;
+}
+.o_setting_search .searchInput {
+	 height: 28px;
+	 padding: 0px;
+	 border: 0px;
+	 box-shadow: none;
+	 font-weight: 500;
+}
+.o_setting_search .searchIcon {
+	 color: gray('700');
+}
+ .search-container.has-results .search-input {
+	 height: 3em;
+	 display: table;
+}
+ .search-container.has-results .search-results {
+	 height: calc(100% - 3em);
+	 overflow: auto;
+	 margin-top: 10px;
+}
+
+.o_setting_search.col-md-10{
+    padding: 20px;
+}
+.app-menu {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: calc((100vw - 850px) / 2);
+    padding-right: calc((100vw - 850px) / 2);
+
+}
+
+.o-menu-search-result.dropdown-item.col-12.ml-auto.mr-auto {
+    background-repeat: no-repeat;
+    background-size: contain;
+    padding-left: 3rem;
+}
+.form-control {
+    padding: 0 !important;
+}
+@media (max-width: 1371px){
+
+}
+@media (max-width:992px) {
+
+}
+@media (max-width:400px) {
+
+}
+.o_main_navbar .o_menu_brand {
+  text-decoration: none !important;
+  margin-left: 10px;
+}
+.o_navbar .o_main_navbar .dropdown-toggle .dropdown-menu .search-container {
+    padding-left: calc((100vw - 850px) / 2);
+    padding-right: calc((100vw - 850px) / 2);
+    padding-top:20px;
+    padding-bottom:20px;
+}
+.o_apps_menu_opened .o_main_navbar .o_menu_brand{
+    display:none;
+}
+.app_components {
+    position: absolute;
+    height: 100vh;
+    width: 100%;
+    background: #f5f5f5f0;
+    z-index: 99;
+    top: 40px;
+    display:none;
+    background: url("../../img/background.jpg"), linear-gradient(to bottom, #71639e, #b0adba);
+}
+.app-menu a{
+    flex-basis: 19%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 23px;
+    cursor:pointer;
+}
+.app_components .search-input{
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    width:100%;
+    background-color: rgba(255, 255, 255, 0.1);
+    margin-bottom:1rem;
+    text-shadow: 0 1px 0 rgb(0 0 0 / 50%);
+}
+.o_navbar .o_main_navbar .o_main-menu-button:hover{
+    background:rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+}
+@media (max-width: 850px) {
+    .app_components .search-input {
+        width:90%;
+        margin:0 auto;
+    }
+    .app-menu {
+        width:90%;
+        margin:0 auto;
+    }
+}
+@media (max-width: 444px) {
+    .app-menu{
+        width:80%;
+    }
+    .app-menu a{
+        flex-basis: 25%;
+    }
+}

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

@@ -0,0 +1,152 @@
+/** @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");
+const { onMounted } = 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()
+        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 !== 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.full_bg_img !== false) {
+            var imageUrl = 'url(data:image/png;base64,' + result.full_bg_img + ')';
+            var appComponentsDivs = document.getElementsByClassName('app_components');
+            for (var i = 0; i < appComponentsDivs.length; i++) {
+                appComponentsDivs[i].style.backgroundImage = imageUrl;
+            }
+        }
+        if (result.appbar_text !== false){
+            document.documentElement.style.setProperty("--app-menu-font-color",result.appbar_text)
+        }
+        if (result.secondary_hover !== false){
+            document.documentElement.style.setProperty("--secondary-hover",result.secondary_hover)
+        }
+        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 = $(".search-container");
+        this.$search_input = $(".search-input input");
+        this.$search_results = $(".search-results");
+        this.$app_menu = $(".app-menu");
+        this.$dropdown_menu = $(".dropdown-menu");
+    },
+    _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 += "<p class='result-item'><a href='web#action=" + result["actionID"] + "&menu_id=" + result["id"] + "'>" + result["name"] + "</a></p>"
+        })
+        this.$search_results.append(resultsHtml);
+        const resultItems = document.querySelectorAll('.result-item');
+        resultItems.forEach(resultItem => {
+            resultItem.addEventListener('click', function() {
+                var appComponentsDiv = document.querySelector('.app_components');
+                appComponentsDiv.style.display = 'none';
+                $('.o_action_manager').attr('style','display: block !important');
+                $('.sidebar_panel').attr('style','display: block !important');
+                $('.o_menu_brand').attr('style','display: flex !important');
+                $('.o_menu_sections').attr('style','display: flex !important');
+            });
+        });
+    },
+    OnClickMainMenu() {
+        // To show search screen
+        if ($('.app_components').css("display") === "none") {
+            $('.app_components').fadeIn(250);
+            $('.o_menu_sections').attr('style','display: none !important');
+            $('.o_menu_brand').attr('style','display: none !important');
+            $('.o_action_manager').attr('style','display: none !important');
+            $('.sidebar_panel').attr('style','display: none !important');
+        } else {
+            $('.app_components').fadeOut(50);
+            $('.o_menu_sections').attr('style','display: flex !important');
+            $('.o_menu_brand').attr('style','display: block !important');
+            $('.o_action_manager').attr('style','display: block !important');
+            $('.sidebar_panel').attr('style','display: block !important');
+        }
+    },
+    onNavBarDropdownItemSelection(app) {
+        // To go to app menu
+        var appComponentsDiv = document.querySelector('.app_components');
+        appComponentsDiv.style.display = 'none';
+        $('.o_action_manager').attr('style','display: block !important');
+        $('.sidebar_panel').attr('style','display: block !important');
+        $('.o_menu_brand').attr('style','display: flex !important');
+        $('.o_menu_sections').attr('style','display: flex !important');
+        if (app) {
+            this.menuService.selectMenu(app);
+        }
+    },
+})

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

@@ -0,0 +1,105 @@
+<templates id="template" xml:space="preserve">
+    <!-- Inherit the dropdown to select the apps, to add the function OnClickMainMenu-->
+    <t t-inherit="web.NavBar.AppsMenu" t-inherit-mode="extension" owl="1">
+        <xpath expr="//Dropdown"
+               position="replace">
+            <div class="d-flex justify-content-center align-items-center o_main-menu-button p-2"
+                 t-on-click="OnClickMainMenu">
+                <i class="oi oi-apps"
+                   style="font-size: 18px !important; color: white; margin-top: 3px;"/>
+            </div>
+        </xpath>
+    </t>
+    <!--  Added the installed apps to show the Enterprise like app drawer  -->
+    <t t-inherit-mode="extension" t-inherit="web.NavBar" owl="1">
+        <xpath expr="//header" position="after">
+            <div class="app_components">
+                <div class="search-container form-row align-items-center m-auto col-12"
+                     style="padding-left: calc((100vw - 850px) / 2);padding-right: calc((100vw - 850px) / 2);padding-top:20px;padding-bottom:20px; display: table;">
+                    <div class="search-input col-md-10"
+                         style="padding:0.8rem 1.2rem;width: max-content;margin-left: -30px;"
+                         t-on-input="_searchMenusSchedule">
+                            <div class="input-group">
+                                <div class="input-group-prepend">
+                                    <div class="input-group-text"
+                                         style="background:none;border:none;color:white;font-size:1.5rem;">
+                                        <i class="fa fa-search"/>
+                                    </div>
+                                </div>
+                                <input type="search"
+                                       autocomplete="off"
+                                       placeholder="Search menus..."
+                                       class="form-control"
+                                       style="background:none;border:none;color:white;"/>
+                            </div>
+                    </div>
+                    <div class="search-results col-md-10 ml-auto mr-auto"
+                         style="margin-top:20px;"/>
+                </div>
+                <div class="app-menu">
+                    <t t-foreach="menuService.getApps()" t-as="app"
+                       t-key="app_index">
+                          <a role="menuitem"
+                             t-on-click="() => this.onNavBarDropdownItemSelection(app)"
+                             t-att-class="{ o_dropdown_active: menuService.getCurrentApp() === app }">
+                            <img t-if="app.webIcon.includes('.png')"
+                                 t-att-title="app.name"
+                                 style="width: 70px !important;height: 70px !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;margin: 5px 5px 5px 5px;"
+                                   t-attf-src="data:image/svg+xml;base64,{{app.webIconData}}"/>
+                              <b class="a_app_menu_title"
+                                 style="color:white;text-shadow: 1px 1px 1px rgb(0 0 0 / 40%);"><t t-esc="app.name"/></b>
+                         </a>
+                    </t>
+                 </div>
+            </div>
+        </xpath>
+    </t>
+    <!--  To show the search results when the user search app from the app drawer  -->
+    <t t-name="jazzy_backend_theme.SearchResults">
+        <t t-foreach="results" t-as="result">
+            <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/png;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"
+               style="color:white;"
+               onclick="$('.o_menu_sections').css('display','flex');$('.search-results').addClass('o_hidden');$('.o_menu_brand').css('display','flex');$('.app_components').css('display','none'); $('.app-menu').removeClass('o_hidden'); $('.search-input input').val('');$('.o_action_manager').attr('style','display: block !important');$('.sidebar_panel').attr('style','display: block !important');"/>
+        </t>
+    </t>
+    <!--  To show the sidebar to select the apps from the sidebar  -->
+    <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,30 @@
+$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/src/img/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 ;
+    --secondary-hover:#ffffff;
+    --fullscreen-bg-color: #C5F0FC !important;
+}

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

@@ -0,0 +1,462 @@
+.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(--secondary-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;
+}
+// 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 {
+        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 {
+    position: relative;
+    width: 100vw !important;
+    display: flex;
+    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: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;
+    }
+}
+// V17 Fixes
+@media (min-width:1096px){
+    .app_components .search-input {
+        width:725px !important;
+    }
+}
+@media (max-width:768px){
+    .app_components .search-input {
+        margin-left: 60px !important;
+    }
+    .search-container.has-results .search-results {
+        margin-left: 60px !important;
+    }
+    .o_field_statusbar > .o_statusbar_status {
+        width: 314px !important;
+    }
+    .o_form_view .o_cp_buttons {
+        overflow: auto !important;
+    }
+}
+.o_main_navbar .o_menu_sections .o_nav_entry, .o_main_navbar .o_menu_sections .dropdown-toggle {
+    background: var(--primary-accent) !important;
+}
+.btn-primary {
+    background: var(--primary-accent) !important;
+}
+.o_statusbar_status .o_arrow_button.btn-secondary {
+    margin: 0px !important;
+    color: var(--primary-accent) !important;
+    background-color: white !important;
+}
+.o_statusbar_status .o_arrow_button.btn-secondary.o_arrow_button_current {
+    color: white !important;
+    background-color: var(--primary-accent) !important;
+    font-family: inherit !important;
+}
+.o_statusbar_status .o_arrow_button.btn-secondary::after {
+    border-left-color: white !important;
+}
+.o_statusbar_status .o_arrow_button.btn-secondary.o_arrow_button_current::after {
+    border-left-color: var(--primary-accent) !important;
+}
+.o_statusbar_status .o_arrow_button.btn-secondary::before {
+    border-left-color: var(--primary-accent) !important;
+}
+.search-results a{
+    color: white !important;
+    cursor: pointer !important;
+}
+.app_components {
+    background-repeat: no-repeat !important;
+    background-size: cover !important;
+}

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

@@ -0,0 +1,147 @@
+#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;
+}
+.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,61 @@
+#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;
+}
+.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(--secondary-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/layout_templates.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<odoo>
+    <!--  Layout view template  -->
+    <template id="code_custom_layout" inherit_id="web.layout" name="Custom Layout">
+        <xpath expr="//meta[@content='IE=edge']" 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@500&amp;display=swap" rel="stylesheet"/>
+        </xpath>
+    </template>
+</odoo>

jazzy_backend_theme/views/res_config_settings_views.xml

@@ -0,0 +1,97 @@
+<odoo>
+    <!--  Inherited the res.config.settings model view to add the fields to configure the theme -->
+    <record id="res_config_settings_view_form" model="ir.ui.view">
+        <field name="name">res.config.settings.view.form.inherit.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">
+                        </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="secondary_hover" widget="color"/>
+                        </div>
+                        <div class="o_setting_right_pane">
+                            <label string="AppBar Hover color"
+                                   for="secondary_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="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">
+                            <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>
+            </xpath>
+        </field>
+    </record>
+</odoo>