Layout.tsx

import React, { useEffect, useState } from 'react'
import BottomBar from '../Navigation/BottomBar'
import SideBar from '../Navigation/SideBar'
import styles from './layout.module.scss'

const Layout: React.FC = ({ children }) => {
  const [isMobile, setIsMobile] = useState<boolean>(false)
  useEffect(() => {
    function handleResize() {
      const test: boolean =
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        ) || window.innerWidth < 768
          ? true
          : false
      setIsMobile(test)
    }
    handleResize()

    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])
  return (
    <div className={styles.root}>
      {!isMobile ? (
        <div className={styles.menuWrapper}>
          <SideBar />
        </div>
      ) : (
        <div className={styles.mobileNavWrapper}>
          <BottomBar />
        </div>
      )}
      <div className={styles.wrapper}>
        <main>{children}</main>
      </div>
    </div>
  )
}

export default Layout