import React from 'react';
import Navbar from './UserNavbar';
import SideNav from './UserSideNav';
import { useLocation } from 'react-router-dom';

const UserLayout = ({ children }) => {
  const location = useLocation();
  
  const getSideNav = () => {
    let showIt = true;
    switch (location.pathname) {
      case '/learning/home':
          showIt = true;
        break;
      
      case '/learning/home/':
          showIt = true;
        break;

      case '/learning/module':
          showIt = true;
        break;
        
      case '/learning/module/':
          showIt = true;
        break;

      case '/learning/history':
          showIt = true;
        break;

      case '/learning/history/':
          showIt = true;
        break;

      case '/learning/setting':
          showIt = true;
        break;

      case '/learning/setting/':
          showIt = true;
        break;
    
      default:
          showIt = false;
        break;
    }

    return showIt;
  };

  return (
    <div className="dashboard-page h-screen">
      <Navbar />
      <div className="container-fluid dashboard-container">
        <div className="row min-h-100">
          {/* <SideNav /> */}
          {getSideNav() ? <SideNav /> : ""}
          <main className="col p-4 overflow-auto bg-light">
            {children}
          </main>
        </div>
      </div>
    </div>
  );
};

export default UserLayout;