Dec 31, 2024 · Dec 30, 2024
diff --git a/packages/coreui-react/src/components/sidebar/CSidebar.tsx b/packages/coreui-react/src/components/sidebar/CSidebar.tsx
 import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import React, {ElementType,forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'

 import { isInViewport } from '../../utils'
 import { useForkedRef } from '../../hooks'
 import { PolymorphicRefForwardingComponent } from '../../helpers'

 export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
  /**
   * Component used for the root node. Either a string to use a HTML element or a component.
   */
  as?: ElementType
  /**
   * A string of all className you want applied to the component.
   */
 const isOnMobile = (element: HTMLDivElement) =>
  Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))

 export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
 export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> = forwardRef<
  HTMLDivElement,
  CSidebarProps
 >(
  (
    {
      children,
      as: Component = 'div',
      className,
      colorScheme,
      narrow,

    return (
      <>
        <div
        <Component
          className={classNames(
            'sidebar',
            {
          ref={forkedRef}
        >
          {children}
        </div>
        </Component>
        {typeof window !== 'undefined' &&
          mobile &&
          createPortal(
 )

 CSidebar.propTypes = {
  as: PropTypes.elementType,
  children: PropTypes.node,
  className: PropTypes.string,
  colorScheme: PropTypes.oneOf(['dark', 'light']),
  visible: PropTypes.bool,
 }

 CSidebar.displayName = 'CSidebar'
 CSidebar.displayName = 'CSidebar'
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
		import React, {ElementType,forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'
		import { createPortal } from 'react-dom'
		import PropTypes from 'prop-types'
		import classNames from 'classnames'
Expand All		@@ -7,8 +7,13 @@ import { CBackdrop } from '../backdrop'

		import { isInViewport } from '../../utils'
		import { useForkedRef } from '../../hooks'
		import { PolymorphicRefForwardingComponent } from '../../helpers'

		export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
		/**
		* Component used for the root node. Either a string to use a HTML element or a component.
		*/
		as?: ElementType
		/**
		* A string of all className you want applied to the component.
		*/
Expand DownExpand Up		@@ -65,10 +70,14 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
		const isOnMobile = (element: HTMLDivElement) =>
		Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))

		export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
		export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> = forwardRef<
		HTMLDivElement,
		CSidebarProps
		>(
		(
		{
		children,
		as: Component = 'div',
		className,
		colorScheme,
		narrow,
Expand DownExpand Up		@@ -183,7 +192,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(

		return (
		<>
		<div
		<Component
		className={classNames(
		'sidebar',
		{
Expand All		@@ -203,7 +212,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
		ref={forkedRef}
		>
		{children}
		</div>
		</Component>
		{typeof window !== 'undefined' &&
		mobile &&
		createPortal(
Expand All		@@ -216,6 +225,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
		)

		CSidebar.propTypes = {
		as: PropTypes.elementType,
		children: PropTypes.node,
		className: PropTypes.string,
		colorScheme: PropTypes.oneOf(['dark', 'light']),
Expand All		@@ -231,4 +241,4 @@ CSidebar.propTypes = {
		visible: PropTypes.bool,
		}

		CSidebar.displayName = 'CSidebar'
		CSidebar.displayName = 'CSidebar'