docs: update documentation

Author: mrholek

src/docs/components/CodeBlock.tsx

@@ -7,11 +7,10 @@ const CodeBlock: FC = ({ children }) => {
   const language = children.props.className
     ? children.props.className.replace(/language-/, '')
     : 'jsx'
-  // const language = 'jsx'
 
   return (
     <div className="code mb-4" style={{ maxHeight: '500px', overflow: 'scroll' }}>
-      <Highlight {...defaultProps} theme={false} code={_children?.trim()} language={language}>
+      <Highlight {...defaultProps} theme={undefined} code={_children?.trim()} language={language}>
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <pre className={className} style={{ ...style }}>
             {tokens.map((line, i) => (

src/docs/components/Header.tsx

@@ -12,7 +12,10 @@ const Header: FC = ({ ...props }) => {
     <myContext.Consumer>
       {(context) => (
         <CHeader className="mb-5">
-          <CHeaderToggler className="ms-md-3 d-lg-none" onClick={() => context.toggleSidebar()}>
+          <CHeaderToggler
+            className="ms-md-3"
+            onClick={() => context.setSidebarVisible(!context.sidebarVisible)}
+          >
             <CIcon icon={cilMenu} size="lg" />
           </CHeaderToggler>
           <CHeaderNav className="ms-auto">

src/docs/components/Sidebar.tsx

@@ -7,6 +7,7 @@ import { SidebarNav } from '.'
 import { myContext } from './../templates/Docs'
 
 import items from './../nav'
+// @ts-expect-error svg file
 import logo from './../assets/coreui-react.svg'
 
 interface SidebarProps {
@@ -20,9 +21,11 @@ const Sidebar: FC<SidebarProps> = ({ ...props }) => {
         <CSidebar
           className="docs-sidebar border-end ps-xl-4 elevation-0"
           position="fixed"
-          selfHiding="md"
+          // selfHiding="md"
+          hideBelow="xl"
           size="lg"
           visible={context.sidebarVisible}
+          onVisibleChange={(value) => context.setSidebarVisible(value)}
         >
           <CSidebarBrand className="justify-content-start ps-3">
             <CImage className="d-block mt-4 mb-5" src={logo} height={50} />

src/docs/templates/Docs.tsx

@@ -8,17 +8,23 @@ import { CodeBlock, Example, Footer, Header, Seo, Sidebar, Toc } from './../comp
 import { CCol, CContainer, CRow } from '../../index'
 import './../styles/styles.scss'
 
-export const myContext = React.createContext()
+interface ContextProps {
+  sidebarVisible: boolean | undefined
+  setSidebarVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
+}
+
+export const myContext = React.createContext({} as ContextProps)
 
 const components = {
+  // eslint-disable-next-line react/display-name
   pre: (props) => <CodeBlock {...props} />,
   // eslint-disable-next-line react/display-name
   table: (props) => <table {...props} className="table table-striped" />,
   Example,
 }
 
 const DocsLayout: FC = ({ data: { mdx } }) => {
-  const [sidebarVisible, setSidebarVisible] = useState()
+  const [sidebarVisible, setSidebarVisible] = useState(true)
   return (
     <>
       <Seo title={mdx.frontmatter.title} description={mdx.frontmatter.description} />
@@ -28,7 +34,8 @@ const DocsLayout: FC = ({ data: { mdx } }) => {
       <myContext.Provider
         value={{
           sidebarVisible,
-          toggleSidebar: () => setSidebarVisible(!sidebarVisible),
+          setSidebarVisible,
+          // toggleSidebar: () => setSidebarVisible(!sidebarVisible),
         }}
       >
         <Sidebar currentRoute={mdx.frontmatter.route}/>