HTML Structure

Laravel Folder Structure

Toner
- app
  - http
    - controllers
      
      auth
      
      controller.php
      
      HomeController.php TonerController.php
  - bootstrap
  - config
  - database
  - lang
  - public
  - resources
    - fonts
    - images
    - js
    - json
    - lang
    - libs
    - scss
    - views
      
      auth
      
      components
      
      components-layouts
      
      components-pages
      
      error
      
      layouts
      
      all blade pages
  - routes
  - storage
  - tests
  - .editorconfig
  - .env
  - .rtlcsssrc
  - artisan
  - composer.json
  - package-lock.json
  - package.json
  - phpunit.xml
  - README.md
  - server.php
  - vite.config.js

Laravel file structure (Backend + Components)

Overview


@extends("layouts.master")

<head>

    @yield('title')

    @include("layouts.head-css")

</head>

<body>

    <!-- Begin page -->
    <div id="layout-wrapper">

        @include("layouts.topbar")
        @include("layouts.sidebar")

        <!-- ============================================================== -->
        <!-- Start right Content here -->
        <!-- ============================================================== -->
        <div class="main-content">

            <div class="page-content">
                <div class="container-fluid">

                    @yield("content")

                </div>
                <!-- container-fluid -->
            </div>
            <!-- End Page-content -->

            @include("layouts.footer")
        </div>
        <!-- end main content-->

    </div>
    <!-- END layout-wrapper -->

    @include("layouts.customizer")

    @include("layouts.vendor-scripts")

    <!-- App js -->
    <script src="build/js/app.js">

</body>
</html>

Layout setup (Backend + Components)

You can set the default layout in the resources/view/layouts/master.blade.php file in the html tag.


                                    <html data-layout="vertical" data-topbar="light" data-sidebar="light" data-sidebar-size="lg">

data-layout="vertical"	To set default layout as Vertical
data-layout="horizontal"	To set default layout as Horizontal
data-layout="twocolumn"	To set default layout as Two column
data-bs-theme="light"	To set Light layout mode.
data-bs-theme="dark"	To set Dark layout mode.
data-sidebar-size="lg" data-layout-width="fluid"	To set layout width Fluid and left sidebar large.
data-sidebar-size="sm-hover" data-layout-width="boxed"	To set layout width Boxed and left sidebar on hover show menu.
data-layout-position="fixed"	To set layout position Fixed.
data-layout-position="scrollable"	To set layout position Scrollable.
data-topbar="light"	To set the Light color of Topbar.
data-topbar="dark"	To set the Dark color of Topbar.
data-topbar="brand"	To set the Brand color of Topbar.
data-sidebar-size="lg"	To set the Large left sidebar.
data-sidebar-size="md"	To set the Compact left sidebar.
data-sidebar-size="sm"	To set the Icon view left sidebar.
data-sidebar-size="sm-hover"	To set the Icon hover left sidebar.
data-layout-style="default"	To set the Default layout.
data-layout-style="detached"	To set the Detached layout.
data-sidebar="light"	To set the Light color of left Sidebar.
data-sidebar="dark"	To set the Dark color of left Sidebar.
data-sidebar="gradient"	To set the Gradient color of left Sidebar.
data-sidebar="gradient-2"	To set the Gradient-2 color of left Sidebar.
data-sidebar="gradient-3"	To set the Gradient-3 color of left Sidebar.
data-sidebar="gradient-4"	To set the Gradient-4 color of left Sidebar.
data-sidebar-image="none"	To Disable image on left Sidebar.
data-sidebar-image="img-1"	To set the img-1 Image of left Sidebar.
data-sidebar-image="img-2"	To set the img-2 Image of left Sidebar.
data-sidebar-image="img-3"	To set the img-3 Image of left Sidebar.
data-sidebar-image="img-4"	To set the img-4 Image of left Sidebar.
data-preloader="enable"	To enable the preloader on the Page.
data-preloader="disable"	To disable the preloader on the Page.