Merge pull request #373 from sumocoders/490-custom-sumo-theme

490 custom sumo theme

package.json

@@ -16,7 +16,7 @@
     "@popperjs/core": "^2.11.5",
     "@symfony/webpack-encore": "^4.1.1",
     "bazinga-translator": "^5.0.0",
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^5.3.1",
     "bootstrap-datepicker": "^1.9.0",
     "bootstrap-sass": "^3.4.3",
     "check-password-strength": "^2.0.0",
@@ -36,11 +36,12 @@
     "jstree": "^3.3.12",
     "jstree-bootstrap-theme": "^1.0.1",
     "mini-css-extract-plugin": "^2.6.1",
-    "node-sass": "^8.0.0",
+    "postcss-easing-gradients": "^3.0.1",
     "postcss-import": "^15.0.0",
     "postcss-loader": "^7.0.1",
     "postcss-preset-env": "^7.8.3",
     "requestanimationframe": "0.0.23",
+    "sass": "^1.69.5",
     "sass-loader": "^13.2.0",
     "select2": "^4.0.12",
     "select2-bootstrap-5-theme": "^1.2.0",
@@ -90,7 +91,7 @@
     ]
   },
   "volta": {
-    "node": "20.7.0"
+    "node": "20.9.0"
   },
   "dependencies": {
     "stylelint": "^15.10.3",

postcss.config.js

@@ -8,6 +8,7 @@ module.exports = {
           warnings: false
         }
       }
-    }
+    },
+    'postcss-easing-gradients': {}
   }
 }

src/Themes/Custom/assets/public/images/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/Themes/Custom/assets/webpack/js/Fork.js

@@ -0,0 +1,19 @@
+// import plugins
+import 'bootstrap'
+
+// component imports
+import { Components } from '../../../../../Modules/Frontend/assets/Frontend/webpack/js/_Components'
+import NavbarToggler from './components/navbar-toggler'
+
+export class Fork {
+  initFrontend () {
+    this.components = new Components()
+    this.components.initComponents()
+  }
+}
+
+$(window).on('load', () => {
+  window.frontend = new Fork()
+  window.frontend.initFrontend()
+  window.navbarToggler = new NavbarToggler()
+})

src/Themes/Custom/assets/webpack/js/components/navbar-toggler.js

@@ -0,0 +1,6 @@
+export default function NavbarToggler () {
+  const toggler = document.querySelector('.navbar-toggler')
+  toggler.addEventListener('click', function () {
+    document.querySelector('body').classList.toggle('nav-expanded')
+  })
+}

src/Themes/Custom/assets/webpack/scss/_bootstrap-imports.scss

@@ -0,0 +1,52 @@
+/*!
+ * Bootstrap v5.0.2 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+// scss-docs-start import-stack
+// Configuration
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/maps';
+@import '~bootstrap/scss/utilities';
+
+// Layout & components
+@import '~bootstrap/scss/root';
+@import '~bootstrap/scss/reboot';
+@import '~bootstrap/scss/type';
+@import '~bootstrap/scss/images';
+@import '~bootstrap/scss/containers';
+@import '~bootstrap/scss/grid';
+@import '~bootstrap/scss/tables';
+@import '~bootstrap/scss/forms';
+@import '~bootstrap/scss/buttons';
+@import '~bootstrap/scss/transitions';
+@import '~bootstrap/scss/dropdown';
+@import '~bootstrap/scss/button-group';
+@import '~bootstrap/scss/nav';
+@import '~bootstrap/scss/navbar';
+@import '~bootstrap/scss/card';
+@import '~bootstrap/scss/accordion';
+@import '~bootstrap/scss/breadcrumb';
+@import '~bootstrap/scss/pagination';
+@import '~bootstrap/scss/badge';
+@import '~bootstrap/scss/alert';
+@import '~bootstrap/scss/progress';
+@import '~bootstrap/scss/list-group';
+@import '~bootstrap/scss/close';
+@import '~bootstrap/scss/toasts';
+@import '~bootstrap/scss/modal';
+@import '~bootstrap/scss/tooltip';
+@import '~bootstrap/scss/popover';
+@import '~bootstrap/scss/carousel';
+@import '~bootstrap/scss/spinners';
+@import '~bootstrap/scss/offcanvas';
+@import '~bootstrap/scss/placeholders';
+
+// Helpers
+@import '~bootstrap/scss/helpers';
+
+// Utilities
+@import '~bootstrap/scss/utilities/api';
+// scss-docs-end import-stack