diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro index 8ec25dedf..89eb1f66a 100644 --- a/src/html/components/dashboard/_sidenav.astro +++ b/src/html/components/dashboard/_sidenav.astro @@ -196,6 +196,12 @@ const htmlPath = convertPathToHtml(path)

Installation

+
  • + + +

    Layout

    +     +
  • diff --git a/src/html/pages/docs/layout.astro b/src/html/pages/docs/layout.astro new file mode 100644 index 000000000..66f33c601 --- /dev/null +++ b/src/html/pages/docs/layout.astro @@ -0,0 +1,77 @@ +--- +import Head from "@components/_head.astro"; +import Footer from "@components/dashboard/_footer.astro"; +import Topbar from "@components/dashboard/_topbar.astro"; +import Sidenav from "@components/dashboard/_sidenav.astro"; +import Scripts from "@components/_scripts.astro"; +const title = "Layout | AdminLTE 4"; +const path = '../../../dist' +const mainPage = "docs"; +const page = "layout"; +--- + + + + + + + +
    + + + +
    +
    +
    +
    +
    +

    Layout

    +
    +
    +
      +
    1. Docs
      2. +
    2. + Layout +
      3. +
    +
    +
    +
    +
    + +
    +
    +
    +
    Tips
    +

    The starter page is a good place to start building your app if you’d like to start from scratch.

    +
    + +

    The layout consists of five major parts:

    +
      +
    • Wrapper .app-wrapper . A div that wraps the whole site.
      • +
    • Main Header .app-header . Contains the logo and navbar.
      • +
    • Main Sidebar .app-sidebar . Contains the sidebar user panel and menu.
      • +
    • Content .app-main . Contains the page header and content.
      • +
    • Main Footer .app-footer . Contains the footer.
      • +
    + +

    Layout Options

    +

    AdminLTE v4 provides a set of options to apply to your main layout. Each one of these classes can be added to the body tag to get the desired goal.

    +
      +
    • Fixed Sidebar: use the class .layout-fixed to get a fixed sidebar.
      • +
    • Collapsed Sidebar: use the class .sidebar-expand-lg .sidebar-mini .sidebar-collapse to have a collapsed sidebar upon loading.
      • +
    +
    + +
    + +
    + + +
    +
    + + + + +