Refactor BaseLayoutHeader

[gweiying]

BaseLayoutHeader stores all private and public header buttons in a single array of objects called headers. Each header has a boolean public indicating whether the button is for public or private use.

const headers = [
    {
      text: 'Dashboard',
      link: i18next.t('general.links.dashboard'),
      public: false,
      icon: homeIcon,
      mobileOrder: 1,
      internalLink: true,
    },
    {
      text: 'Directory',
      link: i18next.t('general.links.directory'),
      public: false,
      icon: directoryIcon,
      mobileOrder: 2,
      internalLink: true,
    },
    {
      text: 'API Integration',
      link: i18next.t('general.links.apiintegration'),
      public: false,
      icon: apiIcon,
      mobileOrder: 3,
      internalLink: true,
    },
    {
      text: 'Send us feedback',
      link: i18next.t('general.links.feedback'),
      public: true,
      icon: feedbackIcon,
    },
    {
      text: 'Guide',
      link: i18next.t('general.links.faq'),
      public: true,
      icon: helpIcon,
    },
    {
      text: 'Contribute',
      link: i18next.t('general.links.contribute'),
      public: true,
      icon: githubIcon,
    },
    {
      text: 'Guide',
      link: i18next.t('general.links.faq'),
      public: false,
      icon: helpIcon,
      mobileOrder: 4,
    },
    {
      text: 'Send us feedback',
      link: i18next.t('general.links.contact'),
      public: false,
      icon: feedbackIcon,
      mobileOrder: 5,
    },
  ]

Maintaining the headers array is messy because public and private buttons are all mixed up in one array.

We should refactor the headers array into two arrays, publicHeaders and privateHeaders and remove the boolean public. Instead, if a user is logged in, we should just show the privateHeaders, otherwise the publicHeaders.