@dartech/arsenal-ui 1.4.80 → 1.4.82

package/index.js

@@ -1612,9 +1612,21 @@ const inputThemeOptions = {
             borderColor: '#DDDDE1'
           },
           '&.MuiButton-textPrimary': {
+            color: baseTheme.palette.secondary.dark,
+            '&:hover': {
+              backgroundColor: '#F6F6F7'
+            },
+            '&:active': {
+              backgroundColor: '#EEEEF0'
+            }
+          },
+          '&.MuiButton-textSecondary': {
             color: baseTheme.palette.secondary.main,
             '&:hover': {
               backgroundColor: '#DEF7FC'
+            },
+            '&:active': {
+              backgroundColor: '#CFE6ED'
             }
           }
         }
@@ -8250,7 +8262,9 @@ const SidebarDrawer = ({
   routes,
   id,
   logo,
-  collapsedLogo
+  collapsedLogo,
+  footer,
+  collapsedFooter
 }) => {
   const {
     collapsed,
@@ -8295,14 +8309,34 @@ const SidebarDrawer = ({
             alt: "Lending Hub KZ"
           })]
         }))
-      })), jsx(List, Object.assign({
-        sx: {
-          overflowY: 'auto'
-        }
+      })), jsxs(Box, Object.assign({
+        height: `${logo || title ? 'calc(100vh - 56px)' : 'auto'}`,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between"
       }, {
-        children: routes.map(route => jsx(SidebarLink$1, {
-          route: route
-        }, route.name))
+        children: [jsx(List, Object.assign({
+          sx: {
+            overflowY: 'auto',
+            '&::-webkit-scrollbar': {
+              width: '8px'
+            },
+            '&::-webkit-scrollbar-thumb': {
+              background: 'rgba(196, 196, 196, 0.8)',
+              borderRadius: '16px',
+              backgroundClip: 'padding-box',
+              border: '2px solid rgba(0, 0, 0, 0)'
+            }
+          }
+        }, {
+          children: routes.map(route => jsx(SidebarLink$1, {
+            route: route
+          }, route.name))
+        })), footer && jsx(Box, Object.assign({
+          borderTop: "1px solid #FFFFFF1F"
+        }, {
+          children: collapsed ? collapsedFooter : footer
+        }))]
       }))]
     }))]
   });
@@ -8315,7 +8349,9 @@ const Sidebar = ({
   title: _title = '',
   id,
   logo,
-  collapsedLogo
+  collapsedLogo,
+  footer,
+  collapsedFooter
 }) => {
   return jsxs(ThemeProvider, Object.assign({
     theme: _theme
@@ -8326,7 +8362,9 @@ const Sidebar = ({
         routes: routes,
         id: id,
         logo: logo,
-        collapsedLogo: collapsedLogo
+        collapsedLogo: collapsedLogo,
+        footer: footer,
+        collapsedFooter: collapsedFooter
       })
     })]
   }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.4.80",
+  "version": "1.4.82",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/lib/Sidebar/Sidebar.d.ts

@@ -7,6 +7,8 @@ type Props = {
     id?: string;
     logo?: string;
     collapsedLogo?: string;
+    footer?: React.ReactNode;
+    collapsedFooter?: React.ReactNode;
 };
-export declare const Sidebar: ({ routes, theme, title, id, logo, collapsedLogo, }: Props) => JSX.Element;
+export declare const Sidebar: ({ routes, theme, title, id, logo, collapsedLogo, footer, collapsedFooter, }: Props) => JSX.Element;
 export {};

package/src/lib/Sidebar/SidebarDrawer.d.ts

@@ -6,6 +6,8 @@ type Props = {
     id?: string;
     logo?: string;
     collapsedLogo?: string;
+    footer?: React.ReactNode;
+    collapsedFooter?: React.ReactNode;
 };
-declare const SidebarDrawer: ({ title, routes, id, logo, collapsedLogo }: Props) => JSX.Element;
+declare const SidebarDrawer: ({ title, routes, id, logo, collapsedLogo, footer, collapsedFooter, }: Props) => JSX.Element;
 export default SidebarDrawer;

package/src/theme/inputThemeOptions.d.ts

@@ -25,6 +25,18 @@ declare const inputThemeOptions: {
                         '&:hover': {
                             backgroundColor: string;
                         };
+                        '&:active': {
+                            backgroundColor: string;
+                        };
+                    };
+                    '&.MuiButton-textSecondary': {
+                        color: string;
+                        '&:hover': {
+                            backgroundColor: string;
+                        };
+                        '&:active': {
+                            backgroundColor: string;
+                        };
                     };
                 };
             };