From a76e95042c3d3bcfffc3bd051f1270f00a9e3000 Mon Sep 17 00:00:00 2001
From: Andrew Brown <drusepth@gmail.com>
Date: Wed, 5 Dec 2018 00:20:52 -0600
Subject: [PATCH] sidenav rework

---
 app/assets/stylesheets/sidenav.css.scss |  32 ++-
 app/views/layouts/_navbar.html.erb      | 119 +---------
 app/views/layouts/_sidenav.html.erb     | 296 ++++++++++++++++--------
 app/views/layouts/application.html.erb  |   4 +-
 4 files changed, 234 insertions(+), 217 deletions(-)

diff --git a/app/assets/stylesheets/sidenav.css.scss b/app/assets/stylesheets/sidenav.css.scss
index bcad62d2..1a5c0222 100644
--- a/app/assets/stylesheets/sidenav.css.scss
+++ b/app/assets/stylesheets/sidenav.css.scss
@@ -1,5 +1,35 @@
 .sidenav {
-  padding-top: 64px;
+  li {
+    display: block;
+  }
+
+  .logo-container {
+    padding: 0 16px;
+    height: 64px;
+    line-height: 64px;
+    font-size: 24px;
+    border-bottom: 1px solid rgba(0,0,0,0.2);
+    box-sizing: content-box;
+  }
+
+  .collapsible .collapsible-header {
+    text-transform: uppercase;
+    height: 64px;
+    line-height: 64px;
+  }
+
+  .collapsible .collapsible-header .chevron {
+    float: right;
+    height: 24px;
+    width: 24px;
+    line-height: 24px;
+    margin: 20px 0 0 0;
+    transition: transform .2s;
+  }
+
+  .collapsible>.active .collapsible-header .chevron {
+    transform: rotate(-90deg);
+  }
 
   .header {
     background: #10B6FF;
diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
index fb0c00c5..22a6a56f 100644
--- a/app/views/layouts/_navbar.html.erb
+++ b/app/views/layouts/_navbar.html.erb
@@ -1,30 +1,4 @@
-<ul id="help-dropdown" class="dropdown-content">
-  <li>
-    <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLSe0jnqJlcPJDqwogGere5j8-8F1nSGGYkzbsI-XkOeMnGwLrA/viewform', target: '_new' do %>
-      <i class="material-icons left">feedback</i>
-      Report a problem
-    <% end %>
-  </li>
-  <li>
-    <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLScOhSMdDqWqJu9HGPQdmd0R9s90_AcSo0g6_Nc1qNjQIbSaXA/viewform', target: '_new' do %>
-      <i class="material-icons left">feedback</i>
-      Request a feature
-    <% end %>
-  </li>
-  <li>
-    <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLScZWEVMgm8hBWIIVj1LPzo0GqflmWUrLQlc4TAYqsaS087oAA/viewform', target: '_new' do %>
-      <i class="material-icons left">feedback</i>
-      Leave feedback
-    <% end %>
-  </li>
-  <li class="divider"></li>
-  <li>
-    <%= link_to main_app.privacy_policy_path do %>
-      <i class="material-icons left">verified_user</i>
-      Privacy policy
-    <% end %>
-  </li>
-</ul>
+
 
 <ul id="recent-content-dropdown" class="dropdown-content">
 <% if user_signed_in? %>
@@ -64,104 +38,21 @@
   </div>
 </div>
 
-<ul id="desktop-user-dropdown" class="dropdown-content">
-  <% if current_user %>
-    <li>
-      <%= link_to current_user do %>
-        <i class="material-icons left">person</i>
-        Creator profile
-        <span class="badge right">&nbsp;</span>
-      <% end %>
-    </li>
-
-    <li>
-      <%= link_to main_app.subscription_path do %>
-        <i class="material-icons left">credit_card</i>
-        Account billing
-        <span class="badge right">&nbsp;</span>
-      <% end %>
-    </li>
-    <li>
-      <%= link_to main_app.edit_user_registration_path do %>
-        <i class="material-icons left">settings</i>
-        Account settings
-        <span class="badge right">&nbsp;</span>
-      <% end %>
-    </li>
-    <li class="divider"></li>
-  <% end %>
-  <li>
-    <%= link_to main_app.prompts_path do %>
-      <i class="material-icons left">lightbulb_outline</i>
-      Worldbuilding prompts
-    <% end %>
-  </li>
-  <li>
-    <%= link_to main_app.notebook_export_path do %>
-      <i class="material-icons left">file_download</i>
-      Notebook downloads
-    <% end %>
-  </li>
-  <li>
-    <%= link_to main_app.recently_deleted_content_path do %>
-      <i class="material-icons left">delete</i>
-      Recently-deleted pages
-    <% end %>
-  </li>
-  <li class="divider"></li>
-  <li>
-    <%= link_to main_app.destroy_user_session_path do %>
-      <i class="material-icons left">power_settings_new</i>
-      Sign out
-    <% end %>
-  </li>
-</ul>
-
-<ul id="login-slide" class="sidenav">
-  <li><%= link_to 'Sign in', main_app.new_user_session_path %></li>
-  <li><%= link_to 'Sign up', main_app.new_user_registration_path %></li>
-  <li class="divider"></li>
-  <li><%= link_to 'Report a problem', 'https://docs.google.com/forms/d/e/1FAIpQLSe0jnqJlcPJDqwogGere5j8-8F1nSGGYkzbsI-XkOeMnGwLrA/viewform', target: '_new' %></li>
-  <li><%= link_to 'Request a feature', 'https://docs.google.com/forms/d/e/1FAIpQLScOhSMdDqWqJu9HGPQdmd0R9s90_AcSo0g6_Nc1qNjQIbSaXA/viewform', target: '_new' %></li>
-  <li><%= link_to 'Leave feedback', 'https://docs.google.com/forms/d/e/1FAIpQLScZWEVMgm8hBWIIVj1LPzo0GqflmWUrLQlc4TAYqsaS087oAA/viewform', target: '_new' %></li>
-  <li class="divider"></li>
-  <li><%= link_to 'Privacy policy', main_app.privacy_policy_path %></li>
-</ul>
-
 <div class="navbar-fixed">
   <nav class="blue">
     <div class="nav-wrapper">
-      <%= link_to 'Notebook.ai', main_app.root_url, class: 'brand-logo center' %>
 
-      <ul class="right">
-        <li>
-          <%= link_to 'https://www.notebook.ai/forum/announcements/remembering-james-brown' do %>
-          <div class="hide-on-small-and-down"><i class="material-icons white-text">favorite_border</i></div>
-          <% end %>
-        </li>
-        <% if user_signed_in? %>
-        <li>
-          <a class="dropdown-trigger tooltipped" href="#!" data-target="help-dropdown" data-position="bottom" data-delay="100" data-tooltip="Need help?">
-            <i class="material-icons">help</i>
-          </a>
-        </li>
-        <li>
-          <a class="dropdown-trigger tooltipped" href="#!" data-target="desktop-user-dropdown" data-position="bottom" data-delay="100" data-tooltip="Your content">
-            <div class="hide-on-med-and-up"><i class="material-icons">book</i></div>
-            <div class="hide-on-small-and-down"><%= current_user.name %> &nbsp; ▾</div>
-          </a>
-        </li>
-        <% else %>
+      <% unless user_signed_in? %>
+        <ul class="right">
           <li class="hide-on-med-and-down"><%= link_to 'Sign in', main_app.new_user_session_path %></li>
           <li class="hide-on-med-and-down"><%= link_to 'Sign up', main_app.new_user_registration_path %></li>
-        <% end %>
-      </ul>
+        </ul>
+      <% end %>
       <ul class="left">
         <li>
           <a class="sidenav-trigger" href="#" data-target="slide-out">
             <i class="material-icons">menu</i>
           </a>
-
         </li>
 
         <% if user_signed_in? %>
diff --git a/app/views/layouts/_sidenav.html.erb b/app/views/layouts/_sidenav.html.erb
index 4ac0cade..70925ff5 100644
--- a/app/views/layouts/_sidenav.html.erb
+++ b/app/views/layouts/_sidenav.html.erb
@@ -1,104 +1,200 @@
-<ul id="slide-out" class="sidenav sidenav-fixed">
-  <li class="content-search">
-    <form>
-      <div class="input-field">
-        <input id="search" type="search" required placeholder="Search your notebook">
-        <i class="material-icons">search</i>
-      </div>
-    </form>
-  </li>
-
-  <li>
-    <%= link_to root_path do %>
-      <i class="material-icons green-text">
-        adjust
-      </i>
-      Your assistant
+<ul id="sidenav-left" class="sidenav sidenav-fixed" style="transform: translateX(-105%);">
+  <li class="blue">
+    <%= link_to root_path, class: 'logo-container white-text' do %>
+      Notebook.ai
     <% end %>
   </li>
-
-  <li>
-    <%= link_to main_app.dashboard_path do %>
-      <i class="material-icons grey-text">
-        dashboard
-      </i>
-      Home
-    <% end %>
-  </li>
-
-  <li>
-    <%= link_to main_app.thredded_path do %>
-      <i class="material-icons grey-text">
-        forum
-      </i>
-      Discussions
-      <% if @unread_threads > 0 || @unread_private_messages > 0 %>
-        <span class="badge <%= 'blue white-text' if @unread_private_messages > 0 %>">
-          <%= @unread_threads %><%= "/#{@unread_private_messages}" if @unread_private_messages > 0 %>
-        </span>
-      <% end %>
-    <% end %>
-  </li>
-
-  <li class="header">
-    Your Notebook Pages
-  </li>
-
-  <li>
-    <%= link_to main_app.documents_path do %>
-      <i class="material-icons <%= Document.color %>-text">
-        <%= Document.icon %>
-      </i>
-      Documents
-      <span class="badge">
-        <%= current_user.documents.count %>
-      </span>
-    <% end %>
-  </li>
-
-  <%
-    @activated_content_types.each do |content_type|
-  %>
-    <% content_type_klass = content_type.constantize %>
-    <li>
-      <%#
-        todo define missing colors using the "Custom colors" section article
-        https://materializecss.com/waves.html#!
-      %>
-      <%= link_to main_app.polymorphic_path(content_type_klass), class: "white waves-effect waves-#{content_type_klass.color.split(' ').last}" do %>
-        <i class="material-icons <%= content_type_klass.color %>-text">
-          <%= content_type_klass.icon %>
-        </i>
-        <%= content_type.pluralize %>
-        <span class="badge">
-          <%=
-            pluralized_name = content_type.downcase.pluralize
-            if content_type_klass != Universe && @universe_scope
-              @universe_scope.send(pluralized_name).count
-            else
-              (
-                @current_user_content[content_type] || [] +
-                current_user.send("contributable_#{pluralized_name}") +
-                (content_type_klass == Universe ? [] : content_type_klass.where(universe_id: current_user.universes.pluck(:id)))
-              ).uniq.count
-            end
-          %>
-        </span>
-      <% end %>
-    </li>
-  <% end %>
-
-  <li class="divider"></li>
-  <li>
-    <%= link_to main_app.customization_content_types_path do %>
-      <i class="material-icons black-text">add</i>
-      Add more...
-    <% end %>
+  <li class="no-padding">
+    <ul class="collapsible collapsible-accordion">
+      <li class="bold waves-effect active">
+        <a class="collapsible-header" tabindex="0">
+          Navigation
+          <i class="material-icons chevron">chevron_left</i>
+        </a>
+        <div class="collapsible-body">
+          <ul>
+            <li>
+              <%= link_to main_app.dashboard_path, class: 'waves-effect' do %>
+                <i class="material-icons blue-text">
+                  dashboard
+                </i>
+                Home
+              <% end %>
+            </li>
+            <li>
+              <%= link_to main_app.thredded_path, class: 'waves-effect' do %>
+                <i class="material-icons green-text">
+                  forum
+                </i>
+                Discussions
+                <% if @unread_threads > 0 || @unread_private_messages > 0 %>
+                  <span class="badge <%= 'blue white-text' if @unread_private_messages > 0 %>">
+                    <%= @unread_threads %><%= "/#{@unread_private_messages}" if @unread_private_messages > 0 %>
+                  </span>
+                <% end %>
+              <% end %>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <li class="bold waves-effect">
+        <a class="collapsible-header" tabindex="0">
+          Worldbuilding
+          <i class="material-icons chevron">chevron_left</i>
+        </a>
+        <div class="collapsible-body" style="">
+          <ul>
+            <%
+              @activated_content_types.each do |content_type|
+            %>
+              <% content_type_klass = content_type.constantize %>
+              <li>
+                <%#
+                  todo define missing colors using the "Custom colors" section article
+                  https://materializecss.com/waves.html#!
+                %>
+                <%= link_to main_app.polymorphic_path(content_type_klass), class: "waves-effect waves-#{content_type_klass.color.split(' ').last}" do %>
+                  <i class="material-icons <%= content_type_klass.color %>-text">
+                    <%= content_type_klass.icon %>
+                  </i>
+                  <%= content_type.pluralize %>
+                  <span class="badge">
+                    <%=
+                      pluralized_name = content_type.downcase.pluralize
+                      if content_type_klass != Universe && @universe_scope
+                        @universe_scope.send(pluralized_name).count
+                      else
+                        (
+                          @current_user_content[content_type] || [] +
+                          current_user.send("contributable_#{pluralized_name}") +
+                          (content_type_klass == Universe ? [] : content_type_klass.where(universe_id: current_user.universes.pluck(:id)))
+                        ).uniq.count
+                      end
+                    %>
+                  </span>
+                <% end %>
+              </li>
+            <% end %>
+            <li>
+              <%= link_to main_app.customization_content_types_path, class: 'waves-effect' do %>
+                <i class="material-icons black-text">add</i>
+                Add more...
+              <% end %>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <li class="bold waves-effect">
+        <a class="collapsible-header" tabindex="0">
+          Writing
+          <i class="material-icons chevron">chevron_left</i>
+        </a>
+        <div class="collapsible-body" style="">
+          <ul>
+            <li>
+              <%= link_to main_app.documents_path, class: 'waves-effect' do %>
+                <i class="material-icons <%= Document.color %>-text">
+                  <%= Document.icon %>
+                </i>
+                Documents
+                <span class="badge">
+                  <%= current_user.documents.count %>
+                </span>
+              <% end %>
+            </li>
+            <li>
+              <%= link_to main_app.prompts_path, class: 'waves-effect' do %>
+                <i class="material-icons left orange-text">lightbulb_outline</i>
+                Prompts
+              <% end %>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <li class="bold waves-effect">
+        <a class="collapsible-header" tabindex="0">
+          Help
+          <i class="material-icons chevron">chevron_left</i>
+        </a>
+        <div class="collapsible-body">
+          <ul>
+            <li>
+              <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLSe0jnqJlcPJDqwogGere5j8-8F1nSGGYkzbsI-XkOeMnGwLrA/viewform', target: '_new', class: 'waves-effect' do %>
+                <i class="material-icons left">feedback</i>
+                Report a problem
+              <% end %>
+            </li>
+            <li>
+              <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLScOhSMdDqWqJu9HGPQdmd0R9s90_AcSo0g6_Nc1qNjQIbSaXA/viewform', target: '_new', class: 'waves-effect' do %>
+                <i class="material-icons left">feedback</i>
+                Request a feature
+              <% end %>
+            </li>
+            <li>
+              <%= link_to 'https://docs.google.com/forms/d/e/1FAIpQLScZWEVMgm8hBWIIVj1LPzo0GqflmWUrLQlc4TAYqsaS087oAA/viewform', target: '_new', class: 'waves-effect' do %>
+                <i class="material-icons left">feedback</i>
+                Leave feedback
+              <% end %>
+            </li>
+            <li class="divider"></li>
+            <li>
+              <%= link_to main_app.privacy_policy_path, class: 'waves-effect' do %>
+                <i class="material-icons left blue-text">verified_user</i>
+                Privacy policy
+              <% end %>
+            </li>
+          </ul>
+        </div>
+      </li>
+      <li class="bold waves-effect">
+        <a class="collapsible-header" tabindex="0">
+          My Account
+          <i class="material-icons chevron">chevron_left</i>
+        </a>
+        <div class="collapsible-body">
+          <ul>
+            <li>
+              <%= link_to current_user, class: 'waves-effect' do %>
+                <i class="material-icons left green-text">person</i>
+                Profile
+              <% end %>
+            </li>
+            <li>
+              <%= link_to main_app.subscription_path, class: 'waves-effect' do %>
+                <i class="material-icons left blue-text">credit_card</i>
+                Billing
+                <span class="badge right"><%= current_user.on_premium_plan? ? 'Premium' : 'Starter' %></span>
+              <% end %>
+            </li>
+            <li>
+              <%= link_to main_app.notebook_export_path, class: 'waves-effect' do %>
+                <i class="material-icons left brown-text">file_download</i>
+                Data export
+              <% end %>
+            </li>
+            <li>
+              <%= link_to main_app.recently_deleted_content_path, class: 'waves-effect' do %>
+                <i class="material-icons left red-text">delete</i>
+                Recycle bin
+              <% end %>
+            </li>
+            <li>
+              <%= link_to main_app.edit_user_registration_path, class: 'waves-effect' do %>
+                <i class="material-icons left black-text">settings</i>
+                Settings
+                <span class="badge right">&nbsp;</span>
+              <% end %>
+            </li>
+            <li class="divider"></li>
+            <li>
+              <%= link_to main_app.destroy_user_session_path, class: 'waves-effect' do %>
+                <i class="material-icons left">power_settings_new</i>
+                Sign out
+              <% end %>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ul>
   </li>
 </ul>
-
-<script>
-$(document).ready(function(){
-  $('.sidenav').sidenav();
-});
-</script>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index c8747a1e..30df3199 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -4,7 +4,8 @@
   <%= render 'layouts/common_head' %>
 </head>
 <body data-in-app="true">
-  <%= render 'layouts/navbar' %>
+  <%= render 'layouts/sidenav' %>
+  <%# render 'layouts/navbar' %>
   <% if user_signed_in? %>
     <style>
       header, main, footer {
@@ -17,7 +18,6 @@
         }
       }
     </style>
-    <%= render 'layouts/sidenav' %>
   <% end %>
 
   <main>