From 5620f61688597796d5c82847f6d22884f1eac99b Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Fri, 26 Sep 2025 13:41:37 +0700
Subject: [PATCH 1/6] refactor: refactor DashboardTemplate

---
 .../DashboardTemplate/DashboardTemplate.tsx   |  2 +-
 .../DashboardTemplate/Sider/index.tsx         |  4 +-
 .../DashboardTemplate/Sider/types.ts          | 39 +++++++++++++++++++
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/templates/DashboardTemplate/DashboardTemplate.tsx b/src/templates/DashboardTemplate/DashboardTemplate.tsx
index 89bc441..7849128 100644
--- a/src/templates/DashboardTemplate/DashboardTemplate.tsx
+++ b/src/templates/DashboardTemplate/DashboardTemplate.tsx
@@ -55,7 +55,7 @@ const DashboardTemplateInternal: RdDashboardTemplateComponent = forwardRef((prop
             </Layout>
         </DashboardTemplateStyles>
     );
-
+    
     const renderContentHeightLayout = () => (
         <DashboardTemplateStyles ref={ref} fitScreen={fitScreen} {...restProps}>
             {headerProps && (
diff --git a/src/templates/DashboardTemplate/Sider/index.tsx b/src/templates/DashboardTemplate/Sider/index.tsx
index 8945d06..fb247fd 100644
--- a/src/templates/DashboardTemplate/Sider/index.tsx
+++ b/src/templates/DashboardTemplate/Sider/index.tsx
@@ -37,7 +37,7 @@ export const DashboardTemplateSider: RdDashboardTemplateSiderComponent = forward
 
         useEffect(() => {
             // On smaller screens, we want the sidebar to be fixed and overlay the content
-            if (!screens.lg && sidebarMode === 'fullHeight') {
+            if (!screens[breakpoint] && sidebarMode === 'fullHeight') {
                 setFixed(true);
 
                 if (sidebarMode === 'fullHeight') {
@@ -49,7 +49,7 @@ export const DashboardTemplateSider: RdDashboardTemplateSiderComponent = forward
                 setFixed(false);
                 setCollapsedWidth(DEFAULT_COLLAPSED_WIDTH);
             }
-        }, [screens.lg]);
+        }, [screens[breakpoint]]);
 
         return (
             <DashboardTemplateSiderStyles
diff --git a/src/templates/DashboardTemplate/Sider/types.ts b/src/templates/DashboardTemplate/Sider/types.ts
index fea139c..4b57c64 100644
--- a/src/templates/DashboardTemplate/Sider/types.ts
+++ b/src/templates/DashboardTemplate/Sider/types.ts
@@ -1,15 +1,54 @@
 import { RdLayoutSiderRef, RdSiderProps } from '../../../molecules';
 
 //#region Define extended types
+
+/**
+ * Defines how the Sidebar should be displayed inside the DashboardTemplate.
+ *
+ * - `"fullHeight"`: Sidebar takes up the entire page height (including both header and content).
+ *   Useful when the sidebar should be fixed and stretch from top to bottom.
+ *
+ * - `"contentHeight"`: Sidebar height is limited to the content area (positioned below the header).
+ *   Useful when the sidebar should be visually separated from the header.
+ */
 type SidebarMode = 'fullHeight' | 'contentHeight';
 
 export type DashboardTemplateSiderPropsExtend = {
+    /**
+     * Whether the sidebar should remain fixed when scrolling the page.
+     *
+     * @default true
+     */
     fixedOnScroll?: boolean;
+
+    /**
+     * Whether the header inside the sidebar should remain fixed when scrolling the sidebar content.
+     *
+     * @default true
+     */
     fixedHeaderOnScroll?: boolean;
 
+    /**
+     * Custom render function for the sidebar content.
+     *
+     * @param props - All props of `RdDashboardTemplateSiderProps` except `render`.
+     * @returns A React node that will be rendered inside the sidebar.
+     */
     render?: (props: Omit<RdDashboardTemplateSiderProps, 'render'>) => React.ReactNode;
 
+    /**
+     * Custom render function for the sidebar header section.
+     *
+     * @param collapsed - Indicates whether the sidebar is currently collapsed.
+     * @returns A React node that will be rendered as the sidebar header.
+     */
     headerSidebar?: (collapsed: boolean) => React.ReactNode;
+
+    /**
+     * Determines how the sidebar should be positioned relative to the header and content.
+     *
+     * @see SidebarMode
+     */
     sidebarMode?: SidebarMode;
 };
 //#endregion

From 94d6fda956bd01d9ef7a403abf4ab5882e86eef1 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 1 Oct 2025 15:12:12 +0700
Subject: [PATCH 2/6] feat: Add Alert.ErrorBoundary component

---
 src/molecules/Alert/Alert.tsx         |  3 ++
 src/molecules/Alert/ErrorBoundary.tsx | 33 +++++++++++++
 src/molecules/Alert/styles.tsx        |  5 ++
 src/molecules/Alert/types.ts          | 68 +++++++++++++++++++++++++--
 4 files changed, 105 insertions(+), 4 deletions(-)
 create mode 100644 src/molecules/Alert/ErrorBoundary.tsx

diff --git a/src/molecules/Alert/Alert.tsx b/src/molecules/Alert/Alert.tsx
index 5522cd3..c1bf97e 100644
--- a/src/molecules/Alert/Alert.tsx
+++ b/src/molecules/Alert/Alert.tsx
@@ -1,9 +1,12 @@
 import { forwardRef } from 'react';
 import { AlertStyled } from './styles';
 import { RdAlertComponent, RdAlertCompoundedComponent } from './types';
+import { AlertErrorBoundary } from './ErrorBoundary';
 
 export const InternalAlert: RdAlertComponent = forwardRef((props, ref) => {
     return <AlertStyled {...props} ref={ref} />;
 });
 
 export const Alert: RdAlertCompoundedComponent = InternalAlert as RdAlertCompoundedComponent;
+
+Alert.ErrorBoundary = AlertErrorBoundary;
diff --git a/src/molecules/Alert/ErrorBoundary.tsx b/src/molecules/Alert/ErrorBoundary.tsx
new file mode 100644
index 0000000..0983203
--- /dev/null
+++ b/src/molecules/Alert/ErrorBoundary.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { AlertErrorBoundaryStyled } from './styles';
+import {
+    RdAlertErrorBoundaryComponent,
+    RdAlertErrorBoundaryProps,
+    RdAlertErrorBoundaryStates,
+} from './types';
+
+export class AlertErrorBoundary
+    extends React.Component<RdAlertErrorBoundaryProps, RdAlertErrorBoundaryStates>
+    implements RdAlertErrorBoundaryComponent
+{
+    state: RdAlertErrorBoundaryStates = {
+        error: undefined,
+        info: {
+            componentStack: '',
+        },
+    };
+
+    componentDidCatch(error: Error | null, info: object): void {
+        // update state with error + stack trace from Antd
+        this.setState({
+            error,
+            info: {
+                componentStack: (info as any).componentStack ?? '',
+            },
+        });
+    }
+
+    render() {
+        return <AlertErrorBoundaryStyled {...this.props} />;
+    }
+}
diff --git a/src/molecules/Alert/styles.tsx b/src/molecules/Alert/styles.tsx
index df89122..ddfe420 100644
--- a/src/molecules/Alert/styles.tsx
+++ b/src/molecules/Alert/styles.tsx
@@ -1,4 +1,9 @@
 import styled from '@emotion/styled';
 import { Alert } from 'antd';
+import { RdAlertErrorBoundaryComponent } from './types';
 
 export const AlertStyled = styled(Alert)``;
+
+export const AlertErrorBoundaryStyled = styled(
+    Alert.ErrorBoundary as typeof RdAlertErrorBoundaryComponent
+)``;
diff --git a/src/molecules/Alert/types.ts b/src/molecules/Alert/types.ts
index 7cc0469..e1dcc04 100644
--- a/src/molecules/Alert/types.ts
+++ b/src/molecules/Alert/types.ts
@@ -1,11 +1,61 @@
 import { Alert, GetProps } from 'antd';
 import { AlertRef } from 'antd/es/alert/Alert';
 import { ComponentToken as AlertComponentTokenAntd } from 'antd/es/drawer/style';
-import { ComponentProps } from 'react';
+import React, { ComponentProps } from 'react';
 
 type AlertPropsAntd = GetProps<typeof Alert>;
-type AlertErrorBoundaryPropsAntd = GetProps<typeof Alert.ErrorBoundary>;
 
+/**
+ * 📝 Explanation:
+ *
+ * For most Ant Design components, we can simply get the props type using:
+ *    type XxxPropsAntd = GetProps<typeof Xxx>;
+ *
+ * However, `Alert.ErrorBoundary` is a special case:
+ * - Ant Design does NOT export a public props interface for ErrorBoundary.
+ * - If we directly use `GetProps<typeof Alert.ErrorBoundary>`,
+ *   TypeScript will try to expose internal types and throw an error:
+ *     ts(4023): "Exported variable '...' has or is using name '...' but cannot be named".
+ *
+ * 🚑 Workaround:
+ * - Use `ComponentProps<typeof Alert.ErrorBoundary>` to get the props,
+ *   then clone it via a mapped type to produce a "public" type.
+ * - This way we avoid referencing Ant Design’s internal types.
+ *
+ * 🔮 Note:
+ * - If Ant Design exports a proper `AlertErrorBoundaryProps` type in the future,
+ *   we can safely remove this workaround and write:
+ *     type AlertErrorBoundaryPropsAntd = GetProps<typeof Alert.ErrorBoundary>;
+ */
+type AlertErrorBoundaryPropsAntd = {
+    [K in keyof ComponentProps<typeof Alert.ErrorBoundary>]: ComponentProps<
+        typeof Alert.ErrorBoundary
+    >[K];
+};
+
+/**
+ * 📝 Explanation:
+ *
+ * Ant Design also does not export the `ErrorBoundaryStates` type.
+ * Therefore, instead of extracting it automatically, we need to define this interface manually.
+ *
+ * The state shape is referenced from the source code:
+ *    state: {
+ *        error: undefined;
+ *        info: {
+ *            componentStack: string;
+ *        };
+ *    }
+ *
+ * This is simply a copied definition to ensure type safety for our extended components.
+ * If Ant Design exports `ErrorBoundaryStates` in the future, we should switch to that instead.
+ */
+interface AlertErrorBoundaryStatesAntd {
+    error?: Error | null;
+    info?: {
+        componentStack?: string;
+    };
+}
 type AlertRefAntd = AlertRef;
 
 //#endregion
@@ -17,6 +67,7 @@ type AlertComponentTokenExtend = {};
 //#region Define extended types
 type AlertPropsExtend = {};
 type AlertErrorBoundaryPropsExtend = {};
+type AlertErrorBoundaryStatesExtend = {};
 
 type AlertRefExtend = {};
 //#endregion
@@ -24,17 +75,26 @@ type AlertRefExtend = {};
 //#region Export types
 export type RdAlertProps = AlertPropsAntd & AlertPropsExtend;
 export type RdAlertErrorBoundaryProps = AlertErrorBoundaryPropsAntd & AlertErrorBoundaryPropsExtend;
+export type RdAlertErrorBoundaryStates = AlertErrorBoundaryStatesAntd &
+    AlertErrorBoundaryStatesExtend;
 export type RdAlertRef = AlertRefAntd & AlertRefExtend;
 export type RdAlertComponentToken = AlertComponentTokenAntd & AlertComponentTokenExtend;
 //#endregion
 
 //#region Define component types
-// export type RdAlertComponent = React.FC<RdAlertProps>;
 export type RdAlertComponent = React.ForwardRefExoticComponent<
     RdAlertProps & React.RefAttributes<RdAlertRef>
 >;
+export declare class RdAlertErrorBoundaryComponent extends React.Component<
+    RdAlertErrorBoundaryProps,
+    RdAlertErrorBoundaryStates
+> {
+    state: RdAlertErrorBoundaryStates;
+    componentDidCatch(error: Error | null, info: object): void;
+    render(): React.ReactNode;
+}
 
 export type RdAlertCompoundedComponent = RdAlertComponent & {
-    // Timer: RdAlertErrorBoundaryComponent;
+    ErrorBoundary: typeof RdAlertErrorBoundaryComponent;
 };
 //#endregion

From 1d4956583085c0326abfb4f9b6e643310d0cab19 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 1 Oct 2025 15:12:24 +0700
Subject: [PATCH 3/6] feat: add Segmented component

---
 src/molecules/Segmented/Segmented.tsx | 15 ++++++++++++++
 src/molecules/Segmented/index.tsx     |  2 ++
 src/molecules/Segmented/styles.tsx    |  7 +++++++
 src/molecules/Segmented/types.ts      | 30 +++++++++++++++++++++++++++
 4 files changed, 54 insertions(+)
 create mode 100644 src/molecules/Segmented/Segmented.tsx
 create mode 100644 src/molecules/Segmented/index.tsx
 create mode 100644 src/molecules/Segmented/styles.tsx
 create mode 100644 src/molecules/Segmented/types.ts

diff --git a/src/molecules/Segmented/Segmented.tsx b/src/molecules/Segmented/Segmented.tsx
new file mode 100644
index 0000000..8b8848c
--- /dev/null
+++ b/src/molecules/Segmented/Segmented.tsx
@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import { SegmentedStyledFunc } from './styles';
+import { RdSegmentedComponent, RdSegmentedProps } from './types';
+
+export const InternalSegmented = <ValueType extends string | number>(
+    props: RdSegmentedProps<ValueType>
+) => {
+    const SegmentedStyled = useMemo(() => {
+        return SegmentedStyledFunc<ValueType>();
+    }, [SegmentedStyledFunc]);
+
+    return <SegmentedStyled {...props} />;
+};
+
+export const Segmented = InternalSegmented as RdSegmentedComponent;
diff --git a/src/molecules/Segmented/index.tsx b/src/molecules/Segmented/index.tsx
new file mode 100644
index 0000000..c59bd98
--- /dev/null
+++ b/src/molecules/Segmented/index.tsx
@@ -0,0 +1,2 @@
+export { Segmented } from './Segmented';
+export * from './types';
\ No newline at end of file
diff --git a/src/molecules/Segmented/styles.tsx b/src/molecules/Segmented/styles.tsx
new file mode 100644
index 0000000..b0a7365
--- /dev/null
+++ b/src/molecules/Segmented/styles.tsx
@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+import { Segmented } from 'antd';
+
+export const SegmentedStyles = styled(Segmented)``;
+
+export const SegmentedStyledFunc = <ValueType extends string | number>() =>
+    styled(Segmented<ValueType>)``;
diff --git a/src/molecules/Segmented/types.ts b/src/molecules/Segmented/types.ts
new file mode 100644
index 0000000..b5ef299
--- /dev/null
+++ b/src/molecules/Segmented/types.ts
@@ -0,0 +1,30 @@
+import { GetProps, Segmented } from 'antd';
+import { ComponentToken as SegmentedComponentTokenAntd } from 'antd/es/affix/style';
+import { InternalSegmented } from './Segmented';
+
+//#region Define Ant Design types
+type SegmentedPropsAntd<ValueType> = GetProps<typeof Segmented<ValueType>>;
+//#endregion
+
+//#region Define extended component tokens
+type SegmentedComponentTokenExtend = {};
+//#endregion
+
+//#region Define extended types
+type SegmentedPropsExtend = {};
+
+type SegmentedRefExtend = {};
+//#endregion
+
+//#region Export types
+export type RdSegmentedProps<ValueType> = SegmentedPropsAntd<ValueType> & SegmentedPropsExtend;
+
+export type RdSegmentedComponentToken = SegmentedComponentTokenAntd & SegmentedComponentTokenExtend;
+//#endregion
+
+//#region Define component types
+export type RdSegmentedComponent = (<ValueType>(
+    props: RdSegmentedProps<ValueType> & React.RefAttributes<HTMLDivElement>
+) => ReturnType<typeof InternalSegmented>) &
+    Pick<React.FC, 'displayName'>;
+//#endregion

From 2e7bf368f4c3a7259a1b3dc1f0e85a6bc9f1a065 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 1 Oct 2025 15:16:00 +0700
Subject: [PATCH 4/6] refactor: add options field for DefaultOptionTypeExtend

---
 src/molecules/Select/types.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/molecules/Select/types.ts b/src/molecules/Select/types.ts
index d5d7240..17182d9 100644
--- a/src/molecules/Select/types.ts
+++ b/src/molecules/Select/types.ts
@@ -61,7 +61,18 @@ type SelectPropsExtend = {
 type SelectOptionPropsExtend = {};
 type SelectOptionGroupPropsExtend = {};
 type BaseOptionTypeExtend = {};
-type DefaultOptionTypeExtend = {};
+type DefaultOptionTypeExtend = {
+    /**
+     * Extends Ant Design's DefaultOptionType.
+     *
+     * Reason:
+     * - Ant Design's <Select> supports nested `options`, but the official `DefaultOptionType`
+     *   type does not include this property.
+     * - Added here for type-safety when building hierarchical option trees.
+     * - Temporary workaround: can be removed if Ant Design updates DefaultOptionType to include it.
+     */
+    options?: RdDefaultOptionType[];
+};
 //#endregion
 
 //#region Export types

From 8129bbfce1fa0b568bb1fc0ee124c07095ce173d Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 1 Oct 2025 15:16:11 +0700
Subject: [PATCH 5/6] feat: export Segmented component

---
 src/molecules/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/molecules/index.ts b/src/molecules/index.ts
index f84b04b..985aef8 100644
--- a/src/molecules/index.ts
+++ b/src/molecules/index.ts
@@ -34,6 +34,7 @@ export * from './Popover';
 export * from './Progress';
 export * from './Radio';
 export * from './Result';
+export * from './Segmented';
 export * from './Select';
 export * from './Skeleton';
 export * from './Slider';

From 19be44190c71a01c05123c54a49bbb805c6c6f19 Mon Sep 17 00:00:00 2001
From: Kenneth <dao.khoi@1bytesoftware.com>
Date: Wed, 1 Oct 2025 15:24:40 +0700
Subject: [PATCH 6/6] refactor: add fixedSiderBreakpoint prop for
 DashboardTemplateSider

---
 .../DashboardTemplate/Sider/index.tsx         | 68 ++++++++++++++-----
 .../DashboardTemplate/Sider/styles.tsx        | 57 +++++++++++++---
 .../DashboardTemplate/Sider/types.ts          |  2 +
 3 files changed, 100 insertions(+), 27 deletions(-)

diff --git a/src/templates/DashboardTemplate/Sider/index.tsx b/src/templates/DashboardTemplate/Sider/index.tsx
index fb247fd..9e53609 100644
--- a/src/templates/DashboardTemplate/Sider/index.tsx
+++ b/src/templates/DashboardTemplate/Sider/index.tsx
@@ -14,6 +14,7 @@ export const DashboardTemplateSider: RdDashboardTemplateSiderComponent = forward
         const {
             children,
             breakpoint = 'lg',
+            fixedSiderBreakpoint = 'md',
             sidebarMode = 'fullHeight',
             headerSidebar,
             collapsed,
@@ -23,33 +24,56 @@ export const DashboardTemplateSider: RdDashboardTemplateSiderComponent = forward
             toggleSider,
             ...restProps
         } = props;
-        const [fixed, setFixed] = useState<boolean>(false);
+
+        /**
+         * `fixedSider` state:
+         * - true  → sidebar is displayed as an overlay (does not take layout width).
+         * - false → sidebar is displayed normally and occupies width.
+         */
+        const [fixedSider, setFixedSider] = useState<boolean>(false);
         const siderWidth = getComponentToken('DashboardTemplate', 'siderWidth');
+
+        /**
+         * collapsedWidth:
+         * - When collapsed in "normal mode" → width = collapsedWidth (e.g. 80px).
+         * - When collapsed in "fixed overlay mode" → width = 0 (sider overlays content).
+         */
         const [collapsedWith, setCollapsedWidth] = useState<number | string>(
             DEFAULT_COLLAPSED_WIDTH
         );
 
+        /**
+         * Two behaviors for the sidebar:
+         *
+         * 1. Collapse at breakpoint:
+         *    - Handled by Ant Design using the `breakpoint` prop (e.g., "lg").
+         *    - When screen < breakpoint, the sidebar collapses but still occupies width.
+         *
+         * 2. Fixed overlay at fixedSiderBreakpoint:
+         *    - Custom logic in this component.
+         *    - When screen < fixedSiderBreakpoint (e.g., "md"), the sidebar becomes fixed overlay.
+         *
+         * => Summary:
+         * - Antd handles collapsing into a narrow-width sidebar.
+         * - This component handles switching to fixed overlay on smaller screens.
+         */
         if (render) {
-            return render({ children, ...restProps });
+            return render({ children, fixedSiderBreakpoint, ...restProps });
         }
 
         const screens = Grid.useBreakpoint();
 
         useEffect(() => {
-            // On smaller screens, we want the sidebar to be fixed and overlay the content
-            if (!screens[breakpoint] && sidebarMode === 'fullHeight') {
-                setFixed(true);
+            // On smaller screens: switch to fixed overlay mode
+            if (!screens[fixedSiderBreakpoint]) {
+                setFixedSider(true);
 
-                if (sidebarMode === 'fullHeight') {
-                    setCollapsedWidth(0);
-                } else {
-                    setCollapsedWidth(DEFAULT_COLLAPSED_WIDTH);
-                }
+                setCollapsedWidth(0);
             } else {
-                setFixed(false);
+                setFixedSider(false);
                 setCollapsedWidth(DEFAULT_COLLAPSED_WIDTH);
             }
-        }, [screens[breakpoint]]);
+        }, [screens[fixedSiderBreakpoint]]);
 
         return (
             <DashboardTemplateSiderStyles
@@ -60,16 +84,24 @@ export const DashboardTemplateSider: RdDashboardTemplateSiderComponent = forward
                 collapsed={collapsed}
                 onCollapse={toggleSider}
                 breakpoint={breakpoint}
-                fixed={fixed}
+                fixed={fixedSider}
+                fixedSiderBreakpoint={fixedSiderBreakpoint}
                 sidebarMode={sidebarMode}
                 fixedOnScroll={fixedOnScroll}
                 {...restProps}
             >
-                {sidebarMode === 'fullHeight' && (
-                    <DashboardTemplateHeaderSidebarStyled fixedOnScroll={fixedHeaderOnScroll}>
-                        {headerSidebar?.(collapsed ?? false)}
-                    </DashboardTemplateHeaderSidebarStyled>
-                )}
+                {/*
+                    Sidebar Header:
+
+                    - Always renders `headerSidebar` (for both "contentHeight" and "fullHeight" modes).
+                    - The `headerSidebar` function receives the `collapsed` state
+                      so the parent can decide whether to render Logo, Favicon, or other variations.
+                    - For "contentHeight": when the screen shrinks into fixed overlay mode,
+                      the headerSidebar still renders (at this point, the sider behaves like fullHeight).
+                */}
+                <DashboardTemplateHeaderSidebarStyled fixedOnScroll={fixedHeaderOnScroll}>
+                    {headerSidebar?.(collapsed ?? false)}
+                </DashboardTemplateHeaderSidebarStyled>
 
                 <DashboardTemplateSiderContentStyled>
                     {children}
diff --git a/src/templates/DashboardTemplate/Sider/styles.tsx b/src/templates/DashboardTemplate/Sider/styles.tsx
index 58bea1b..035ec1f 100644
--- a/src/templates/DashboardTemplate/Sider/styles.tsx
+++ b/src/templates/DashboardTemplate/Sider/styles.tsx
@@ -5,6 +5,16 @@ import { getAliasToken, getComponentToken, getExcludeForwardProps } from '../../
 import { getBorderInlineEndStyle, getColorBgHeaderSiderStyle } from '../helper';
 import { RdDashboardTemplateSiderProps } from './types';
 
+/**
+ * Styled component for the DashboardTemplate Sider.
+ *
+ * - Supports 2 sidebar modes:
+ *   1. fullHeight: Sidebar spans the entire viewport height (header + content).
+ *   2. contentHeight: Sidebar only spans the area below the Header.
+ *
+ * - Works together with `fixedOnScroll` to determine sticky/fixed behavior while scrolling.
+ * - Works together with `fixed` to enable overlay mode (sidebar floats above content, usually on mobile).
+ */
 export const DashboardTemplateSiderStyles = styled(Layout.Sider, {
     label: 'rd-dashboard-template-sider',
     shouldForwardProp: prop =>
@@ -20,9 +30,16 @@ export const DashboardTemplateSiderStyles = styled(Layout.Sider, {
         return css`
             overflow: visible;
             inset-inline-start: 0;
+
+            // When fixedOnScroll is enabled, the sider takes full height
+            // and its children can scroll vertically if needed.
             ${fixedOnScroll &&
             css`
                 height: 100%;
+
+                .ant-layout-sider-children {
+                    overflow-y: auto;
+                }
             `}
             z-index: ${zIndexSider};
         `;
@@ -31,6 +48,8 @@ export const DashboardTemplateSiderStyles = styled(Layout.Sider, {
     ${({ fixedOnScroll, sidebarMode }) => {
         if (fixedOnScroll) {
             if (sidebarMode === 'fullHeight') {
+                // Sidebar spans the full viewport height, including the header.
+                // Using sticky top:0 makes sure it always stays pinned at the very top when scrolling.
                 return css`
                     height: 100vh;
                     position: sticky;
@@ -38,6 +57,10 @@ export const DashboardTemplateSiderStyles = styled(Layout.Sider, {
                 `;
             }
 
+            // Sidebar spans only the space below the header.
+            // Using sticky ensures that when the main content scrolls,
+            // the sidebar stays pinned right below the header,
+            // instead of scrolling away with the content.
             return css`
                 height: calc(100vh - ${getComponentToken('Layout', 'headerHeight')}px);
                 position: sticky;
@@ -47,17 +70,23 @@ export const DashboardTemplateSiderStyles = styled(Layout.Sider, {
         }
     }}
 
-    ${({ fixed }) =>
-        fixed &&
-        css`
-            position: fixed;
-            height: 100vh;
-            top: 0;
-            left: 0;
-            bottom: 0;
-        `}
+    ${({ fixed }) => {
+        // Overlay mode: sidebar is fixed on top of the content
+        // (commonly used on mobile or when fully collapsed).
+        return (
+            fixed &&
+            css`
+                position: fixed;
+                height: 100vh;
+                top: 0;
+                left: 0;
+                bottom: 0;
+            `
+        );
+    }}
 
     ${() => {
+        // Add a border between the sider and the content/trigger.
         return css`
             .ant-layout-sider-children,
             .ant-layout-sider-trigger {
@@ -67,6 +96,10 @@ export const DashboardTemplateSiderStyles = styled(Layout.Sider, {
     }}
 `;
 
+/**
+ * Header section inside the Sider.
+ * Typically used for displaying logo, favicon, or a toggle button.
+ */
 export const DashboardTemplateHeaderSidebarStyled = styled('div', {
     label: 'rd-dashboard-template-header-sidebar',
 })<{ fixedOnScroll?: boolean }>`
@@ -83,6 +116,8 @@ export const DashboardTemplateHeaderSidebarStyled = styled('div', {
         `;
     }}
 
+    // If fixedOnScroll is enabled, the sider header also becomes sticky,
+    // so it always stays visible at the top of the sidebar when scrolling.
     ${({ fixedOnScroll }) =>
         fixedOnScroll &&
         css`
@@ -91,6 +126,10 @@ export const DashboardTemplateHeaderSidebarStyled = styled('div', {
         `}
 `;
 
+/**
+ * Content section inside the Sidebar.
+ * Used for navigation menus or other sidebar content.
+ */
 export const DashboardTemplateSiderContentStyled = styled.div`
     ${() => css``}
 `;
diff --git a/src/templates/DashboardTemplate/Sider/types.ts b/src/templates/DashboardTemplate/Sider/types.ts
index 4b57c64..e9bfcec 100644
--- a/src/templates/DashboardTemplate/Sider/types.ts
+++ b/src/templates/DashboardTemplate/Sider/types.ts
@@ -44,6 +44,8 @@ export type DashboardTemplateSiderPropsExtend = {
      */
     headerSidebar?: (collapsed: boolean) => React.ReactNode;
 
+    fixedSiderBreakpoint?: RdSiderProps['breakpoint'];
+
     /**
      * Determines how the sidebar should be positioned relative to the header and content.
      *