Sash React-TS Admin and Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries like customization like color ,rtl ,dark style..etc.

How to convert vertical-menu layout to horizontal-menu layout?

Folder Structure

import { FC, Fragment } from 'react';
import { Outlet } from 'react-router-dom';
import Footer from '../Layouts/layoutcomponents/Footer';
import Header from '../Layouts/layoutcomponents/Header';
import Rightside from '../Layouts/layoutcomponents/Rightside';
import Switcher from '../Layouts/layoutcomponents/Switcher';
import * as  switcherdata from '../Commondata/switcherdata/switcherdata';
import BacktoTop from '../Layouts/layoutcomponents/Backtotop';
import { Sidebar }  from '../Layouts/Sidebar/Sidebar';
import store from '../Redux/store';
import { Provider } from 'react-redux';
interface AppProps { }

	const App: FC = () => {
      document.querySelector("body")?.classList.remove('login-img', 'landing-page', 'horizontal');
	  document.querySelector("body")?.classList.add( 'app', 'sidebar-mini', 'ltr','light-mode');

	  return(

     <Fragment>
      <Provider store={store}>
         <div className='horizontalMenucontainer' >
           <Switcher />
             <div className="page">
                  <div className="page-main">
                        <Header />
                      <div className="sticky" style={{ paddingTop: "-74px" }}>
                         <Sidebar />
                           </div>
                     <div className="jumps-prevent" style={{ paddingTop: "74px" }}>           </div>
                         <div className="main-content app-content mt-0" onClick={() => switcherdata.responsiveSidebarclose()}>
                <div className="side-app">
                   <div className="main-container container-fluid">
                  <Outlet />
                 </div>
                </div>
                    </div>
                          </div>
                            <Footer />
                      </div>

                     <Rightside />
                        <BacktoTop />
               </div>
         </Provider>
     </Fragment>
);}

export default App;