# 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](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2F2gPAk3gOx9ys1E77Vrtm%2Fimage.png?alt=media\&token=776619ca-cfe1-4faf-8e0e-a777da2ff3b8)

### What We Are Going to Do

{% tabs %}
{% tab title="Project Structure" %}

* [ ] Application Header\[`Header`]
  * [ ] Label\[`hdrLabel`]
* [ ] Container\[`appContent`]
  * [ ] Sidebar Layout\[`sidebar`]
    * [ ] Content(*Content*)
      * [ ] Box\[`cntBox`]
        * [ ] Text\[`cntText`]
    * [ ] Content(*Sidebar*)
      * [ ] Box\[`sidebarPanel`]
        * [ ] Text\[`cntSideBar`]
          {% endtab %}

{% tab title="View\[appLayout]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FFrW8qpp79EKSMA4pllD5%2Fimage.png?alt=media\&token=e77cfe96-2bc1-413e-87ff-3e404a0417c6)
{% endtab %}
{% endtabs %}

### 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`. 

{% tabs %}
{% tab title="Current appLayout" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fu06DxnjoHENikb8IiyJU%2Fimage.png?alt=media\&token=7f8e2d4a-f409-4428-8762-de8650eb4a57)
{% endtab %}

{% tab title="Current Components" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FgnhmeRZaI9bWY8mKkDke%2Fimage.png?alt=media\&token=000d2a18-33e4-4390-8958-f4151c69c483)
{% endtab %}
{% endtabs %}

### 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`

{% tabs %}
{% tab title="SideBar Markdown" %}

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

{% endtab %}

{% tab title="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.
```

{% endtab %}
{% endtabs %}

### 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](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fi439HFeUk3tJ4xKB8CvU%2Fimage.png?alt=media\&token=90e79cbb-393d-445b-bc2a-da8c90a54e9e)

### 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adapptio.com/working-with-adapptio/how-to/layouts/header-and-sidebar-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.