Symfony Structure

File structure

We have used twig files.

{% include 'layouts/_main.html.twig' %}

<head>

    <meta charset="utf-8" />
    <title>{% block title %}Welcome{% endblock %} | Dosix - Admin & Dashboard Template
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="PeCommerce + Admin HTML Template" name="description" />
    <meta content="Themesbrand" name="author" />

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- Fonts css load -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link id="fontsLink" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    {% block stylesheets %}{% endblock %}
    {% include 'partials/_head-css.html.twig' %}

</head>

<body>
    {% block body %}

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

        {% include 'partials/_menu.html.twig' %}

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

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

                    {% block content %}{% endblock %}

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

            {% include 'partials/_footer.html.twig' %}

        </div>
        <!-- end main content-->

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

    {% include 'partials/_customizer.html.twig' %}

    {% include 'partials/_vendor-scripts.html.twig' %}

    {% block javascripts %}{% endblock %}

    {% endblock %}

</body>
</html>

Layout setup

You can set the default layout in the layouts/head-main.php file in the html tag.

<html data-layout="vertical" data-topbar="light" data-sidebar="dark" 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-layout-mode="light" To set Light layout mode.
data-layout-mode="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-topbar="light" To set the Light color of Topbar.
data-topbar="dark" To set the dark 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.
© Dosix.
Design & Develop by Themesbrand