text: import React, {Component} from 'react';
  import {Link} from 'react-router-dom';
  import {SlideMenu} from '../../components/slidemenu/SlideMenu';
  import {Button} from '../../components/button/Button';
  import {TabView,TabPanel} from '../../components/tabview/TabView';
  import {CodeHighlight} from '../codehighlight/CodeHighlight';
  import AppContentContext from '../../AppContentContext';
  import { LiveEditor } from '../liveeditor/LiveEditor';
  
  export class SlideMenuDemo extends Component {
  
      render() {
          const items = [
              {
                 label:'File',
                 icon:'pi pi-fw pi-file',
                 items:[
                    {
                       label:'New',
                       icon:'pi pi-fw pi-plus',
                       items:[
                          {
                             label:'Bookmark',
                             icon:'pi pi-fw pi-bookmark'
                          },
                          {
                             label:'Video',
                             icon:'pi pi-fw pi-video'
                          },
  
                       ]
                    },
                    {
                       label:'Delete',
                       icon:'pi pi-fw pi-trash'
                    },
                    {
                       separator:true
                    },
                    {
                       label:'Export',
                       icon:'pi pi-fw pi-external-link'
                    }
                 ]
              },
              {
                 label:'Edit',
                 icon:'pi pi-fw pi-pencil',
                 items:[
                    {
                       label:'Left',
                       icon:'pi pi-fw pi-align-left'
                    },
                    {
                       label:'Right',
                       icon:'pi pi-fw pi-align-right'
                    },
                    {
                       label:'Center',
                       icon:'pi pi-fw pi-align-center'
                    },
                    {
                       label:'Justify',
                       icon:'pi pi-fw pi-align-justify'
                    },
  
                 ]
              },
              {
                 label:'Users',
                 icon:'pi pi-fw pi-user',
                 items:[
                    {
                       label:'New',
                       icon:'pi pi-fw pi-user-plus',
  
                    },
                    {
                       label:'Delete',
                       icon:'pi pi-fw pi-user-minus',
  
                    },
                    {
                       label:'Search',
                       icon:'pi pi-fw pi-users',
                       items:[
                          {
                             label:'Filter',
                             icon:'pi pi-fw pi-filter',
                             items:[
                                {
                                   label:'Print',
                                   icon:'pi pi-fw pi-print'
                                }
                             ]
                          },
                          {
                             icon:'pi pi-fw pi-bars',
                             label:'List'
                          }
                       ]
                    }
                 ]
              },
              {
                 label:'Events',
                 icon:'pi pi-fw pi-calendar',
                 items:[
                    {
                       label:'Edit',
                       icon:'pi pi-fw pi-pencil',
                       items:[
                          {
                             label:'Save',
                             icon:'pi pi-fw pi-calendar-plus'
                          },
                          {
                             label:'Delete',
                             icon:'pi pi-fw pi-calendar-minus'
                          }
                       ]
                    },
                    {
                       label:'Archieve',
                       icon:'pi pi-fw pi-calendar-times',
                       items:[
                          {
                             label:'Remove',
                             icon:'pi pi-fw pi-calendar-minus'
                          }
                       ]
                    }
                 ]
              },
              {
                 separator:true
              },
              {
                 label:'Quit',
                 icon:'pi pi-fw pi-power-off'
              }
          ];
  
          return (
              <div>
                  <div className="content-section introduction">
                      <div className="feature-intro">
                          <h1>Slide Menu</h1>
                          <p>SlideMenu displays submenus with a slide animation.</p>
  
                          <AppContentContext.Consumer>
                              { context => <button onClick={() => context.onChangelogBtnClick("slideMenu")} className="layout-changelog-button">{context.changelogText}</button> }
                          </AppContentContext.Consumer>
                      </div>
                  </div>
  
                  <div className="content-section implementation">
                      <h3>Basic</h3>
                      <SlideMenu model={items} viewportHeight={250} style={{width: '13.5em'}}></SlideMenu>
  
                      <h3>Popup</h3>
                      <SlideMenu ref={(el) => this.menu = el} model={items} popup={true} viewportHeight={250} style={{width: '13.5em'}}></SlideMenu>
                      <Button type="button" icon="pi pi-bars" label="Show" onClick={(event) => this.menu.toggle(event)}></Button>
                  </div>
  
                  <SlideMenuDoc />
              </div>
          )
      }
  }
  
  class SlideMenuDoc extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              activeIndex: 0
          };
  
          this.sources = {
              'app': {
                  tabName: 'Source',
                  content: `
  import React, { Component } from 'react';
  import {SlideMenu} from 'primereact/slidemenu';
  import {Button} from 'primereact/button';
  
  export class SlideMenuDemo extends Component {
  
      render() {
          const items = [
              {
                 label:'File',
                 icon:'pi pi-fw pi-file',
                 items:[
                    {
                       label:'New',
                       icon:'pi pi-fw pi-plus',
                       items:[
                          {
                             label:'Bookmark',
                             icon:'pi pi-fw pi-bookmark'
                          },
                          {
                             label:'Video',
                             icon:'pi pi-fw pi-video'
                          },
  
                       ]
                    },
                    {
                       label:'Delete',
                       icon:'pi pi-fw pi-trash'
                    },
                    {
                       separator:true
                    },
                    {
                       label:'Export',
                       icon:'pi pi-fw pi-external-link'
                    }
                 ]
              },
              {
                 label:'Edit',
                 icon:'pi pi-fw pi-pencil',
                 items:[
                    {
                       label:'Left',
                       icon:'pi pi-fw pi-align-left'
                    },
                    {
                       label:'Right',
                       icon:'pi pi-fw pi-align-right'
                    },
                    {
                       label:'Center',
                       icon:'pi pi-fw pi-align-center'
                    },
                    {
                       label:'Justify',
                       icon:'pi pi-fw pi-align-justify'
                    },
  
                 ]
              },
              {
                 label:'Users',
                 icon:'pi pi-fw pi-user',
                 items:[
                    {
                       label:'New',
                       icon:'pi pi-fw pi-user-plus',
  
                    },
                    {
                       label:'Delete',
                       icon:'pi pi-fw pi-user-minus',
  
                    },
                    {
                       label:'Search',
                       icon:'pi pi-fw pi-users',
                       items:[
                          {
                             label:'Filter',
                             icon:'pi pi-fw pi-filter',
                             items:[
                                {
                                   label:'Print',
                                   icon:'pi pi-fw pi-print'
                                }
                             ]
                          },
                          {
                             icon:'pi pi-fw pi-bars',
                             label:'List'
                          }
                       ]
                    }
                 ]
              },
              {
                 label:'Events',
                 icon:'pi pi-fw pi-calendar',
                 items:[
                    {
                       label:'Edit',
                       icon:'pi pi-fw pi-pencil',
                       items:[
                          {
                             label:'Save',
                             icon:'pi pi-fw pi-calendar-plus'
                          },
                          {
                             label:'Delete',
                             icon:'pi pi-fw pi-calendar-minus'
                          }
                       ]
                    },
                    {
                       label:'Archieve',
                       icon:'pi pi-fw pi-calendar-times',
                       items:[
                          {
                             label:'Remove',
                             icon:'pi pi-fw pi-calendar-minus'
                          }
                       ]
                    }
                 ]
              },
              {
                 separator:true
              },
              {
                 label:'Quit',
                 icon:'pi pi-fw pi-power-off'
              }
          ];
  
          return (
              <div>
                  <h3>Basic</h3>
                  <SlideMenu model={items} viewportHeight={250} style={{width: '13.5em'}}></SlideMenu>
  
                  <h3>Popup</h3>
                  <SlideMenu ref={(el) => this.menu = el} model={items} popup={true} viewportHeight={250} style={{width: '13.5em'}}></SlideMenu>
                  <Button type="button" icon="pi pi-bars" label="Show" onClick={(event) => this.menu.toggle(event)}></Button>
              </div>
          )
      }
  }
                  `
              },
              'hooks': {
                  tabName: 'Hooks Source',
                  content: `
  import React, { useRef } from 'react';
  import {SlideMenu} from 'primereact/slidemenu';
  import {Button} from 'primereact/button';
  
  const SlideMenuDemo = () => {
      let menu = useRef(null);
  
      const items = [
          {
              label:'File',
              icon:'pi pi-fw pi-file',
              items:[
                  {
                      label:'New',
                      icon:'pi pi-fw pi-plus',
                      items:[
                      {
                          label:'Bookmark',
                          icon:'pi pi-fw pi-bookmark'
                      },
                      {
                          label:'Video',
                          icon:'pi pi-fw pi-video'
                      },
  
                      ]
                  },
                  {
                      label:'Delete',
                      icon:'pi pi-fw pi-trash'
                  },
                  {
                      separator:true
                  },
                  {
                      label:'Export',
                      icon:'pi pi-fw pi-external-link'
                  }
              ]
          },
          {
              label:'Edit',
              icon:'pi pi-fw pi-pencil',
              items:[
                  {
                      label:'Left',
                      icon:'pi pi-fw pi-align-left'
                  },
                  {
                      label:'Right',
                      icon:'pi pi-fw pi-align-right'
                  },
                  {
                      label:'Center',
                      icon:'pi pi-fw pi-align-center'
                  },
                  {
                      label:'Justify',
                      icon:'pi pi-fw pi-align-justify'
                  },
  
              ]
          },
          {
              label:'Users',
              icon:'pi pi-fw pi-user',
              items:[
                  {
                      label:'New',
                      icon:'pi pi-fw pi-user-plus',
  
                  },
                  {
                      label:'Delete',
                      icon:'pi pi-fw pi-user-minus',
  
                  },
                  {
                      label:'Search',
                      icon:'pi pi-fw pi-users',
                      items:[
                      {
                          label:'Filter',
                          icon:'pi pi-fw pi-filter',
                          items:[
                              {
                                  label:'Print',
                                  icon:'pi pi-fw pi-print'
                              }
                          ]
                      },
                      {
                          icon:'pi pi-fw pi-bars',
                          label:'List'
                      }
                      ]
                  }
              ]
          },
          {
              label:'Events',
              icon:'pi pi-fw pi-calendar',
              items:[
                  {
                      label:'Edit',
                      icon:'pi pi-fw pi-pencil',
                      items:[
                      {
                          label:'Save',
                          icon:'pi pi-fw pi-calendar-plus'
                      },
                      {
                          label:'Delete',
                          icon:'pi pi-fw pi-calendar-minus'
                      }
                      ]
                  },
                  {
                      label:'Archieve',
                      icon:'pi pi-fw pi-calendar-times',
                      items:[
                      {
                          label:'Remove',
                          icon:'pi pi-fw pi-calendar-minus'
                      }
                      ]
                  }
              ]
          },
          {
              separator:true
          },
          {
              label:'Quit',
              icon:'pi pi-fw pi-power-off'
          }
      ];
  
      return (
          <div>
              <h3>Basic</h3>
              <SlideMenu model={items} viewportHeight={250} style={{width: '13.5em'}}></SlideMenu>
  
              <h3>Popup</h3>
              <SlideMenu ref={menu} model={items} popup={true} viewportHeight={250} style={{width: '13.5em'}}></SlideMenu>
              <Button type="button" icon="pi pi-bars" label="Show" onClick={(event) => menu.current.toggle(event)}></Button>
          </div>
      )
  }
                  `
              },
              'ts': {
                  tabName: 'TS Source',
                  content: `
  import React, { useRef } from 'react';
  import {SlideMenu} from 'primereact/slidemenu';
  import {Button} from 'primereact/button';
  
  const SlideMenuDemo = () => {
      let menu = useRef<any>(null);
  
      const items = [
          {
              label:'File',
              icon:'pi pi-fw pi-file',
              items:[
                  {
                      label:'New',
                      icon:'pi pi-fw pi-plus',
                      items:[
                      {
                          label:'Bookmark',
                          icon:'pi pi-fw pi-bookmark'
                      },
                      {
                          label:'Video',
                          icon:'pi pi-fw pi-video'
                      },
  
                      ]
                  },
                  {
                      label:'Delete',
                      icon:'pi pi-fw pi-trash'
                  },
                  {
                      separator:true
                  },
                  {
                      label:'Export',
                      icon:'pi pi-fw pi-external-link'
                  }
              ]
          },
          {
              label:'Edit',
              icon:'pi pi-fw pi-pencil',
              items:[
                  {
                      label:'Left',
                      icon:'pi pi-fw pi-align-left'
                  },
                  {
                      label:'Right',
                      icon:'pi pi-fw pi-align-right'
                  },
                  {
                      label:'Center',
                      icon:'pi pi-fw pi-align-center'
                  },
                  {
                      label:'Justify',
                      icon:'pi pi-fw pi-align-justify'
                  },
  
              ]
          },
          {
              label:'Users',
              icon:'pi pi-fw pi-user',
              items:[
                  {
                      label:'New',
                      icon:'pi pi-fw pi-user-plus',
  
                  },
                  {
                      label:'Delete',
                      icon:'pi pi-fw pi-user-minus',
  
                  },
                  {
                      label:'Search',
                      icon:'pi pi-fw pi-users',
                      items:[
                      {
                          label:'Filter',
                          icon:'pi pi-fw pi-filter',
                          items:[
                              {
                                  label:'Print',
                                  icon:'pi pi-fw pi-print'
                              }
                          ]
                      },
                      {
                          icon:'pi pi-fw pi-bars',
                          label:'List'
                      }
                      ]
                  }
              ]
          },
          {
              label:'Events',
              icon:'pi pi-fw pi-calendar',
              items:[
                  {
                      label:'Edit',
                      icon:'pi pi-fw pi-pencil',
                      items:[
                      {
                          label:'Save',
                          icon:'pi pi-fw pi-calendar-plus'
                      },
                      {
                          label:'Delete',
                          icon:'pi pi-fw pi-calendar-minus'
                      }
                      ]
                  },
                  {
                      label:'Archieve',
                      icon:'pi pi-fw pi-calendar-times',
                      items:[
                      {
                          label:'Remove',
                          icon:'pi pi-fw pi-calendar-minus'
                      }
                      ]
                  }
              ]
          },
          {
              separator:true
          },
          {
              label:'Quit',
              icon:'pi pi-fw pi-power-off'
          }
      ];
  
      return (
          <div>
              <h3>Basic</h3>
              <SlideMenu model={items} viewportHeight={250} style={{width: '13.5em'}}></SlideMenu>
  
              <h3>Popup</h3>
              <SlideMenu ref={menu} model={items} popup={true} viewportHeight={250} style={{width: '13.5em'}}></SlideMenu>
              <Button type="button" icon="pi pi-bars" label="Show" onClick={(event) => menu.current.toggle(event)}></Button>
          </div>
      )
  }
                  `
              }
          }
      }
  
      shouldComponentUpdate(nextProps, nextState) {
          if (this.state.activeIndex !== nextState.activeIndex) {
              return true;
          }
  
          return false;
      }
  
      renderSourceButtons() {
          return (
              <div className="source-button-group">
                  <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/slidemenu" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                      <span>View on GitHub</span>
                  </a>
                  <LiveEditor name="SlideMenuDemo" sources={this.sources} activeButtonIndex={this.state.activeIndex - 1} />
              </div>
          )
      }
  
      render() {
          const sourceButtons = this.renderSourceButtons();
  
          return (
              <div className="content-section documentation">
                  <TabView activeIndex={this.state.activeIndex} onTabChange={(e) => this.setState({ activeIndex: e.index })}>
                      <TabPanel header="Documentation">
                          <h3>Import</h3>
  <CodeHighlight className="language-javascript">
  {`
  import {SlideMenu} from 'primereact/slidemenu';
  
  `}
  </CodeHighlight>
  
                          <h3>MenuItem API</h3>
                          <p>Menu uses the common menumodel api to define its items, visit <Link to="/menumodel"> MenuModel API</Link> for details.</p>
  
                          <h3>Getting Started</h3>
                          <p>Menu requires a collection of menuitems as its model.</p>
  
  <CodeHighlight className="language-javascript">
  {`
  const items:[
      {
         label:'File',
         icon:'pi pi-fw pi-file',
         items:[
            {
               label:'New',
               icon:'pi pi-fw pi-plus',
               items:[
                  {
                     label:'Bookmark',
                     icon:'pi pi-fw pi-bookmark'
                  },
                  {
                     label:'Video',
                     icon:'pi pi-fw pi-video'
                  },
  
               ]
            },
            {
               label:'Delete',
               icon:'pi pi-fw pi-trash'
            },
            {
               separator:true
            },
            {
               label:'Export',
               icon:'pi pi-fw pi-external-link'
            }
         ]
      },
      {
         label:'Edit',
         icon:'pi pi-fw pi-pencil',
         items:[
            {
               label:'Left',
               icon:'pi pi-fw pi-align-left'
            },
            {
               label:'Right',
               icon:'pi pi-fw pi-align-right'
            },
            {
               label:'Center',
               icon:'pi pi-fw pi-align-center'
            },
            {
               label:'Justify',
               icon:'pi pi-fw pi-align-justify'
            },
  
         ]
      },
      {
         label:'Users',
         icon:'pi pi-fw pi-user',
         items:[
            {
               label:'New',
               icon:'pi pi-fw pi-user-plus',
  
            },
            {
               label:'Delete',
               icon:'pi pi-fw pi-user-minus',
  
            },
            {
               label:'Search',
               icon:'pi pi-fw pi-users',
               items:[
                  {
                     label:'Filter',
                     icon:'pi pi-fw pi-filter',
                     items:[
                        {
                           label:'Print',
                           icon:'pi pi-fw pi-print'
                        }
                     ]
                  },
                  {
                     icon:'pi pi-fw pi-bars',
                     label:'List'
                  }
               ]
            }
         ]
      },
      {
         label:'Events',
         icon:'pi pi-fw pi-calendar',
         items:[
            {
               label:'Edit',
               icon:'pi pi-fw pi-pencil',
               items:[
                  {
                     label:'Save',
                     icon:'pi pi-fw pi-calendar-plus'
                  },
                  {
                     label:'Delete',
                     icon:'pi pi-fw pi-calendar-minus'
                  },
  
               ]
            },
            {
               label:'Archieve',
               icon:'pi pi-fw pi-calendar-times',
               items:[
                  {
                     label:'Remove',
                     icon:'pi pi-fw pi-calendar-minus'
                  }
               ]
            }
         ]
      },
      {
         separator:true
      },
      {
         label:'Quit',
         icon:'pi pi-fw pi-power-off'
      }
   ];
  
  `}
  </CodeHighlight>
  
  <CodeHighlight className="language-jsx">
  {`
  <SlideMenu model={items} />
  
  `}
  </CodeHighlight>
  
  
                          <h3>Popup Mode</h3>
                          <p>SlideMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
  <CodeHighlight className="language-jsx">
  {`
  <SlideMenu ref={(el) => this.menu = el} model={items} popup={true} />
  
  <Button type="button" icon="pi pi-bars" label="Show" onClick={(event) => this.menu.toggle(event)}></Button>
  
  `}
  </CodeHighlight>
  
                          <h3>Effects</h3>
                          <p>The easing function to use is "ease-out" by default which can be customized using easing property.
                              See <a href="http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp">here</a> for possible alternative values.</p>
  
  <CodeHighlight className="language-jsx">
  {`
  <SlideMenu model={this.items} effectDuration={1000} easing="ease-in" />
  
  `}
  </CodeHighlight>
  
                          <h3>Properties</h3>
                          <div className="doc-tablewrapper">
                              <table className="doc-table">
                                  <thead>
                                      <tr>
                                          <th>Name</th>
                                          <th>Type</th>
                                          <th>Default</th>
                                          <th>Description</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td>id</td>
                                          <td>string</td>
                                          <td>null</td>
                                          <td>Unique identifier of the element.</td>
                                      </tr>
                                      <tr>
                                          <td>model</td>
                                          <td>array</td>
                                          <td>null</td>
                                          <td>An array of menuitems.</td>
                                      </tr>
                                      <tr>
                                          <td>popup</td>
                                          <td>boolean</td>
                                          <td>false</td>
                                          <td>Defines if menu would displayed as a popup.</td>
                                      </tr>
                                      <tr>
                                          <td>style</td>
                                          <td>string</td>
                                          <td>null</td>
                                          <td>Inline style of the component.</td>
                                      </tr>
                                      <tr>
                                          <td>className</td>
                                          <td>string</td>
                                          <td>null</td>
                                          <td>Style class of the component.</td>
                                      </tr>
                                      <tr>
                                          <td>easing</td>
                                          <td>string</td>
                                          <td>ease-out</td>
                                          <td>Easing animation to use for sliding.</td>
                                      </tr>
                                      <tr>
                                          <td>effectDuration</td>
                                          <td>any</td>
                                          <td>250</td>
                                          <td>Duration of the sliding animation in milliseconds.</td>
                                      </tr>
                                      <tr>
                                          <td>backLabel</td>
                                          <td>string</td>
                                          <td>Back</td>
                                          <td>Label of element to navigate back.</td>
                                      </tr>
                                      <tr>
                                          <td>menuWidth</td>
                                          <td>number</td>
                                          <td>190</td>
                                          <td>Width of the submenus.</td>
                                      </tr>
                                      <tr>
                                          <td>viewportHeight</td>
                                          <td>number</td>
                                          <td>175</td>
                                          <td>Height of the scrollable area, a scrollbar appears if a menu height is longer than this value.</td>
                                      </tr>
                                      <tr>
                                          <td>baseZIndex</td>
                                          <td>number</td>
                                          <td>0</td>
                                          <td>Base zIndex value to use in layering.</td>
                                      </tr>
                                      <tr>
                                          <td>autoZIndex</td>
                                          <td>boolean</td>
                                          <td>true</td>
                                          <td>Whether to automatically manage layering.</td>
                                      </tr>
                                      <tr>
                                          <td>appendTo</td>
                                          <td>DOM element</td>
                                          <td>null</td>
                                          <td>DOM element instance where the dialog should be mounted.</td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
  
                         <h3>Methods</h3>
                          <div className="doc-tablewrapper">
                              <table className="doc-table">
                                  <thead>
                                      <tr>
                                          <th>Name</th>
                                          <th>Parameters</th>
                                          <th>Description</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td>toggle</td>
                                          <td>event: Browser event</td>
                                          <td>Toggles the visibility of the popup menu.</td>
                                      </tr>
                                      <tr>
                                          <td>show</td>
                                          <td>event: Browser event</td>
                                          <td>Displays the popup menu.</td>
                                      </tr>
                                      <tr>
                                          <td>hide</td>
                                          <td>event: Browser event</td>
                                          <td>Hides the popup menu.</td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
  
                          <h3>Events</h3>
                          <div className="doc-tablewrapper">
                              <table className="doc-table">
                                  <thead>
                                      <tr>
                                          <th>Name</th>
                                          <th>Parameters</th>
                                          <th>Description</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td>onShow</td>
                                          <td>event: Browser event </td>
                                          <td>Callback to invoke when a popup menu is shown.</td>
                                      </tr>
                                      <tr>
                                          <td>onHide</td>
                                          <td>event: Browser event </td>
                                          <td>Callback to invoke when a popup menu is hidden.</td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
  
                          <h3>Styling</h3>
                          <p>Following is the list of structural style classes.</p>
                          <div className="doc-tablewrapper">
                              <table className="doc-table">
                                  <thead>
                                  <tr>
                                      <th>Name</th>
                                      <th>Element</th>
                                  </tr>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td>p-slidemenu</td>
                                          <td>Container element.</td>
                                      </tr>
                                      <tr>
                                          <td>p-slidemenu-wrapper</td>
                                          <td>Wrapper of content.</td>
                                      </tr>
                                      <tr>
                                          <td>p-slidemenu-content</td>
                                          <td>Content element.</td>
                                      </tr>
                                      <tr>
                                          <td>p-slidemenu-backward</td>
                                          <td>Element to navigate to previous menu on click.</td>
                                      </tr>
                                      <tr>
                                          <td>p-menu-list</td>
                                          <td>List element.</td>
                                      </tr>
                                      <tr>
                                          <td>p-menuitem</td>
                                          <td>Menuitem element.</td>
                                      </tr>
                                      <tr>
                                          <td>p-menuitem-text</td>
                                          <td>Label of a menuitem.</td>
                                      </tr>
                                      <tr>
                                          <td>p-menuitem-icon</td>
                                          <td>Icon of a menuitem.</td>
                                      </tr>
                                      <tr>
                                          <td>p-submenu-icon</td>
                                          <td>Arrow icon of a submenu.</td>
                                      </tr>
                                  </tbody>
                              </table>
                          </div>
  
                          <h3>Dependencies</h3>
                          <p>None.</p>
                      </TabPanel>
  
                      {
                          this.sources && Object.entries(this.sources).map(([key, value], index) => {
                              return (
                                  <TabPanel key={`source_${index}`} header={value.tabName}>
                                      {sourceButtons}
  
                                      <CodeHighlight className="language-javascript">
                                          {value.content}
                                      </CodeHighlight>
                                  </TabPanel>
                              );
                          })
                      }
                  </TabView>
              </div>
          )
      }
  }
  