Header & Sidebar Layout

The Goal

With Adapptio, you can construct layouts literally within a few minutes. This tutorial showing the most common design is a fixed header with a sidebar panel.

Typical example of the Header & Sidebar layout

What We Are Going to Do

Project Structure

• Application Header[Header]

  • Label[hdrLabel]

• Container[appContent]

  • Sidebar Layout[sidebar]

    • Content(Content)

      • Box[cntBox]

        • Text[cntText]

    • Content(Sidebar)

      • Box[sidebarPanel]

        • Text[cntSideBar]

View[appLayout]

1. Create a New Header and Sidebar

Let's create a basic sketch of Header&Sidebar layout.

1. Create a new View called appLayout.

2. Place a new Application Header to the canvas work-field and name it Header.

   1. Set up properties of the Header as a follows: Height -> Large; Horizontal Alignment -> Center; Vertical Alignment -> Middle; Background -> Light Gray

3. Right under Header put a new Container called it appContent and set up it Item Flex on Stretch.

4. Into the appContent place a new Sidebar Layout, name it sidebar, and set up Padding of the Main Content on Wide.

Current appLayout

Current Components

2. Place Content Boxes

Inside boxes serve as content elements separated between sidebar and content layouts.

1. Place a Box into the Content Container and name it cntBox.

   1. It's properties will be configured as follows: Background -> White; Shadow -> Large; Padding -> Wide; Item Flex -> Stretch

2. Place a second Box into the Content Sidebar, name it sidebarPanel and set up its properties.

   1. Background -> Gray; Foreground -> White; Padding -> Wide; Item Flex -> Stretch

3. Fill a Content (Optional)

If you like to obtain the same results as we do, continue with the following steps.

1. Put a Label into the Header, name it hdrLabel, and set up its properties as follows: Value -> "Addaptio Daily Planet"; Font Size -> XXXLARGE; Icon Name -> mdi/earth; Icon Size -> X Large; Icon Foreground -> RED

2. Place a Text into the sidebarPanel, name it cntSideBar, and following configuration: Value -> [copy text from tab bellow]; Markdown -> true; Markdown Blocks -> true

3. Same do with a Text placed into cntBox, name it cntText, and configure as follows: Value -> [copy text from tab bellow]; Markdown -> true; Markdown Blocks -> true

SideBar Markdown

#### Tum rapta nostris
##### Giganteo satis
## Tecta qui
## Nutrix
#### Praelate potest
##### nuper sed fama

Content Markdown

4. Switching Sidebar Position

If we need to switch the sidebar panel position for a specific reason, it can be simply done with one click.

1. Switch on the sidebar and change Sidebar Position -> Right.

Switching position of the Sidebar

The Conclusion

As you tried, layout designing is fast and intuitive, and very soon, you will shape your manuscript using it for your applications. Try to make your layout from scratch.