move wiki navbar content to right sidebar

app/assets/javascripts/dispatcher.js.es6

@@ -262,7 +262,7 @@
               new NotificationsDropdown();
               break;
             case 'wikis':
-              new Wikis();
+              new gl.Wikis();
               shortcut_handler = new ShortcutsNavigation();
               new ZenMode();
               new GLForm($('.wiki-form'));

app/assets/javascripts/wikis.js

-/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, consistent-return, one-var, one-var-declaration-per-line, no-undef, prefer-template, padded-blocks, max-len */
-
-/*= require latinise */
-
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
-  this.Wikis = (function() {
-    function Wikis() {
-      this.slugify = bind(this.slugify, this);
-      $('.new-wiki-page').on('submit', (function(_this) {
-        return function(e) {
-          var field, path, slug;
-          $('[data-error~=slug]').addClass('hidden');
-          field = $('#new_wiki_path');
-          slug = _this.slugify(field.val());
-          if (slug.length > 0) {
-            path = field.attr('data-wikis-path');
-            location.href = path + '/' + slug;
-            return e.preventDefault();
-          }
-        };
-      })(this));
-    }
-
-    Wikis.prototype.dasherize = function(value) {
-      return value.replace(/[_\s]+/g, '-');
-    };
-
-    Wikis.prototype.slugify = function(value) {
-      return this.dasherize(value.trim().toLowerCase().latinise());
-    };
-
-    return Wikis;
-
-  })();
-
-}).call(this);

app/assets/javascripts/wikis.js.es6

+/* eslint-disable no-param-reassign */
+/* global Breakpoints */
+
+/*= require latinise */
+/*= require breakpoints */
+
+((global) => {
+  const dasherize = str => str.replace(/[_\s]+/g, '-');
+  const slugify = str => dasherize(str.trim().toLowerCase().latinise());
+
+  class Wikis {
+    constructor() {
+      this.bp = Breakpoints.get();
+      this.sidebarEl = document.querySelector('.js-wiki-sidebar');
+      this.sidebarExpanded = false;
+
+      const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle');
+      for (const toggle of sidebarToggles) {
+        toggle.addEventListener('click', e => this.handleToggleSidebar(e));
+      }
+
+      this.newWikiForm = document.querySelector('form.new-wiki-page');
+      if (this.newWikiForm) {
+        this.newWikiForm.addEventListener('submit', e => this.handleNewWikiSubmit(e));
+      }
+
+      window.addEventListener('resize', () => this.renderSidebar());
+      this.renderSidebar();
+    }
+
+    handleNewWikiSubmit(event) {
+      if (!this.newWikiForm) return;
+
+      const slugInput = this.newWikiForm.querySelector('#new_wiki_path');
+      const slug = slugify(slugInput.value);
+
+      if (slug.length > 0) {
+        const wikisPath = slugInput.getAttribute('data-wikis-path');
+        window.location.href = `${wikisPath}/${slug}`;
+        event.preventDefault();
+      }
+    }
+
+    handleToggleSidebar(event) {
+      event.preventDefault();
+      this.sidebarExpanded = !this.sidebarExpanded;
+      this.renderSidebar();
+    }
+
+    sidebarCanCollapse() {
+      const bootstrapBreakpoint = this.bp.getBreakpointSize();
+      return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
+    }
+
+    renderSidebar() {
+      const { classList } = this.sidebarEl;
+      if (this.sidebarExpanded || !this.sidebarCanCollapse()) {
+        if (!classList.contains('right-sidebar-expanded')) {
+          classList.remove('right-sidebar-collapsed');
+          classList.add('right-sidebar-expanded');
+        }
+      } else if (classList.contains('right-sidebar-expanded')) {
+        classList.add('right-sidebar-collapsed');
+        classList.remove('right-sidebar-expanded');
+      }
+    }
+  }
+
+  global.Wikis = Wikis;
+})(window.gl || (window.gl = {}));

app/assets/stylesheets/framework/sidebar.scss

@@ -220,7 +220,7 @@ header.header-sidebar-pinned {
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    &:not(.build-sidebar) {
+    &:not(.build-sidebar):not(.wiki-sidebar) {
       padding-right: $sidebar_collapsed_width;
     }
   }

app/assets/stylesheets/pages/wiki.scss

@@ -4,3 +4,74 @@
   margin-right: auto;
   padding-right: 7px;
 }
