bootstrap-layout
Version:
Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities
484 lines (427 loc) • 18.2 kB
HTML
Sidebar -->
<div class="sidebar sidebar-{{ position or 'left' }}{% if !visible || visible !== 'none' %} sidebar-visible-{{ visible | join(' sidebar-visible-') or 'md-up' }}{% endif %} sidebar-size-{{ size or '3' }}{% if size_xs %} sidebar-size-{{ size_xs }}-xs{% endif %}{% if size_xs_up %} sidebar-size-{{ size_xs_up }}-xs-up{% endif %}{% if size_sm %} sidebar-size-{{ size_sm }}-sm{% endif %}{% if size_sm_up %} sidebar-size-{{ size_sm_up }}-sm-up{% endif %}{% if size_md %} sidebar-size-{{ size_md }}-md{% endif %}{% if size_md_up %} sidebar-size-{{ size_md_up }}-md-up{% endif %}{% if size_lg %} sidebar-size-{{ size_lg }}-lg{% endif %}{% if size_lg_up %} sidebar-size-{{ size_lg_up }}-lg-up{% endif %}{% if size_xl %} sidebar-size-{{ size_xl }}-xl{% endif %}{% if size_xl_up %} sidebar-size-{{ size_xl_up }}-xl-up{% endif %} {{ style or 'sidebar-light bg-white' }}{% if extras %} {{ extras }}{% endif %}" id="sidebar-blank-{{ id or '1' }}" data-scrollable data-position="{{ position or 'left' }}" data-size="{{ size or '3' }}"{% if size_xs %} data-size-xs="{{ size_xs }}"{% endif %}{% if size_xs_up %} data-size-xs-up="{{ size_xs_up }}"{% endif %}{% if size_sm %} data-size-sm="{{ size_sm }}"{% endif %}{% if size_sm_up %} data-size-sm-up="{{ size_sm_up }}"{% endif %}{% if size_md %} data-size-md="{{ size_md }}"{% endif %}{% if size_md_up %} data-size-md-up="{{ size_md_up }}"{% endif %}{% if size_lg %} data-size-lg="{{ size_lg }}"{% endif %}{% if size_lg_up %} data-size-lg-up="{{ size_lg_up }}"{% endif %}{% if size_xl %} data-size-xl="{{ size_xl }}"{% endif %}{% if size_xl_up %} data-size-xl-up="{{ size_xl_up }}"{% endif %}{% if visible %} data-visible="{{ visible | join(' ') }}"{% endif %}{% if layout %} data-layout="{{ layout | join(' ') }}"{% endif %}>
{% if sm_brand !== false %}
<!-- Brand -->
<a href="#" class="sidebar-brand {{ sm_brand_opt }}">Brand</a>
{% endif %}
{% if sm_brands %}
<div class="sidebar-heading m-a-0 sidebar-p-t">Span</div>
<span class="sidebar-brand">Brand</span>
<div class="sidebar-heading m-a-0">Anchor</div>
<a href="#" class="sidebar-brand">Brand</a>
<div class="sidebar-heading m-a-0">Border</div>
<a href="#" class="sidebar-brand sidebar-brand-border">Brand</a>
<div class="sidebar-heading">Background & border</div>
<a href="#" class="sidebar-brand sidebar-brand-border sidebar-brand-bg">Brand</a>
<div class="sidebar-heading m-a-0">Wrapper</div>
<div class="sidebar-block sidebar-p-t">
<a href="#" class="sidebar-brand">Brand</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="sidebar-heading">Wrapper bg & border</div>
<div class="sidebar-block sidebar-p-y sidebar-brand-bg sidebar-brand-border">
<a href="#" class="sidebar-brand">Brand</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
{% endif %}
{% if sm_heading !== false %}
<div class="sidebar-heading">Heading</div>
{% endif %}
<!-- Menu -->
{% if sm_basic %}
<ul class="sidebar-menu {{ sm_basic_opt or 'sm-active-button-bg' }}">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#">Active menu button</a>
</li>
</ul>
{% endif %}
{% if sm_basic_mixed %}
<ul class="sidebar-menu {{ sm_basic_mixed_opt or 'sm-active-button-bg' }}">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">menu</i> Menu icon</a>
</li>
</ul>
{% endif %}
{% if sm_basic_icons %}
<ul class="sidebar-menu {{ sm_basic_icons_opt or 'sm-active-button-bg' }}">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">home</i> Menu icon</a>
</li>
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">menu</i> Menu icon</a>
</li>
</ul>
{% endif %}
{% if sm_style %}
<div class="sidebar-heading sidebar-p-t">Mixed</div>
<p>Regular size menu items with icons block, align icons to the right and active item background and condensed submenu with icons block</p>
<ul class="sidebar-menu sm-icons-right sm-icons-block sm-active-button-bg">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">
<span class="label sidebar-menu-label label-default">50</span>
<i class="sidebar-menu-icon material-icons">home</i>
Menu icon
</a>
</li>
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#">
<span class="label sidebar-menu-label label-default">50</span>
Menu button
</a>
</li>
<li class="sidebar-menu-item open">
<a class="sidebar-menu-button" href="#" data-toggle="sidebar-collapse">
<i class="sidebar-menu-icon material-icons">menu</i>
Submenu
</a>
<!-- Submenu -->
<ul class="sidebar-submenu sm-condensed sm-icons-block">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">
<span class="label sidebar-menu-label label-default">50</span>
<i class="sidebar-menu-icon material-icons">home</i>
Menu icon
</a>
</li>
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">
<i class="sidebar-menu-icon material-icons">menu</i>
Menu icon
</a>
</li>
</ul>
</li>
</ul>
<div class="sidebar-heading">Indent submenu items</div>
<p>Apply a larger horizontal spacing to submenu items.</p>
<ul class="sidebar-menu">
<li class="sidebar-menu-item open">
<a class="sidebar-menu-button" href="#" data-toggle="sidebar-collapse">Submenu button</a>
<ul class="sidebar-submenu sm-condensed sm-indent">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
</ul>
</li>
</ul>
<div class="sidebar-heading">Menu border</div>
<p>Apply a border bottom to the menu.</p>
<ul class="sidebar-menu sm-bordered">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">
<span class="sidebar-menu-label label label-default">new</span>
<i class="sidebar-menu-icon material-icons">home</i> Menu button
</a>
</li>
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">menu</i> Menu button</a>
</li>
</ul>
<div class="sidebar-heading">Menu item border</div>
<p>Apply a border bottom to menu items.</p>
<ul class="sidebar-menu sm-item-bordered">
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">
<span class="sidebar-menu-label label label-default">50</span>
Menu button
</a>
</li>
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
</ul>
<div class="sidebar-heading">Submenu item border</div>
<p>Apply a border bottom to submenu items.</p>
<ul class="sidebar-menu">
<li class="sidebar-menu-item open">
<a class="sidebar-menu-button" href="#" data-toggle="sidebar-collapse">Submenu button</a>
<ul class="sidebar-submenu sm-condensed sm-item-bordered">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
</ul>
</li>
</ul>
<div class="sidebar-heading">Active background</div>
<p>Apply a background color to the active menu item.</p>
<ul class="sidebar-menu sm-active-button-bg">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">home</i> Menu button</a>
</li>
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#">
<span class="sidebar-menu-label label label-default">3</span>
<i class="sidebar-menu-icon material-icons">menu</i>
Menu button
</a>
</li>
</ul>
<div class="sidebar-heading">Condensed</div>
<p>Menu buttons with smaller spacing.</p>
<ul class="sidebar-menu sm-condensed">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#">Menu button</a>
</li>
</ul>
<div class="sidebar-heading">Icons right</div>
<p>Align the icons to the right</p>
<ul class="sidebar-menu sm-icons-right">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#">
<span class="sidebar-menu-label label label-default">new</span>
<i class="sidebar-menu-icon material-icons">home</i> Menu button
</a>
</li>
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">menu</i> Menu button</a>
</li>
</ul>
<div class="sidebar-heading">Icons block</div>
<p>Wrap the icons into a square block.</p>
<ul class="sidebar-menu sm-icons-block">
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">home</i> Menu button</a>
</li>
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">menu</i> Menu button</a>
</li>
</ul>
<div class="sidebar-heading">Mixed</div>
<p>Condensed and bordered menu items, align icons to the right and active item background.</p>
<ul class="sidebar-menu sm-icons-right sm-condensed sm-item-bordered sm-active-button-bg">
<li class="sidebar-menu-item active">
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">home</i> Menu button</a>
</li>
<li class="sidebar-menu-item">
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">menu</i> Menu button</a>
</li>
</ul>
{% endif %}
<!-- // END Menu -->
{% if sm_collapse %}
<!-- Sidebar menu -->
<ul class="sidebar-menu {{ sm_collapse_opt or 'sm-active-button-bg' }}">
<!-- Menu item -->
<li class="sidebar-menu-item open">
<a href="#" class="sidebar-menu-button" data-toggle="sidebar-collapse">
<i class="sidebar-menu-icon material-icons">home</i> Dashboard
</a>
<!-- Submenu -->
<ul class="sidebar-submenu {{ ssm_collapse_opt }}">
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button" data-toggle="sidebar-collapse">Submenu item</a>
<!-- Submenu -->
<ul class="sidebar-submenu {{ ssm_ssm_collapse_opt }}">
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button" data-toggle="sidebar-collapse">Another submenu</a>
<!-- Submenu -->
<ul class="sidebar-submenu {{ ssm_ssm_collapse_opt }}">
<li class="sidebar-menu-item active">
<a href="#" class="sidebar-menu-button">Active menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Aliquam tincidunt</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Vestibulum auctor</a>
</li>
</ul>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Nunc dignissim</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Vivamus vestibulum</a>
</li>
</ul>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Praesent placerat</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Fusce pellentesque</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Vestibulum commodo</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Vivamus molestie</a>
</li>
</ul>
</li>
<!-- Menu item -->
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button" data-toggle="sidebar-collapse">
<i class="sidebar-menu-icon material-icons">pie_chart</i> Reports
</a>
<!-- Submenu -->
<ul class="sidebar-submenu {{ ssm_collapse_opt }}">
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Another menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
</ul>
</li>
</ul>
{% endif %}
{% if sm_dropdown %}
<!-- Sidebar menu -->
<ul class="sidebar-menu {{ sm_dropdown_opt or 'sm-active-button-bg' }}">
<!-- Menu item -->
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button" data-toggle="sidebar-dropdown">
<i class="sidebar-menu-icon material-icons">home</i> Dashboard
</a>
<!-- Submenu -->
<ul class="sidebar-submenu {{ ssm_dropdown_opt }}">
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button" data-toggle="sidebar-collapse">Collapse submenu</a>
<!-- Submenu -->
<ul class="sidebar-submenu {{ ssm_ssm_dropdown_opt }}">
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button" data-toggle="sidebar-dropdown">Dropdown submenu</a>
<!-- Submenu -->
<ul class="sidebar-submenu {{ ssm_ssm_collapse_opt }}">
<li class="sidebar-menu-item active">
<a href="#" class="sidebar-menu-button">Active menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Aliquam tincidunt</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Vestibulum auctor</a>
</li>
</ul>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Nunc dignissim</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Vivamus vestibulum</a>
</li>
</ul>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Praesent placerat</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Fusce pellentesque</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Vestibulum commodo</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Vivamus molestie</a>
</li>
</ul>
</li>
<!-- Menu item -->
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button" data-toggle="sidebar-dropdown">
<i class="sidebar-menu-icon material-icons">pie_chart</i> Reports
</a>
<!-- Submenu -->
<ul class="sidebar-submenu {{ ssm_dropdown_opt }}">
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Another menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
</ul>
</li>
</ul>
{% endif %}
{% if sm_submenu %}
<!-- Sidebar menu -->
<ul class="sidebar-menu {{ sm_submenu_opt or 'sm-active-button-bg' }}">
<!-- Menu item -->
<li class="sidebar-menu-item open">
<a href="#" class="sidebar-menu-button">
<i class="sidebar-menu-icon material-icons">home</i> Dashboard
</a>
<!-- Submenu -->
<ul class="sidebar-submenu {{ ssm_submenu_opt }}">
<li class="sidebar-menu-item active">
<a href="#" class="sidebar-menu-button">Active menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">Regular menu item</a>
</li>
</ul>
</li>
<!-- Menu item -->
<li class="sidebar-menu-item">
<a href="#" class="sidebar-menu-button">
<i class="sidebar-menu-icon material-icons">pie_chart</i> Reports
</a>
</li>
</ul>
{% endif %}
{% if sm_text !== false %}
<p class="sidebar-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga est asperiores mollitia, ut, qui totam? Accusantium asperiores nostrum ut temporibus inventore error iste sequi, quam, veritatis minus quod cum, sint?</p>
{% endif %}
{% if s_text_2 %}
<div class="sidebar-heading sidebar-p-t">Implicit style</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga est asperiores mollitia totam accusantium ut nostrum. <br><a href="#" class="sidebar-link">Read more</a></p>
<div class="sidebar-heading">Explicit class</div>
<div class="sidebar-text">Labore nam placeat officiis mollitia reprehenderit corporis odio quia! <br><a href="#" class="sidebar-link">Read more</a></div>
{% endif %}
</div>
<!-- // END Sidebar