# App layout

Setup the basic look of an app with out of box sidebar and header functionalities

This component is intended to be used as a starting point when setting up the most common user interface – a work area with sidebar and header.

All parts of this component are configurable through props and slots.

It is built so that offers the default collapse sidebar button, which you can replace at any time with custom implementation. Although collapse functionality is offered internally within this component, it is strongly recommended that you create your own using Vuex store, for example, as this will have multiple benefits in the long run.

This component has two slots – sidebar and header, and if you leave out any of them it will not render them.

If you want to have similar UI pattern but have the header take the full width of the screen, use the prop header-on-top.

In the example below, you can see the most basic setup of this component.

<bdn-app-layout class="custom-app-layout" :sidebar-width="150">
  <div slot="header" class="header">
    <h6 class="m-0">Header area</h6>
  </div>
  <div slot="sidebar" class="sidebar">
    <h6 class="mt-3 text-center">Sidebar area</h6>
  </div>
  <div>
    <h6 class="mt-5 text-center">Work area</h6>
  </div>
</bdn-app-layout>

# Slot reference

Slot	Description
header	Place your custom HTML or components in a space that will be fixed to the top of the viewport, serving as an app header. If you don’t include this slot in `<bdn-app-layout>` header will not be visible.
sidebar	Place your custom HTML or components in a space that will be fixed to the left side of the viewport, serving as an app sidebar.If you don’t include this slot in `<bdn-app-layout>` sidebar will not be visible.
default	The default slot serves as a main view area and will hold all the components that you include outside of the header and sidebar scoped slots. Because the header and sidebar are fixed and have their own width and height, the main area will take that into account and have it’s padding set accordingly. For example, when present, the default height of header slot is 50px, and by default the main area will have padding-top set to 50px. Changing the header height will cause the padding of the main area to change. Not including the header slot will result in main area having the padding-top set to 0.

# Props reference

Prop	Type	Default	Accepts	Description
`header-on-top`	Boolean	false	true/false	Sets the header over the sidebar so it takes up the 100% width of the parent container
`app-version`	String	null	Any string	Adds the text in footer before Badin Soft link and year
`sidebar-collapsed`	Boolean	false	true/false	If you are using your own implementation of collapsing sidebar, for example, using Vuex so you can save the state of the sidebar after page refresh, this prop is used to set the state of whether the sidebar is collapsed or not. When not present, the sidebar will use the internal collapsed state settings.
`sidebar-width`	Number	240	Any number	The sidebar width when it’s not collapsed. This value also influences the padding of the main area.
`sidebar-collapsed-width`	Number	60	Any number	The sidebar width when collapsed
`mobile-sidebar-breakpoint`	String	sm	exsm sm md	CSS defined breakpoint when the sidebar should become the “mobile version”, which means it will be hidden from the viewport and open when clicking the sidebar menu in header, covering the rest of the main view. By default, the sidebar will become mobile on sm breakpoint (768px). Not really tested yet, so avoid using it for now.
`header-height`	Number	50	Any number	If the header slot is present, this will determine it’s height in pixels.
`custom-collapse-button`	Boolean	false	true/false	If you want to use your own collapse buttons or place them somewhere other than the default buttons, set this to true. It will hide the default collapse buttons on header and mobile close button in sidebar.

# Events reference

Event	Description
`sidebar-close`	Emitted when the sidebar state is changed. Use it to catch the change and call a method that performs some action, for example, commits the state into Vuex.

← Global configuration Avatar →