import React, { Fragment } from 'react';
import { Outlet } from 'react-router-dom';
import Footer from './components/layout/Footer/Footer';
import Header from './components/layout/Header/Header';
import SideBar from './components/layout/SideBar/SideBar';
import Switcher from './components/layout/Switcher/Switcher';
import * as SwitcherData from './components/layout/Switcher/Data/SwitcherData';

function App() {

	document.querySelector("body")?.classList.remove("landing-page" ,"horizontal");
	document.querySelector("body")?.classList.remove("h-100vh" ,"bg-primary", "login-page");
	document.querySelector("body")?.classList.remove("h-100vh" ,"bg-light", "login-page");
	document.body.classList.remove("register1", "login-page");
	document.body.classList.remove("register-2", "login-page");
	document.body.classList.remove("register-3", "login-page");
	document.body.classList.remove("comming", "login-page");
	document.body.classList.remove("construction", "login-page");
	
// Switcher
	const SwitcherMenuclose = () => {
	
	document.querySelector(".demo_changer")?.classList.remove("active");
	let demo_changer = document.querySelector(".demo_changer") as HTMLInputElement
	demo_changer.style.right = "-270px";
	}
	const Sideabr = () => {
	document.querySelector("body")?.classList.remove("sidenav-toggled");
	}
	return (
			<Fragment>
				<div className='horizontalMenucontainer'>
			
				<Switcher/>
				<div className='page'>
					<div className='page-main'>
					<Header/>
					<SideBar/>
					<div className='jumps-prevent' style={{ paddingTop: "0px" }}></div>
					<div className='app-content main-content' onClick = {() => {
					SwitcherMenuclose();
					Sideabr();
					}}>
						<div className='side-app'>
						<div className='main-container container-fluid px-0'>
						<Outlet/>
						</div>
						</div>
					</div>
					</div>
				</div>
				<Footer/>
				</div>
				</Fragment>
			)
			}