Lorax - angular 18+ Admin Dashboar Template

You can see following folder structure of app folder in starter template.


main/
├── .angular
├── node_modules
├── src/
|   ├── app/
|   |   ├── authentication/
|   |   ├── config/
|   |   ├── core/
|   |   ├── layout/
|   |   ├── shared/
|   |   ├── app.component.html
|   |   ├── app.componentscss
|   |   ├── app.component.spec.ts
|   |   ├── app.component.ts
|   |   ├── app.config.ts
|   |   └── app.routes.ts
|   ├── assets/
|   |   └── .gitkeep
|   ├── environments/
|   |   ├── environment.development.ts
|   |   └── environment.ts
|   ├── index.html
|   ├── main.ts
|   ├── styles.scss
├── .eslintrc.json
├── angular.json
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json

Folder	Description
`authentication`	All authentication pages are placed here like signin, signup etc.
`config`	Template theme Configurations file `config.service.ts` in this folder. You can change theme settings like light or dark template from here. For more details please scroll down.
`core`	The Core Module is a module we create to define common services, models, interceptor and guard. The services defined in the core module are instantiated once. For more details please scroll down.
`layout`	You can find layout related modules here like header, sidebar, setting sidebar etc.
`shared`	We create it to define common components and other modules that we need to import inside every other module of our application, so you do not need to import them again and again (like the Material Components). We only need to add the Shared module to each module to access to common components.

For theme related configurations changes, you have to just change in one file config.service.ts. You can find config file in config folder.

Note: we store theme related data in localstorage in browser, so whenever you chagne in config file please clear your browser data first.

                                    
    this.configData = {
        layout: {
            rtl: false, // options:  true & false
            variant: 'dark', // options:  light & dark
            theme_color: 'black', // options:  white, cyan, black, purple, orange, green, red
            logo_bg_color: 'black', // options:  white, cyan, black, purple, orange, green, red
            sidebar: {
                collapsed: false, // options:  true & false
                backgroundColor: 'dark', // options:  light & dark
            }
        }
    }

Options	Description
`rtl`	For RTL layout set it to `true`, for LTR layout set it to `false.`
`varient`	For use light template layout value is `light` & for dark template use `dark`in value.
`theme_color`	You have multiple theme options, you can chose any theme color from `white, black, purple, blue, cyan, green, orange`.
`logo_bg_color`	You have multiple logo background options, you can chose any theme color from `white, black, purple, blue, cyan, green, orange`.
`collapsed`	Set `true` for collapsed sidebar and `false` for regular sidebar.
`backgroundColor`	You can set sidebar background color `light` for white sidebar background and `dark` for dark sidebar background.


core/
├── guard/
├── interceptor/
├── models/
├── service/
├── core.module.ts

Options	Description
`guard`	This folder is used for auth guard and import guard, you can find related files like `auth.guard.ts` & `module-import.guard.ts` here.
`interceptor`	You can see interfeptor files here. You can see files for error and jwt interceptor, also find a file `fake-backend.ts` for dummy data.
`models`	All enum and class files for USER, ROLE & CONFIG are install here.
`service`	All singleton services are placed in service directory.


layout/
├── app-layout/
├── header/
├── page-loader/
├── right-sidebar/
├── sidebar/
├── layout.module.ts

Options	Description
`app-layout`	Used for Seperate authentication pages and main content pages. You can find two layout compent here auth-layout & main-layout.
`header`	Header or navbar code is written here.
`page-loader`	Loading spinner code is here, we used ngx-spinner for loading spinner.
`right-sidebar`	Config sidebar code is written here.
`sidebar`	You can find main sidebar menu code in this folder.


src/
├── app/
|   ├── app.component.html
|   ├── app.componentscss
|   ├── app.component.spec.ts
|   ├── app.component.ts
|   └── app.config.ts
|   └── app.routes.ts
├── assets/
|   └── .gitkeep
├── environments/
|   ├── environment.development.ts
|   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── styles.scss


main/
├── .angular
├── node_modules
├── src/...
├── .editorconfig
├── .eslintrc.json
├── angular.json
├── package.json
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json


scss/
├── apps/
├── browser/
├── common/
├── components/
├── fonts/
├── pages/
├── plugins/
├── theme/
├── ui/
├── style.scss

App Folder Structure

Config Folder

Core Folder

Layout Folder

Folder Structure

Src Folder Structure

root Folder Structure

Scss Folder Structure