Spruha – Premium Nextjs Admin Template

Spruha - Layouts

Spruha Layout Structure

The following shared\layout-components\layout\content-layout.tsx Next Js code should in your project to get the standard structure

shared\layout-components\layout\content-layout.tsx

	
		import React, { ReactNode, useEffect, useState } from "react";
import Footer from "../footer/footer";
import { Provider } from "react-redux";
import store from "../../redux/store";
import dynamic from "next/dynamic";
import Rightside from "../right-sidebar/right-sidebar";
import TabToTop from "../tab-to-top/tab-to-top";
import { useRouter } from "next/router";
import Header from "../header/header";
// import Loader from "../loader/loader";
const Switcher = dynamic(() => import("../switcher/switcher"), { ssr: false });
const Sidebar = dynamic(() => import("../sidebar/sidebar"), { ssr: false });


interface AuthenticationLayoutProps {
  children: ReactNode;
}

const Contentlayout = ({ children }:AuthenticationLayoutProps) => {
  const Add = () => {
    document.querySelector("body")?.classList.remove("error-1");
    document.querySelector("body")?.classList.remove("landing-body");

   
    
  };
  useEffect(() => {
    Add();



   
  });

  const remove = () => {
    document.querySelector("#right-sidebar-canvas")?.classList.remove("show");
    document.querySelector(".offcanvas-end")?.classList.remove("show");
    document.querySelector("body")!.classList.remove("overflow:hidden");
    document.querySelector("body")!.classList.remove("padding-right:4px");

    if (document.querySelector(".card.search-result") != null) {
      document.querySelector(".card.search-result")?.classList.add("d-none");
    }
    if (document.body.classList.contains("horizontalmenu")){
      document.querySelectorAll(".nav-sub").forEach((res)    =>{
        if(res){
          // res.classList = "nav-sub"
          (res as HTMLElement).style.display = "none"
        }
      })
    }
  };



export default Contentlayout;

		  return (
			<>
			<Helmet>
			  <body className="ltr main-body leftmenu">
			  </body>
				</Helmet>
				<Provider store={store}>
				  <  Switcher/>
				  <div className='page'>
				  <Header />
					<Sidebar />
					  <div className="main-content app-content">
						<div className=" container-fluid" onClick={() => remove()}>
					  <div className="inner-body">
					<{children}
				  </div>
				  </div>
				</div>
				<Rightside/>
				</div>
			  <Switcher />
			<TabToTop/>
			<Footer />
			</div>
			</Provider>
			</>
		  );
		};
		export default App;

Spruha Layout Structure

The following _app.js 'All layouts present in the project will be listed in the _app.js file, and those layouts can be used globally in all companies utilizing the project'

Example Dashboard.layout = "Contentlayout"

_app.js

	
		import '../styles/globals.scss'
		import Contentlayout from '../shared/layout-components/layout/content-layout'
		import Landingpagelayout from '../shared/layout-components/layout/landingpage-layout'
		import Switcherlayout from '../shared/layout-components/layout/switcher-layout'
		import Authenticationlayout from '../shared/layout-components/layout/authentication-layout'

		const layouts = {
			Contentlayout: Contentlayout,
			Landingpagelayout: Landingpagelayout,
			Switcherlayout: Switcherlayout,
			Authenticationlayout: Authenticationlayout,
		 };

		 function MyApp({ Component, pageProps }) {
			const Layout = layouts[Component.layout] || ((pageProps) => <Component>{pageProps}</Component>);
		  return (
			<Layout>
			<Component {...pageProps} />
			  </Layout>
		  );
	}
		export default MyApp;