Neon | Layout API (Right Sidebar)

- Dashboard
  - Dashboard 1
  - Dashboard 2
  - Dashboard 3
  - Skins
    - Black Skin
    - White Skin
    - Purple Skin
    - Cafe Skin
    - Red Skin
    - Green Skin
    - Yellow Skin
    - Blue Skin
    - Facebook Skin New
  - What's New v1.8
- Layouts
  - Layout API
  - Collapsed Sidebar
  - Fixed Sidebar
  - Chat Open
  - Horizontal Menu Boxed
  - Horizontal Menu Fluid
  - Mixed Menus
  - Right Sidebar
  - Both Menus (Right Sidebar)
  - Page Enter Transitions
    - Fade Scale
    - Left In
    - Right In
    - Fade Only
  - Boxed Layout
- Frontend
- UI Elements
  - Panels
  - Tiles
  - Buttons
  - Typography
  - Tabs & Accordions
  - Tooltips & Popovers
  - Navbars
  - Breadcrumbs
  - Badges & Labels
  - Progress Bars
  - Modals
  - Blockquotes
  - Alerts
  - Pagination
- Mailbox 8
  - Inbox
  - Compose Message
  - View Message
- Forms
  - Basic Elements
  - Advanced Plugins
  - Form Wizard
  - Data Validation
  - Input Masks
  - Sliders
  - File Upload
  - Editors
- Tables
  - Basic Tables
  - Data Tables
- Extra New Items
  - Icons 3
    - Font Awesome
    - Entypo
    - Glyph Icons
  - Portlets
  - Maps
    - Google Maps
    - Vector Maps
  - Chat API
  - Calendar
  - Calendar 2 New
  - Notes
  - Lockscreen
  - Login
  - Register
  - Invoice
  - Gallery
    - Albums
    - Single Album
  - Members
  - Profile
  - 404 Page
  - Blank Page
  - Timeline
  - Comments
  - Timeline Centered
  - Tocify
  - Notifications
  - New Post
  - Settings
  - Scrollbox
  - Image Crop
  - Search Page
  - Language Selector
  - Nestable Lists
  - File Tree
  - Load Progress
- Charts
- Menu Levels
  - Menu Level 1.1
  - Menu Level 1.2
  - Menu Level 1.3
    - Menu Level 2.1
    - Menu Level 2.2
      - Menu Level 3.1
        - Menu Level 4.1
      - Menu Level 3.2
    - Menu Level 2.3

- John Henderson
  - Edit Profile
  - Inbox
  - Calendar
  - Tasks

- 6

  - Mark all Read You have 3 new notifications.

  - - New user registered 30 seconds ago
    - Someone special liked this 2 minutes ago
    - Privacy settings have been changed 3 hours ago
    - John cancelled the event 9 hours ago
    - The server is status is stable yesterday at 10:30am
    - New comments waiting approval last week
  - View all notifications
- 10
  - - Luc Chartier - yesterday This ain’t our first item, it is the best of the rest.
    - Salma Nyberg - 2 days ago Oh he decisively impression attachment friendship so if everything.
    - Hayden Cartwright - a week ago Whose her enjoy chief new young. Felicity if ye required likewise so doubtful.
    - Sandra Eberhardt - 16 days ago On so attention necessary at by provision otherwise existence direction.
  - All Messages
- 1

  - You have 6 pending tasks

  - - Procurement 27% 27% Complete
    - App Development 83% 83% Complete
    - HTML Slicing 91% 91% Complete
    - Database Repair 12% 12% Complete
    - Backup Create Progress 54% 54% Complete
    - Upgrade Progress 17% 17% Complete
  - See all tasks

- Language:
  - Deutsch
  - English
  - François
  - Shqip
  - Español
- Chat 0
- Log Out

1. Home
2. Layouts
3. Layout API

# 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

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