Admin Structure

This section will give you a brief description of our admin structure code.

1. Header Section : This is the default navbar section. It contains :

a. Sidebar toggle button.

b. Language Dropdown

c. Message Dropdown

d. Notification Dropdown

e. Search Bar

f. User Profile with Dropdown

Note:- These categories are defined by us and you can modify as per your needs :) 

<!--  Navbar Component  -->
<Header></Header>
==========================================================
                                            
<!--  BEGIN NAVBAR  -->
<div class="header-container fixed-top">
    <header class="header navbar navbar-expand-sm">
        <a href="javascript:void(0);" class="sidebarCollapse" data-placement="bottom"><svg> ... </svg></a>

        <ul class="navbar-nav flex-row ml-auto">
            ..............................
        </ul>
    </header>
</div>
<!--  END NAVBAR  -->

2. Main Container Section : The main container section includes overlay, sidebar and main content section.

a. Overlay Code

b. Sidebar Section

c. Main Content Section

d. Footer Section

<!--  BEGIN MAIN CONTAINER  -->
<div class="main-container" id="container">
    ...........
</div>
<!-- END MAIN CONTAINER -->

3. The Overlay : The overlay code as described above is placed inside the main container section : Points to be remember

a. Overlay :- The div with .overlay class is active when sidebar is open.

b. Search-Overlay :- The div with .search-overlay class is active when search is open. 

<!--  BEGIN OVERLAY  -->
<div class="overlay"></div>
<div class="search-overlay"></div>
<!-- END OVERLAY -->

4. Sidebar : This is the sidebar code. 

<!--  Sidebar Component  -->
<Sidebar></Sidebar>
==========================================================

<!--  BEGIN SIDEBAR  -->
<div class="sidebar-wrapper sidebar-theme">
    <nav id="sidebar">

        =======================

        =======================

    </nav>
</div>
<!--  END SIDEBAR  -->

5. Main Content : This is the Main Content code section.

a. You can see a div with .page-header class inside where you can write your own heading.

b. After this div you can see two div's with the same class .row .layout-spacing. This is the root structure where you can create widgets, charts, tables etc.

Note:- From the above b. point, we had mentioned two div's with the same class .row .layout-spacing. It is for the demo purpose only. You can create one, two or more div's as per your needs. 

<!--  BEGIN CONTENT PART  -->
<div id="content" class="main-content">
    <div class="layout-px-spacing">

        <div class="row layout-top-spacing">
            <div class="col-xl-12 col-lg-12 col-md-12 col-12 layout-spacing">
                ===========================
                ===========================
            </div>

        </div>
    </div>
</div>
<!--  END CONTENT PART  -->

6. Footer : This is the Footer code. It is placed outside the Main Container Section.

There are two section with the class .footer-section-1 and .footer-section-2.

a. Footer Section 1 :- Usually this section does not contain anything inside it, but it can be customized according to your needs. This means that you can add your own CSS style.

b. Footer Section 2 :- This section contains all the footer details that you can modify as per your needs.

Note:- From the above b. point, we had mentioned two div's with the same class .row .layout-spacing. It is for the demo purpose only. You can create one, two or more div's as per your needs. 

<!--  Footer Component  -->
<Footer></Footer>
==========================================================

<!--  BEGIN FOOTER  -->
<div class="footer-wrapper">
    <div class="footer-section">
        <p class="">Copyright © 2019-20 <a target="_blank" href="https://themeforest.net/user/sbthemes/portfolio">SBTHEMES</a>, All rights reserved.</p>
    </div>
    <div class="footer-section">
        
    </div>
</div>
<!--  END FOOTER  -->
The Combined Code

Now, after a brief description of our admin template. Below is the combined code of the snippets we have discuss above. 

<div>
    <!--  BEGIN NAVBAR  -->
    <Header></Header>
    <!--  END NAVBAR  -->

    <!--  BEGIN MAIN CONTAINER  -->
    <div class="main-container" id="container" :class="{ 'sidebar-closed sbar-open': !$store.state.is_show_sidebar }">
        <!--  BEGIN OVERLAY  -->
        <div class="overlay" :class="{ show: !$store.state.is_show_sidebar }" @click="$store.commit('toggleSideBar', !$store.state.is_show_sidebar)"></div>
        <div class="search-overlay" :class="{ show: $store.state.is_show_search }" @click="$store.commit('toggleSearch', !$store.state.is_show_search)"></div>
        <!-- END OVERLAY -->

        <!--  BEGIN SIDEBAR  -->
        <Sidebar></Sidebar>
        <!--  END SIDEBAR  -->

        <!--  BEGIN CONTENT AREA  -->
        <div id="content" class="main-content">
            <router-view>
                <!-- BEGIN LOADER -->
                <div id="load_screen">
                    <div class="loader">
                        <div class="loader-content">
                            <div class="spinner-grow align-self-center"></div>
                        </div>
                    </div>
                </div>
                <!--  END LOADER -->
            </router-view>

            <!-- BEGIN FOOTER -->
            <Footer></Footer>
            <!-- END FOOTER -->
        </div>
        <!--  END CONTENT AREA  -->

        <!-- BEGIN APP SETTING LAUNCHER -->
        <app-settings />
        <!-- END APP SETTING LAUNCHER -->
    </div>
</div>