feat: Add new sidebar for Chatwoot V4 (#10291)

This PR has the initial version of the new sidebar targeted for the next major redesign of the app. This PR includes the following changes

- Components in the `layouts-next` and `base-next` directories in `dashboard/components`
- Two generic components `Avatar` and `Icon`
- `SidebarGroup` component to manage expandable sidebar groups with nested navigation items. This includes handling active states, transitions, and permissions.
- `SidebarGroupHeader` component to display the header of each navigation group with optional icons and active state indication.
- `SidebarGroupLeaf` component for individual navigation items within a group, supporting icons and active state.
- `SidebarGroupSeparator` component to visually separate nested navigation items. (They look a lot like header)
- `SidebarGroupEmptyLeaf` component to render empty state of any navigation groups.

----

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>

tailwind.config.js

@@ -6,7 +6,19 @@ const {
   getIconCollections,
 } = require('@egoist/tailwindcss-icons');
 
-module.exports = {
+const defaultSansFonts = [
+  '-apple-system',
+  'system-ui',
+  'BlinkMacSystemFont',
+  '"Segoe UI"',
+  'Roboto',
+  '"Helvetica Neue"',
+  'Tahoma',
+  'Arial',
+  'sans-serif !important',
+];
+
+const tailwindConfig = {
   darkMode: 'class',
   content: [
     './enterprise/app/views/**/*.html.erb',
@@ -21,8 +33,9 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        inter: ['Inter', ...defaultTheme.fontFamily.sans],
-        interDisplay: ['Inter Display', ...defaultTheme.fontFamily.sans],
+        sans: defaultSansFonts,
+        inter: ['Inter', ...defaultSansFonts],
+        interDisplay: ['Inter Display', ...defaultSansFonts],
       },
     },
     screens: {
@@ -58,6 +71,10 @@ module.exports = {
         '90%': { transform: 'translateX(-0.375rem)' },
         '100%': { transform: 'translateX(0)' },
       },
+      'fade-in-up': {
+        '0%': { opacity: 0, transform: 'translateY(0.5rem)' },
+        '100%': { opacity: 1, transform: 'translateY(0)' },
+      },
       'loader-pulse': {
         '0%': { opacity: 0.4 },
         '50%': { opacity: 1 },
@@ -81,6 +98,7 @@ module.exports = {
     animation: {
       ...defaultTheme.animation,
       wiggle: 'wiggle 0.5s ease-in-out',
+      'fade-in-up': 'fade-in-up 0.3s ease-out',
       'loader-pulse': 'loader-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       'card-select': 'card-select 0.25s ease-in-out',
       shake: 'shake 0.3s ease-in-out 0s 2',
@@ -90,7 +108,20 @@ module.exports = {
     // eslint-disable-next-line
     require('@tailwindcss/typography'),
     iconsPlugin({
-      collections: getIconCollections(['lucide', 'logos']),
+      collections: {
+        woot: {
+          icons: {
+            alert: {
+              body: `<path d="M1.81348 0.9375L1.69727 7.95117H0.302734L0.179688 0.9375H1.81348ZM1 11.1025C0.494141 11.1025 0.0908203 10.7061 0.0976562 10.2207C0.0908203 9.72852 0.494141 9.33203 1 9.33203C1.49219 9.33203 1.89551 9.72852 1.90234 10.2207C1.89551 10.7061 1.49219 11.1025 1 11.1025Z" fill="currentColor" />`,
+              width: 2,
+              height: 12,
+            },
+          },
+        },
+        ...getIconCollections(['lucide', 'logos', 'ri']),
+      },
     }),
   ],
 };
+
+module.exports = tailwindConfig;