!!!
%html{:lang => @locals[:locale].to_s}
  %head
    %title
      = @page.nav_title + ' - ' + @site.title
    %meta(name="viewport" content="width=device-width, initial-scale=1.0")
    %meta(charset="UTF-8")
    = html_head_base
    :css
      body {
        background: #444;
        display: flex;
        flex-direction: row;
        padding: 10px;
        margin: 0px;
      }
      #sidebar {
        flex: 0 0 250px;
        background: white;
        margin-right: 10px;
        padding: 20px;
      }
      #sidebar ul {
        list-style-type: none;
        padding-left: 0px;
        margin: 0;
      }
      #sidebar li { padding: 4px }
      #sidebar li a { text-decoration: none }
      #sidebar li.active { background: #444 }
      #sidebar li.active a { color: white }
      #sidebar li.level1 { padding-left: 20px }
      #sidebar li.level2 { padding-left: 40px }
      #main {
        flex: 1 1 auto;
        background: white;
        padding: 20px;
      }
      #title-box {
        padding-bottom: 20px;
        border-bottom: 5px solid #eee;
      }
      #title-box h1 {
        margin-top: 0px;
      }
      pre {
        padding: 10px;
        background: #eef;
      }
      code {
        background: #eef;
      }
      table {border-collapse: collapse}
      table td {
        border: 1px solid #ccc;
        padding: 4px;
        vertical-align: top;
      }

  %body
    #sidebar
      %ul
        - home = @page.path.empty? ? 'active' : ''
        %li{:class => home}
          %a{:href => '/'} Home
        - navigation_items(@site.menu, 0) do |item|
          %li{:class => "#{item[:active]} level#{item[:level]}"}
            %a{:href => item[:href], :class => ''}= item[:label]
    #main
      #title-box
        = yield :title
        #summary= @page.props.summary
      #content-box
        = yield :content