Neon | Layouts

- John Henderson

- 6
- 10
- 1

- Language:
- Chat 0
- Log Out

# Layout API

Neon Theme comes with pre-defined functions to handle layout behaviors. You have tens of options to make your theme layout look differently. In this page, you are going to see how you can show, hide, remove or add layout elements. In order to customize the layer JS file `neon-api.js` is required to load.

Go to API Functions Try Right Sidebar

### Sidebar Collapsing

Its easy to use, you just have to call one function `toggle_sidebar_menu(animate)`.

Toggle Sidebar Force Show Sidebar Force Hide Sidebar

#### With Animation

You may apply animation to these functions by sending `animate` parameter as true, see it in action:

Toggle Sidebar w/ Animation Force Show Sidebar Force Hide Sidebar

#### Incorporating Chat API

This functions can be used only when you have included Chat on your theme.

Toggle Chat + Sidebar Toggle Chat + Sidebar w/ Animation
For more options about Chat API and see how to implement it click here to read more.

### See how its implemented

Code for Toggle Sidebar

    toggle_sidebar_menu(false);

Code for Force Show Sidebar

    show_sidebar_menu(false);

Code for Force Hide Sidebar

    hide_sidebar_menu(false);

Code for Toggle Sidebar w/ Animation

    toggle_sidebar_menu(true);

Code for Force Show Sidebar (animation)

    show_sidebar_menu(true);

Code for Force Hide Sidebar (animation)

    hide_sidebar_menu(true);

### Markup

Layout Markup is applied for one reason: To enable the sidebar collapsing/expanding. The symbol next to the logo applies this markup:

    <!-- logo collapse icon -->
    		<div class="sidebar-collapse">
    			<a href="#" class="sidebar-collapse-icon with-animation"><!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition -->
    				<i class="entypo-menu"></i>
    			</a>
    		</div>

If you remove this markup, users will not be able to handle the sidebar visibility, its up to you to decide whether to insert or remove this feature.

### Layout Variants

- Collapsed Sidebar
- Collapsed Sidebar & Chat Opened
- Expanded Sidebar & Chat Opened
- Expanded Sidebar without Collapse Feature
- Horizontal Menu & Chat Opened
- Fixed Sidebar
- Both Menus
- Both Menus & Logo Width Fit with Sidebar
- Both Menus & Collapsed Sidebar
- Right Sidebar New
- Right Sidebar Collapsed New
- Right Sidebar + Chat Visible New
- Both Menus (Right Sidebar) New
- Both Menus (Right Sidebar Collapsed) New
- Boxed Layout New

### API Functions

Function Name | Description and Usage Details
--- | ---

#### show_sidebar_menu(animate)

Shows left sidebar (if not already shown) and if you have specified the parameter `animate` as `true` will apply smooth animation on transition.

#### hide_sidebar_menu(animate)

Hide left sidebar (if not already hidden) and if you have specified the parameter `animate` as `true` will apply smooth animation on transition.

#### toggle_sidebar_menu(animate)

Will use the two above functions, but firstly it will decide on their current state. The `animated` parameter will simply be passed to the respective functions.

## Chat 0

Favorites Catherine J. Watkins Nicholas R. Walker Susan J. Best Brandon S. Young Fernando G. Olson
Work Robert J. Garcia Daniel A. Pena Rodrigo E. Lozano
Social Velma G. Pearson Margaret R. Dedmon Kathleen M. Canales Tracy J. Rodriguez

- Art Ramadani

  Are you here?

  09:00
- Catherine J. Watkins

  This message is pre-queued.

  09:25
- Catherine J. Watkins

  Whohoo!

  09:26
- Catherine J. Watkins

  Do you like it?

  09:27

- Daniel A. Pena

  I am going out.

  08:21
- Daniel A. Pena

  Call me when you see this message.

  08:27