fix: Sidebar fallback avatar logic (#487)

* fix: sidebar fallback avatar logic

* feat: update sidebar docs regarding leadingIcon

* feat: update sidebar avatar color

Author: rohanchkrabrty

apps/www/src/app/examples/page.tsx

@@ -86,11 +86,13 @@ const Page = () => {
           </Sidebar.Header>
 
           <Sidebar.Main>
-            <Sidebar.Item href='#' active>
+            <Sidebar.Item href='#' active leadingIcon={<BellIcon />}>
               Dashboard
             </Sidebar.Item>
 
-            <Sidebar.Item href='#'>Analytics</Sidebar.Item>
+            <Sidebar.Item href='#' leadingIcon={0}>
+              Analytics
+            </Sidebar.Item>
 
             <Sidebar.Group label='Resources' leadingIcon={<FilterIcon />}>
               <Sidebar.Item href='#'>Reports</Sidebar.Item>

apps/www/src/content/docs/components/sidebar/index.mdx

@@ -64,6 +64,8 @@ The header section is a container component that accepts all `div` props. It's c
 
 ### Sidebar.Item Props
 
+*Note: `leadingIcon` is optional and will show a fallback avatar only in collapsed state. You can pass `<></>` to render truly nothing.*
+
 <auto-type-table path="./props.ts" name="SidebarItemProps" />
 
 ## Examples

apps/www/src/content/docs/components/sidebar/props.ts

@@ -35,7 +35,11 @@ export interface SidebarGroupProps {
 }
 
 export interface SidebarItemProps {
-  /** ReactNode for the item's icon. */
+  /**
+   * ReactNode for the item's icon.
+   *
+   * If not provided, the component will show a fallback avatar only in collapsed state.
+   */
   leadingIcon?: ReactNode;
 
   /** String for the link destination. */

packages/raystack/components/sidebar/sidebar.tsx

@@ -10,7 +10,7 @@ import {
   forwardRef,
   useContext
 } from 'react';
-import { Avatar, getAvatarColor } from '../avatar';
+import { Avatar } from '../avatar';
 import { Flex } from '../flex';
 import { Tooltip } from '../tooltip';
 import styles from './sidebar.module.css';
@@ -178,7 +178,13 @@ const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(
     ref
   ) => {
     const { isCollapsed, hideCollapsedItemTooltip } =
-      useContext(SidebarContext); // To prevent prop drillng
+      useContext(SidebarContext);
+
+    const shouldShowFallback =
+      leadingIcon == undefined &&
+      isCollapsed &&
+      typeof children === 'string' &&
+      children.length > 0;
 
     const content = cloneElement(
       as,
@@ -199,16 +205,17 @@ const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(
           className={cx(styles['nav-leading-icon'], classNames?.leadingIcon)}
           aria-hidden='true'
         >
-          {leadingIcon ||
-            (typeof children === 'string' && children.length > 0 ? (
-              <Avatar
-                size={1}
-                variant='soft'
-                color={getAvatarColor(children)}
-                fallback={children[0].toUpperCase()}
-                style={{ cursor: 'pointer' }}
-              />
-            ) : null)}
+          {shouldShowFallback ? (
+            <Avatar
+              size={1}
+              variant='soft'
+              color='neutral'
+              fallback={children[0].toUpperCase()}
+              style={{ cursor: 'pointer' }}
+            />
+          ) : (
+            leadingIcon
+          )}
         </Flex>
         {!isCollapsed && <span className={styles['nav-text']}>{children}</span>}
       </>