docs: update documentation

Author: mrholek

docs/4.0/components/CCard.mdx

@@ -34,17 +34,6 @@ import {
   CHeaderToggler
 } from '../../../src/index.ts'
 
-## Example
-
-Here's what you need to know before getting started with the header:
-
-- Headers require a wrapping `.header` with `.header-expand{-sm|-md|-lg|-xl|-xxl}` for responsive collapsing and [color scheme](#color-schemes) classes.
-- Headers and their contents are fluid by default. Change the [container](#containers) to limit their horizontal width in different ways.
-- Use our [spacing](https://coreui.io/docs/utilities/spacing") and [flex](https://coreui.io/docs/4.0/utilities/flex) utility classes for controlling spacing and alignment within headers.
-- Headers are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
-- Ensure accessibility by using a `<nav>` element or, if using a more generic element such as a `<div>`, add a `role="navigation"` to every header to explicitly identify it as a landmark region for users of assistive technologies.
-- Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set.
-
 ## Supported content
 
 Headers come with built-in support for a handful of sub-components. Choose from the following as needed:

docs/4.0/components/CHeader.mdx

@@ -28,7 +28,7 @@ import {
 
 Navigation available in CoreUI for React share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style.
 
-The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
+The base `<CNav>` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
 
 <Playground>
   <CNav>
@@ -68,7 +68,7 @@ Classes are used throughout, so your markup can be super flexible. Use `<ul>`s l
 
 ## Available styles
 
-Change the style of `.nav`s component with modifiers and utilities. Mix and match as needed, or build your own.
+Change the style of `<CNav>`'s component with modifiers and utilities. Mix and match as needed, or build your own.
 
 ### Horizontal alignment
 
@@ -197,7 +197,7 @@ Take that same HTML, but use `variant="pills"` instead:
 
 ### Fill and justify
 
-Force your `.nav`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
+Force your `<CNav>`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `layout="fill"`. Notice that all horizontal space is occupied, but not every nav item has the same width.
 
 <Playground>
   <CNav variant="pills" layout="fill">

docs/4.0/components/CNav.mdx

@@ -141,3 +141,21 @@ Try the top, right, and bottom examples out below.
     )
   }}
 </Playground>
+
+## API
+
+### COffcanvas
+
+<Props of={COffcanvas} />
+
+### COffcanvasBody
+
+<Props of={COffcanvasBody} />
+
+### COffcanvasHeader
+
+<Props of={COffcanvasHeader} />
+
+### COffcanvasTitle
+
+<Props of={COffcanvasTitle} />

docs/4.0/components/COffcanvas.mdx

@@ -7,6 +7,7 @@ route: /components/sidebar
 
 import { Playground, Props } from 'docz'
 import CIcon from '@coreui/icons-react'
+import { cilSpeedometer } from '@coreui/icons'
 
 import { 
   CBadge,
@@ -41,11 +42,11 @@ Sidebar come with built-in support for a handful of sub-components. Choose from
     <CSidebarNav>
       <CNavTitle>Nav Title</CNavTitle>
       <CNavItem href="#">
-        <CIcon customClassName="nav-icon" name="cil-speedometer"/>
+        <CIcon customClassName="nav-icon" name={cilSpeedometer}/>
         Nav item
       </CNavItem>
       <CNavItem href="#">
-          <CIcon customClassName="nav-icon" name="cil-speedometer"/>
+          <CIcon customClassName="nav-icon" name={cilSpeedometer}/>
           With badge
           <CBadge color="primary ms-auto">NEW</CBadge>
       </CNavItem>

docs/4.0/components/CSidebar.mdx

@@ -7,17 +7,17 @@ route: "/migration/v4"
 
 CoreUI for React is the React.js version of CoreUI components library, so before read this migration guide, please check also [CoreUI 3 to 4 migration guide](https://coreui.io/docs/4.0/migration/).
 
-### Components
+## Components
 
 - Deprecated component `CEmbed`
 - Deprecated component `CJumbotron`
 
-#### Badges
+### Badges
 
-- variant="pill" => shape="rounded-pill"
-- variant="square" => shape="rounded-0"
+- `variant="pill"` => `shape="rounded-pill"`
+- `variant="square"` => `shape="rounded-0"`
 
-#### Forms
+### Forms
 
 - `CInput` => `CFormInput`
 - `CInputCheckbox` => `CFormCheck`
@@ -27,36 +27,47 @@ CoreUI for React is the React.js version of CoreUI components library, so before
 - `CInvalidFeedback` => `CFormFeedback invalid`
 
 - Deprecated component `CFormGroup`
-- Deprecated component `CInputGroupAppend`
-- Deprecated component `CInputGroupPrepend`
-- Depreacted component `CSwitch`, use `CFormCheck switch` instead of.
+- Deprecated component `CInputGroupAppend`, use `CInputGroupText` instead of.
+- Deprecated component `CInputGroupPrepend` use `CInputGroupText` instead of.
+- Depreacted component `CSwitch`, use `CFormSwitch` instead of.
 - Deprecated `.help-block`
 
-#### Header
+### Header
 
 - Deprecated property `withSubheader`
 - Deprecated component `CHeaderNavItem`, use `CNavItem` instead of.
 - Deprecated component `CHeaderNavLink`, use `CNavLink` instead of.
 
-#### List Group
+### List Group
 
 - Depracated prop `action` Use property `component="a"` or `component="button"` instead of `action`.
 
-#### Modal
+### Modal
 
 - Depracated prop `show` Use `visible` instead of.
 
-#### Popover
+### Popover
 
 - Depracated prop `header` Use `title` instead of.
 
-#### Progress Bar
+### Progress Bar
 
 - Depracated prop `precision`
 - Depracated prop `showLabel`
 - Depracated prop `showPercentage`
 - Depracated prop `showValue`
 
-#### Tabs
+### Sidebar
+- Deprecated property `minimize` use `narrow` instead of.
+- Deprecated property `dropdownMode`.
+
+- Deprecated component `CSidebarForm`, use `CForm` instead of.
+- Deprecated component `CSidebarNavDivider`, use `CNavDivider` instead of.
+- Deprecated component `CSidebarNavDropdown`, use `CNavGroup` instead of.
+- Deprecated component `CSidebarNavLink`, use `CNavLink` instead of.
+- Deprecated component `CSidebarNavItem`, use `CNavItem` instead of.
+- Deprecated component `CSidebarNavTitile`, use `CNavTitle` instead of.
+
+### Tabs
 
 - Deprecated component `<CTabs>` use `<CNav variant="tabs">` without wrapper component `<CTabs>`