Kata ページのヘッダーを共通化

app/assets/stylesheets/extension/header.scss

@@ -31,19 +31,21 @@ body {
   font-size: 14px;
   font-weight: bold;
   line-height: 26px;
+  &:hover{
+    color: #fff;
+  }
 }
-.collapse > .navbar-nav > li > a {
+.collapse > .navbar-nav > li {
   position: relative;
   &:hover {
-    color: #fff;
     &:before, &:after {
       width: 40%;
     }
   }
 }
 
-.collapse > .navbar-nav > li > a:before,
-.collapse > .navbar-nav > li > a:after {
+.collapse > .navbar-nav > li:before,
+.collapse > .navbar-nav > li:after {
   position: absolute;
   bottom: 10px;
   content: "";
@@ -52,10 +54,10 @@ body {
   background-color: #fff;
   transition: 0.2s;
 }
-.collapse > .navbar-nav > li > a:before {
+.collapse > .navbar-nav > li:before {
   left: 50%;
 }
-.collapse > .navbar-nav > li > a:after {
+.collapse > .navbar-nav > li:after {
   right: 50%;
 }
 .navbar-toggle {
@@ -70,13 +72,55 @@ body {
     background-color: #0466c9;
   }
 }
+.nav > .navbar-dd-p {
+  &> a {
+    display: inline-block;
+    padding-right: 0;
+  }
+  &:hover > .navbar-dd {
+    display: block;
+  }
+}
+.navbar-dd {
+  display: none;
+  position: absolute;
+  list-style: none;
+  top: 50px;
+  padding: 10px 0 8px 0;
+  background: #2275CA;
+  width: 120px;
+  a {
+    color: #fff;
+    padding: 4px 12px;
+    display: block;
+    text-decoration: none;
+    &:hover {
+      background: #66a2df;
+    }
+  }
+}
+.navbar-dd-l {
+  display: inline-block;
+  margin-bottom: 2px;
+  &::before {
+    content: '';
+    display: block;
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 6px solid #fff;
+    color: #fff;
+    margin-right: 15px;
+  }
+}
 @media only screen and (max-width:950px) {
   .collapse > .navbar-nav > li > a {
     padding: 15px 8px;
   }
 }
 
-@media only screen and (max-width:840px) {
+@media only screen and (max-width:865px) {
   .container-fluid {
     padding: 5px 10px;
   }
@@ -98,6 +142,15 @@ body {
 }
 
 @media only screen and (max-width:768px){
+  .navbar-dd {
+    display: block;
+    position: static;
+    padding: 0 2rem;
+    width: 100%;
+  }
+  .navbar-dd-l {
+    display: none;
+  }
   #header-logo img {
     margin-left: 15px;
   }
@@ -110,11 +163,14 @@ body {
       color: #cce3f9;
     }
   }
-  .collapse > .navbar-nav > li > a:before,
-  .collapse > .navbar-nav > li > a:after {
+  .collapse > .navbar-nav > li:before,
+  .collapse > .navbar-nav > li:after {
     content: none;
   }
   .navbar-toggle {
     padding: 12px;
   }
+  .navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
+    max-height: 540px;
+  }
 }

app/views/layouts/application.html.haml

@@ -9,8 +9,7 @@
 
     %title= full_title(yield(:title))
     = stylesheet_link_tag    'application', 'data-turbolinks-track' => true, media: 'all'
-    - unless is_kata?
-      = stylesheet_link_tag 'extension/header', 'data-turbolinks-track' => true, media: 'all'
+    = stylesheet_link_tag 'extension/header', 'data-turbolinks-track' => true, media: 'all'
     = javascript_include_tag 'application', 'data-turbolinks-track' => true
     = csrf_meta_tags
     = scrivito_head_tags if using_scrivito?
@@ -62,11 +61,10 @@
 
     / at the end of the HEAD
     - if is_kata?
-      %link{:href => "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css", :rel => "stylesheet"} if is_kata?
+      %link{:href => "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css", :rel => "stylesheet"} 
 
   %body
-    - unless is_kata?
-      = render 'shared/header'
+    = render 'shared/header'
     - flash.each do |message_type, message|
       %div{:class => "alert alert-#{message_type}"}= message
     = yield

app/views/plain_page/index.html.haml

@@ -1,38 +1,6 @@
 %body
   - if @obj && !@obj.permalink.nil?
-    / Navigation
-    %nav.navbar.navbar-default.navbar-custom.navbar-fixed-top
-      .container-fluid
-        / Brand and toggle get grouped for better mobile display
-        .navbar-header.page-scroll
-          %button.navbar-toggle{"data-target" => "#bs-example-navbar-collapse-1", "data-toggle" => "collapse", :type => "button"}
-            %span.sr-only Toggle navigation
-            目次
-            %i.fa.fa-bars
-          %a.navbar-brand{:href => "#top"} CoderDojo Kata
-        / Collect the nav links, forms, and other content for toggling
-        #bs-example-navbar-collapse-1.collapse.navbar-collapse
-          %ul.nav.navbar-nav.navbar-right
-            / DocSearch: https://github.com/algolia/docsearch-configs/blob/master/configs/coderdojo.json
-            %li.search
-              %input#searchbox{ :placeholder => "🔍 検索", :type => "text" }
-              #hits
-              #pagination
-            %li
-              %a{:href => "#README"} はじめに
-            %li
-              %a{:href => "#learn"} 学ぶ
-            %li
-              %a{:href => "#challenge"} 腕試し
-            %li
-              %a{:href => "#startup"} 立ち上げる
-            %li
-              %a{:href => "#support"} 支援
-            %li
-              %a{:href => "#faq"} FAQ
-        / /.navbar-collapse
-      / /.container
-    / Page Header
+
     / Set your background image for this header on the line below.
     %header.intro-header{:style => "padding-top: 100px; background-image: url('img/kata-cover.png')"}
       .container
@@ -41,10 +9,10 @@
             .post-heading
               %h1 CoderDojo Kata
               %h2.subheading 道場情報まとめ
-            
-    / Post Content        
-    %article 
-      .container 
+
+    / Post Content
+    %article
+      .container
         .row
           .col-lg-8.col-lg-offset-2.col-md-10.col-md-offset-1.fontsize-bigger
             / Navigator

app/views/shared/_header.html.haml

@@ -17,5 +17,15 @@
         %li= link_to 'パートナー法人', '/#partners'
         %li= link_to '統計情報',       '/stats'
         %li= link_to 'News',           '/#news'
-        %li= link_to 'Kata',           '/kata'
+        %li.navbar-dd-p
+          = link_to 'Kata',           '/kata'
+          %span.navbar-dd-l
+          %ul.navbar-dd
+            %li= link_to 'はじめに',   '/kata#README'
+            %li= link_to '学ぶ',      '/kata#learn'
+            %li= link_to '腕試し',    '/kata#challenge'
+            %li= link_to '立ち上げる', '/kata#startup'
+            %li= link_to '支援',      '/kata#support'
+            %li= link_to 'FAQ',      '/kata#faq'
+
         %li= link_to 'お問い合わせ',   '/#contact'