# 2-Column Menu Tabs Page

## Overview

Responsive layout for a two-column page with multiple tabs. This page is ideal for an account or settings page. 

## Structure

* When this page is added to your app, it will come with four main groups:
  * **Group Main**\
    This group contains the responsive settings for all blocks. 
  * **Group Tabs main**\
    This group contains all the tabs content groups.
  * **Blocks container 860 (do not rename)**

    This group contains the responsive settings for all blocks on the page. Any new blocks should be added to this group.
  * **Group Side Portal Content**\
    This group contains all the menu navigation tabs. There are ten placeholder tabs that you can hide or show.
* This page comes with one popup:
  * **Popup Hidden Variables** contains two groups:
    * **var - Website object**\
      This group stores the website object (e.g., app name, primary color, and etc.)
    * **var - dummy data**\
      A placeholder group in case you want to use any hidden variable groups later.
    * **var - tab url parameter** - This group stores the tab name of which tab the current user is viewing
    * **var - show sidebar?** - This group includes conditional statements on whether or not to show/hide Group Side Portal. The sidebar will be hidden when the current page width is less than or equal to 824.
    * **var - show tabs content groups?** - This group includes conditional statements on whether or not to show/hide **Group Tabs main**. The tabs content group will be hidden when the *current page width is less than or equal to 824*.
* This block will come with one reusable element:
  * [**header**](https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/header)

## How to set up

* Show or hide any navigational menu tabs (e.g., **Group Nav Tab 2 -**) in the sidebar. To show a menu tab, check the box for *This element is visible on page load*.
  * Within **Group Side Portal Content**, you will find various groups called **Group Nav Tab 1**, **Group Nav Tab 2**, **Group Nav Tab 3**, and etc. To customize these tabs, simply update the text data source in these groups to the names of your tabs. 

![Show or hide the menu tabs](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MBhim00g7p1rm6BtfmW%2F-MBho-zL6qh5nQQozVsk%2FScreen%20Shot%202020-07-08%20at%202.44.03%20AM.png?alt=media\&token=27e71787-ea51-4bdf-acd1-6fa0bd7fc0a8)

![Enter tab name as data source](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MBhim00g7p1rm6BtfmW%2F-MBhpvglvtaPubHTO63U%2FScreen%20Shot%202020-07-08%20at%202.52.46%20AM.png?alt=media\&token=e4618014-e9eb-44d0-aa1f-94885d4a7a93)

* If you add more blocks to **Blocks container 860 (do not rename)**, you will need to resize **Group Main PLACEHOLDER** so that it is not overlapping with any other elements (for responsiveness).
* In the new blocks, you will need to replicate the header responsive settings and workflows from **Group Nav 1 Tab - Profile**:

1\) Copy **Group responsive** over and paste it to the block header

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MBhim00g7p1rm6BtfmW%2F-MBhpHo1bZJQAMS_EtzT%2FScreen%20Shot%202020-07-08%20at%202.49.13%20AM.png?alt=media\&token=a7b44c65-159a-4cc9-88d1-7489ff5f8626)

2\) Copy conditional statements and workflow from **Text profile** to your block title

![Copy conditional statements over](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MBhim00g7p1rm6BtfmW%2F-MBhwcTaFtuvdvfJUNk6%2FScreen%20Shot%202020-07-08%20at%203.22.05%20AM.png?alt=media\&token=45846d37-d429-43d3-98fc-635c33544f80)

![Copy workflows over](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MBhim00g7p1rm6BtfmW%2F-MBhy3vcXgZ_Zqpk0Zh1%2FScreen%20Shot%202020-07-08%20at%203.23.11%20AM.png?alt=media\&token=4d9d6bcf-2705-4c7f-9319-133c226a199a)

Doing the above will ensure that users can click on the block title on mobile to go back to the sidebar menu.

![Mobile view](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MBhim00g7p1rm6BtfmW%2F-MBhyG_D-6bwRgnjrdQg%2FScreen%20Shot%202020-07-08%20at%203.25.22%20AM.png?alt=media\&token=8336bb04-57c1-45ba-866c-809e55feea12)

![Mobile sidebar menu](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-MBhim00g7p1rm6BtfmW%2F-MBhyM2HlnM11qAvpgfj%2FScreen%20Shot%202020-07-08%20at%203.29.30%20AM.png?alt=media\&token=f81f0039-4c09-457a-826d-f31a1d6bfc3c)

## **Showing or hiding a block**

* For each block in **Blocks container 860 (do not rename)**, uncheck the box for *This element is visible on page load* and check the box for *Collapse this element's height when hidden*

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LchI03mUS8Jk-HtxYPU%2F-LchN-ZVHwxc-C3MZ7Ds%2FScreen%20Shot%202019-04-17%20at%203.15.59%20PM.png?alt=media\&token=f6b4f7cd-facc-42c6-b377-9f8ddce11786)

* For each block, go to the Conditional tab and add a conditional statement for when to show the block:\
  \&#xNAN;*var - tab url parameter's text is Group Nav 7/8/9/10 or 11's tab's text then This group is visible*

![](https://576109535-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LbzMeM9XfnblRd78nga%2F-LchI03mUS8Jk-HtxYPU%2F-LchNSDOdGVQtq3b5_Cr%2FScreen%20Shot%202019-04-17%20at%203.17.19%20PM.png?alt=media\&token=17a415e2-c69e-4261-acd0-99de1436e5d0)