+
+.top-area {
+  position: relative;
+
+  &.sub-header-block {
+    padding-right: 40px;
+  }
+
+  button.sidebar-toggle {
+    position: absolute;
+    right: 0;
+    top: 11px;
+    display: block;
+  }
+
+  @media (min-width: $screen-sm-min) {
+    padding-right: 40px;
+  }
+
+  @media (min-width: $screen-md-min) {
+    &,
+    &.sub-header-block {
+      padding-right: 0;
+    }
+
+    button.sidebar-toggle {
+      display: none;
+    }
+  }
+}
+
+.right-sidebar.wiki-sidebar {
+  padding: $gl-padding 0;
+
+  &.right-sidebar-collapsed {
+    display: none;
+  }
+
+  .blocks-container {
+    padding: 0 $gl-padding;
+  }
+
+  .block {
+    width: 100%;
+  }
+
+  a {
+    color: $layout-link-gray;
+
+    &:hover,
+    &.active {
+      color: $black;
+    }
+  }
+
+  ul.wiki-pages,
+  ul.wiki-pages li {
+    list-style: none;
+    display: block;
+    padding: 0;
+    margin: 0;
+  }
+
+  .wiki-sidebar-header {
+    padding: 0 $gl-padding $gl-padding;
+
+    .gutter-toggle {
+      margin-top: 0;
+    }
+  }
+}

app/helpers/nav_helper.rb

@@ -20,6 +20,12 @@ module NavHelper
       end
     elsif current_path?('builds#show')
       "page-gutter build-sidebar right-sidebar-expanded"
+    elsif current_path?('wikis#show') ||
+      current_path?('wikis#edit') ||
+      current_path?('wikis#history') ||
+      current_path?('wikis#pages') ||
+      current_path?('wikis#git_access')
+      "page-gutter wiki-sidebar right-sidebar-expanded"
     end
   end
 

app/views/projects/wikis/_nav.html.haml

-= content_for :sub_nav do
-  .scrolling-tabs-container.sub-nav-scroll
-    = render 'shared/nav_scroll'
-    .nav-links.sub-nav.scrolling-tabs
-      %ul{ class: (container_class) }
-        = nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
-          = link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
-
-        = nav_link(path: 'wikis#pages') do
-          = link_to 'Pages', namespace_project_wikis_pages_path(@project.namespace, @project)
-
-        = nav_link(path: 'wikis#git_access') do
-          = link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
-            Git Access
-
-      = render 'projects/wikis/new'

app/views/projects/wikis/_sidebar.html.haml

+%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar
+  .block.wiki-sidebar-header.append-bottom-default
+    %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" }
+      = icon('angle-double-right')
+
+    = link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
+      = succeed ' ' do
+        = icon('cloud-download')
+      Clone repository
+
+  .blocks-container
+    .block.block-first
+      %ul.wiki-pages
+        %li
+          = link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
+        %li
+          = link_to 'Pages', namespace_project_wikis_pages_path(@project.namespace, @project)
+
+= render 'projects/wikis/new'

app/views/projects/wikis/edit.html.haml

 - @no_container = true
 - page_title "Edit", @page.title.capitalize, "Wiki"
-= render 'nav'
 
 %div{ class: container_class }
   .top-area
+    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
     .nav-text
       %strong
         - if @page.persisted?
@@ -21,3 +23,5 @@
             New Page
 
   = render 'form'
+
+= render 'sidebar'

app/views/projects/wikis/git_access.html.haml

 - @no_container = true
 - page_title "Git Access", "Wiki"
 
-= render 'nav'
 %div{ class: container_class }
-  .sub-header-block
+  .top-area.sub-header-block
+    %button.btn.btn-default.visible-xs.visible-sm.pull-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
     %span.oneline
       Git access for
       %strong= @project_wiki.path_with_namespace
@@ -32,3 +34,5 @@
           >> Thin web server (v1.5.0 codename Knife)
           >> Maximum connections set to 1024
           >> Listening on 0.0.0.0:4567, CTRL+C to stop
+
+= render 'sidebar'

app/views/projects/wikis/history.html.haml

 - page_title "History", @page.title.capitalize, "Wiki"
-= render 'nav'
+
 %div{ class: container_class }
   .top-area
+    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
     .nav-text
       %strong
         = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
@@ -35,3 +37,5 @@
             %td
               %strong
                 = @page.page.wiki.page(@page.page.name, commit.id).try(:format)
+
+= render 'sidebar'

app/views/projects/wikis/pages.html.haml

 - @no_container = true
 - page_title "Pages", "Wiki"
 
-= render 'nav'
-
 %div{ class: container_class }
+  .top-area
+    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
+    .nav-text
+      %strong
+        Wiki Pages
+
   %ul.content-list
     - @wiki_pages.each do |wiki_page|
       %li
@@ -12,3 +18,5 @@
         .pull-right
           %small Last edited #{time_ago_with_tooltip(wiki_page.commit.authored_date)}
   = paginate @wiki_pages, theme: 'gitlab'
+
+= render 'sidebar'

app/views/projects/wikis/show.html.haml

 - @no_container = true
 - page_title @page.title.capitalize, "Wiki"
-= render 'nav'
 
 %div{ class: container_class }
   .top-area
+    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
     .nav-text
       %strong= @page.title.capitalize
 
@@ -24,3 +26,5 @@
     .wiki
       = preserve do
         = render_wiki_content(@page)
+
+= render 'sidebar'