Layout.tsx)¶

Overview¶

Core layout component that provides the application's main structure and handles authentication, navigation, and component integration.

Features¶

Authentication handling
Responsive layout
Sidebar integration
Loading states
Chatbot modal
Navigation control
Session management

Dependencies¶

import React, { useState, useEffect, ReactNode } from 'react'
import { useRouter } from 'next/router'
import { useSession } from 'next-auth/react'
import SideBar from '../base/SideBar'
import LoadingPage from '../Loading/Loading'
import ModernChatbot from '../ModernChatbot'
import Navbar from '../Navbar/Navbar'
import { LayoutProvider } from '../base/LayoutProvider'
import 'bootstrap/dist/css/bootstrap.min.css'

Props¶

interface LayoutProps {
  children: ReactNode;
}

Implementation¶

State Management¶

const { data: session, status } = useSession();
const [isLoading, setIsLoading] = useState(false);
const [canOpenChatBotModal, setCanOpenChatBotModal] = useState<boolean>(false);
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState<boolean>(false);
const [isLoginRedirected, setIsLoginRedirected] = useState<boolean>(false);

Methods¶

const openChatBotModal = () => {
  setCanOpenChatBotModal(true);
};

const closeOpenChatBotModal = () => {
  setCanOpenChatBotModal(false);
};

Unique Functionality¶

Authentication state management
Protected route handling
Dynamic sidebar control
Modal system management
Loading state control

HTML Structure¶

<LayoutProvider>
  <div>
    {isLoading && (
      <div className="loading">
        <LoadingPage />
      </div>
    )}
    <div className={`h-full flex flex-row ${
      session ? 'justify-start' : 'justify-center'
    } bg-blue-225`}>
      {session && <SideBar />}
      {/* Additional layout content */}
    </div>
  </div>
</LayoutProvider>

API Integration¶

Uses NextAuth session management
Integrates with router for navigation

Components Used¶

Notes¶

Implements responsive design
Uses Bootstrap for styling
Manages protected routes
Controls component visibility
Handles authentication flow