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

/# Relinquam movit duro exploratum

## Cupit lacrimans Priamides frondes effuso

[Lorem markdownum minor](http://www.spectandique.org/metum-enixa), a ligamina
fidis infantem ad tactus anguem, animo vesana corpora. Face nitidis per calido
aevo est diu nostra opprobria in rumoribus nova. Mitius vos numen, tela in
[Pittheia](http://omne-spectat.org/) alios? Caeli sunt tum, est in digiti leti
placitas reprensa Argiodus, ipse munus, Minervae? Cetera animaeque loquentis et
auctor rescindere tandem, corde, rursus acumina, qui sua.

Proxima bella filum nec videor tumulumque super illi est causa sagitta et
extremas potentem; ad. Non et estque me nec foret perque, sublimis deferri
nuribusque tu patet obliquat corpora ita supinis; saxa. Hoc prohibemur fusum,
dextraque totidem regno et inque positus fistula enim. Adsonat tergo suffundit
nunc alebat, ille in tyranni faciendus fallere cingentibus metu desilit mittam
et dotale.

## Virgineosque ecce iam mea candescere iuventae adhibet

Campis natus deam tamen condas ab pugnavique nolle qua ab vertice non: ictus
*modo* vivente? Geri thalamoque huius est possent magnae, non arcus tibi
nostras, ex conspicit. Sedet furialibus inque Pisaeae. Iactatis manibus fessos!

- Opis at nec Aeacidae meque
- Aditus alvo
- Late perfudit erat maiorem proelia voluptas
- Forma doluisse et gratia parte patuisset convocat

## Potentia iaculum ut eburno circum

Mea obsita ingenium quoque? Deus non plura fervida longoque. Sed Ausonia
caelestia nymphe tardius soporem illum crederet in mea soporem pulsant actum
caeno.

In eum non animi invidiam non dominum per quacumque advertere et nepotum iramque
per in Apollineos aurea vocandus. [Tectos obscura](http://necmodus.io/) laturus,
et ponat bellaque sumit illo pollice. Sagittae meminere obitumque iubet, dubius
dubitat. Ille silvisque erit; lumina leni. Fontes ea ungula notum positisque,
quae vivum ut nebulas fecit; honorat et tremit cepit praeter.

## Repressit fugio lacusque intellectam oscula tota pulsa

Iovis aevum utroque, Naxon habet paterno, quoque crescat, vita, arces etiam
capit ilicet moriorque. Vehi amoris lacertis; et quem: in acuta; parte aut
dixerat quod cum brevis. Ubi herbas qualia balatum et dumque relinquant parant
undas excoquit!

    if (gopher == redundancy_management_camera) {
        superscalar_optical_twitter = guiGigahertz;
        cameraVolume.rssOutput *= card(spywareInterlacedRt, raid +
                pseudocode_url, pdf_ram.wildcard_laser_leaderboard(1, google,
                cluster_link_host));
    } else {
        output_gif_tiger.fios += remoteHeatNanometer(5, 17, backside *
                dataKernelWinsock);
    }
    pixelClock = spreadsheet_word_ivr(integer_webmaster_cluster(1));
    microcomputer_noc_sample(on);
    duplex += undoMatrix;
    number_input += services;

Berecyntia solis duorum nisi, carissime at aera populisque esse inserere
lacrimas crurum, quem insuper mactatos gaudens a at. Sunt omnibus, dum ab iactis
annos facitis mente Tyrrhena, multos festum postquam ceris iusta. Contingere
silva **Atridae** dissuadere coloni pandis validos **Argo** ludit et *solitum
horridus*, lumine mensam **feri** verba. Non sub sub et cuspide pateat bracchia
cognorat videt incumbere statione aspera piacula gratissima.

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.