update sidebar

README.md

@@ -814,3 +814,26 @@ function UsersTable({ data, columns }) {
   );
 }
 ```
+
+
+## Sidebar.Exit
+
+`Sidebar` به‌صورت پیش‌فرض گزینه خروج را نمایش نمی‌دهد. برای فعال‌کردن خروج Keycloak داخلی UI Kit، آن را به‌صورت compound component اضافه کنید:
+
+```jsx
+<Sidebar
+  items={items}
+  currentPath={router.asPath}
+  linkComponent={NextLink}
+>
+  <Sidebar.Exit />
+</Sidebar>
+```
+
+عنوان و آیکون خروج قابل تغییر هستند:
+
+```jsx
+<Sidebar.Exit title="خروج از سامانه" icon={MyExitIcon} />
+```
+
+`Sidebar.Exit` از `logoutKeycloak` داخلی UI Kit استفاده می‌کند و callback خروج از سامانه مقصد نیاز ندارد.

dist/layout.d.ts

@@ -13,8 +13,7 @@ export type SidebarProps = {
   currentPath?: string;
   linkComponent?: any;
   onNavigate?: (item: SidebarItem) => void;
-  logoutTitle?: string;
+  children?: any;
-  logoutIcon?: any;
   primaryMobileCount?: number;
   moreTitle?: string;
   moreDrawerTitle?: string;
@@ -22,7 +21,14 @@ export type SidebarProps = {
   mobileProps?: Record<string, any>;
 };
 
-export function Sidebar(props: SidebarProps): any;
+export type SidebarExitProps = {
+  title?: string;
+  icon?: any;
+};
+
+export const Sidebar: ((props: SidebarProps) => any) & {
+  Exit: (props: SidebarExitProps) => any;
+};
 export function isSidebarPathActive(
   currentPath: string | undefined,
   item: SidebarItem,

src/layout/Sidebar.jsx

@@ -19,9 +19,9 @@ import {
   VStack,
   useDisclosure,
 } from "@chakra-ui/react";
-import { forwardRef, useEffect, useRef } from "react";
+import { Children, forwardRef, isValidElement, useEffect, useRef } from "react";
-import { FiMoreHorizontal } from "react-icons/fi";
+import { FiMoreHorizontal } from "react-icons/fi/index.js";
-import { IoExit } from "react-icons/io5";
+import { IoExit } from "react-icons/io5/index.js";
 import { logoutKeycloak } from "../core/keycloak.jsx";
 import { usePermission } from "../core/permission.jsx";
 
@@ -165,13 +165,14 @@ const MobileNavigationButton = ({
   );
 };
 
-export const Sidebar = ({
+const SidebarExit = () => null;
+
+const SidebarRoot = ({
   items = [],
   currentPath,
   linkComponent,
   onNavigate,
-  logoutTitle = "خروج",
+  children,
-  logoutIcon = IoExit,
   primaryMobileCount = 4,
   moreTitle = "بیشتر",
   moreDrawerTitle = "سایر بخش‌های سامانه",
@@ -182,6 +183,13 @@ export const Sidebar = ({
   const moreButtonRef = useRef();
   const { cannot, can, isLoading } = usePermission();
 
+  const exitElement = Children.toArray(children).find(
+    (child) => isValidElement(child) && child.type === SidebarExit,
+  );
+  const hasExit = Boolean(exitElement);
+  const logoutTitle = exitElement?.props?.title || "خروج";
+  const logoutIcon = exitElement?.props?.icon || IoExit;
+
   useEffect(() => {
     if (isLoading) return;
 
@@ -209,7 +217,7 @@ export const Sidebar = ({
   const active = (item) => isSidebarPathActive(resolvedCurrentPath, item);
 
   const isSecondaryItemActive = secondaryItems.some(active);
-  const hasMoreContent = true;
+  const hasMoreContent = secondaryItems.length > 0 || hasExit;
 
   const handleNavigate = (item) => {
     onNavigate?.(item);
@@ -252,6 +260,7 @@ export const Sidebar = ({
             />
           ))}
 
+          {hasExit && (
             <Tooltip
               label={logoutTitle}
               placement="left-start"
@@ -271,6 +280,7 @@ export const Sidebar = ({
                 onClick={handleLogout}
               />
             </Tooltip>
+          )}
         </VStack>
       </Stack>
 
@@ -414,6 +424,7 @@ export const Sidebar = ({
                 })}
               </SimpleGrid>
 
+              {hasExit && (
                 <Box mt={4} pt={4} borderTopWidth="1px" borderColor="gray.200">
                   <HStack
                     as="button"
@@ -429,9 +440,10 @@ export const Sidebar = ({
                     onClick={handleLogout}
                   >
                     <Icon as={logoutIcon} boxSize={5} />
-                  <Text fontWeight="bold">خروج از سامانه</Text>
+                    <Text fontWeight="bold">{logoutTitle}</Text>
                   </HStack>
                 </Box>
+              )}
             </DrawerBody>
           </DrawerContent>
         </Drawer>
@@ -439,3 +451,7 @@ export const Sidebar = ({
     </>
   );
 };
+
+export const Sidebar = Object.assign(SidebarRoot, {
+  Exit: SidebarExit,
+});

src/layout/index.d.ts

@@ -13,8 +13,7 @@ export type SidebarProps = {
   currentPath?: string;
   linkComponent?: any;
   onNavigate?: (item: SidebarItem) => void;
-  logoutTitle?: string;
+  children?: any;
-  logoutIcon?: any;
   primaryMobileCount?: number;
   moreTitle?: string;
   moreDrawerTitle?: string;
@@ -22,7 +21,14 @@ export type SidebarProps = {
   mobileProps?: Record<string, any>;
 };
 
-export function Sidebar(props: SidebarProps): any;
+export type SidebarExitProps = {
+  title?: string;
+  icon?: any;
+};
+
+export const Sidebar: ((props: SidebarProps) => any) & {
+  Exit: (props: SidebarExitProps) => any;
+};
 export function isSidebarPathActive(
   currentPath: string | undefined,
   item: SidebarItem,