Theme Structure & Setup

To understand the structure of the theme, you first need to explore how the layout functions. Navigate to src/layout/AdminLayout.tsx and open the file. Inside, you will find the following code:

Admin Layout

      
        
          return (
            <>
              {loading && <FullPageLoader />}
              <div className="glint-wrapper">
                <Sidebar />
                <div className="glint-sidebar-overlay" onClick={toggleSidebar}></div>
                <div className="glint-container">
                  <Header />
                  <div className="glint-content p-20 p-lg-30">
                    <Outlet />
                  </div>
                </div>
              </div>
              <Customizer />
            </>
          );
        }
      
    

This file defines the core structure of the theme.
- FullPageLoader is a global loader used across the theme (located in components/Global).
- .glint-wrapper contains the sidebar.
- .glint-container holds the header and the main content area.
- .glint-content renders the actual page content, while the sidebar and header remain consistent across all pages.
- Finally, the Customizer component is included (mainly for demo purposes). You may choose to keep or remove it based on your project needs.