%aside.control-sidebar.control-sidebar-dark

/ Create the tabs
%ul.nav.nav-tabs.nav-justified.control-sidebar-tabs
  %li
    %a{"data-toggle" => "tab", :href => "#control-sidebar-home-tab"}
      %i.fa.fa-home
  %li
    %a{"data-toggle" => "tab", :href => "#control-sidebar-settings-tab"}
      %i.fa.fa-gears
/ Tab panes
.tab-content
  / Home tab content
  #control-sidebar-home-tab.tab-pane
    %h3.control-sidebar-heading Recent Activity
    %ul.control-sidebar-menu
      %li
        %a{:href => "javascript:void(0)"}
          %i.menu-icon.fa.fa-birthday-cake.bg-red
          .menu-info
            %h4.control-sidebar-subheading Langdon's Birthday
            %p Will be 23 on April 24th
      %li
        %a{:href => "javascript:void(0)"}
          %i.menu-icon.fa.fa-user.bg-yellow
          .menu-info
            %h4.control-sidebar-subheading Frodo Updated His Profile
            %p New phone +1(800)555-1234
      %li
        %a{:href => "javascript:void(0)"}
          %i.menu-icon.fa.fa-envelope-o.bg-light-blue
          .menu-info
            %h4.control-sidebar-subheading Nora Joined Mailing List
            %p nora@example.com
      %li
        %a{:href => "javascript:void(0)"}
          %i.menu-icon.fa.fa-file-code-o.bg-green
          .menu-info
            %h4.control-sidebar-subheading Cron Job 254 Executed
            %p Execution time 5 seconds
    / /.control-sidebar-menu
    %h3.control-sidebar-heading Tasks Progress
    %ul.control-sidebar-menu
      %li
        %a{:href => "javascript:void(0)"}
          %h4.control-sidebar-subheading
            Custom Template Design
            %span.label.label-danger.pull-right 70%
          .progress.progress-xxs
            .progress-bar.progress-bar-danger{:style => "width: 70%"}
      %li
        %a{:href => "javascript:void(0)"}
          %h4.control-sidebar-subheading
            Update Resume
            %span.label.label-success.pull-right 95%
          .progress.progress-xxs
            .progress-bar.progress-bar-success{:style => "width: 95%"}
      %li
        %a{:href => "javascript:void(0)"}
          %h4.control-sidebar-subheading
            Laravel Integration
            %span.label.label-warning.pull-right 50%
          .progress.progress-xxs
            .progress-bar.progress-bar-warning{:style => "width: 50%"}
      %li
        %a{:href => "javascript:void(0)"}
          %h4.control-sidebar-subheading
            Back End Framework
            %span.label.label-primary.pull-right 68%
          .progress.progress-xxs
            .progress-bar.progress-bar-primary{:style => "width: 68%"}
    / /.control-sidebar-menu
  / /.tab-pane
  / Stats tab content
  #control-sidebar-stats-tab.tab-pane Stats Tab Content
  / /.tab-pane
  / Settings tab content
  #control-sidebar-settings-tab.tab-pane
    %form{:method => "post"}
      %h3.control-sidebar-heading General Settings
      .form-group
        %label.control-sidebar-subheading
          Report panel usage
          %input.pull-right{:checked => "checked", :type => "checkbox"}/
        %p
          Some information about this general settings option
      / /.form-group
      .form-group
        %label.control-sidebar-subheading
          Allow mail redirect
          %input.pull-right{:checked => "checked", :type => "checkbox"}/
        %p
          Other sets of options are available
      / /.form-group
      .form-group
        %label.control-sidebar-subheading
          Expose author name in posts
          %input.pull-right{:checked => "checked", :type => "checkbox"}/
        %p
          Allow the user to show his name in blog posts
      / /.form-group
      %h3.control-sidebar-heading Chat Settings
      .form-group
        %label.control-sidebar-subheading
          Show me as online
          %input.pull-right{:checked => "checked", :type => "checkbox"}/
      / /.form-group
      .form-group
        %label.control-sidebar-subheading
          Turn off notifications
          %input.pull-right{:type => "checkbox"}/
      / /.form-group
      .form-group
        %label.control-sidebar-subheading
          Delete chat history
          %a.text-red.pull-right{:href => "javascript:void(0)"}
            %i.fa.fa-trash-o
      / /.form-group
  / /.tab-pane

/ /.control-sidebar /

Add the sidebar's background. This div must be placed
immediately after the control sidebar

.control-sidebar-bg