From 612f87800593bcacbb866485f8e3575f98fcaea0 Mon Sep 17 00:00:00 2001
From: jgwl <jgwl@umd.edu>
Date: Fri, 12 May 2023 15:36:09 -0400
Subject: [PATCH] allows left-menu to be collapsible

---
 taguette/static/css/custom.css  | 14 +++++++++++++-
 taguette/templates/project.html | 33 ++++++++++++++++++++-------------
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/taguette/static/css/custom.css b/taguette/static/css/custom.css
index 9c1d1287..1036fd57 100644
--- a/taguette/static/css/custom.css
+++ b/taguette/static/css/custom.css
@@ -260,16 +260,28 @@ li.tag-current {
   color: #bbb;
 }
 
-#export-button {
+#command-bar {
   position: absolute;
   top: .1em;
   right: .5em;
+  display: flex;
+  width: 100%;
+  padding-left: 20px;
+  justify-content: space-between;
 }
 
 #export-button .dropdown-toggle {
   padding: 0.125rem 0.25rem;
 }
 
+#menu-toggle.collapsed > .fa-angle-double-left {
+  display:none;
+}
+
+#menu-toggle:not(.collapsed) > .fa-angle-double-right {
+  display:none;
+}
+
 a.dropdown-item:hover {
   color: white !important;
   text-decoration: none;
diff --git a/taguette/templates/project.html b/taguette/templates/project.html
index 59dc81a0..9ea3fcb6 100644
--- a/taguette/templates/project.html
+++ b/taguette/templates/project.html
@@ -8,7 +8,7 @@
 {% block contents %}
 <div class="row">
   <!-- Left panel -->
-  <div class="col-md-3">
+  <div class="col-md-auto col-sm-12 menu-row show">
     <div class="sticky-top">
       <!-- Tab selector -->
       <ul class="nav nav-tabs" id="myTab" role="tablist">
@@ -111,19 +111,26 @@
   </div>
 
   <!-- Right panel -->
-  <div class="col-md-9">
-
+  <div class="col">
     <div id="document-view" class="document-view">
-      <div id="export-button" class="dropdown" style="display: none;">
-        <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdown-export" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          {% trans %}Export this view{% endtrans %}
-        </button>
-        <div class="dropdown-menu" aria-labelledby="dropdown-export">
-          <a href="#" class="dropdown-item" data-extension="html">{% trans %}HTML{% endtrans %}</a>
-          <a href="#" class="dropdown-item" data-extension="docx">{% trans %}DOCX{% endtrans %}</a>
-          <a href="#" class="dropdown-item" data-extension="pdf">{% trans %}PDF{% endtrans %}</a>
-          <a href="#" class="dropdown-item" data-extension="xlsx" data-document="false">{% trans %}Excel{% endtrans %}</a>
-          <a href="#" class="dropdown-item" data-extension="csv" data-document="false">{% trans %}CSV{% endtrans %}</a>
+      <div id="command-bar">
+        <div>
+          <a id="menu-toggle" data-toggle="collapse" href="#" data-target=".menu-row" role="button" aria-expanded="true">
+            <i class="fa fa-angle-double-left fa-lg"></i>
+            <i class="fa fa-angle-double-right fa-lg"></i>
+          </a>
+        </div>
+        <div id="export-button" class="dropdown">
+          <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdown-export" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            {% trans %}Export this view{% endtrans %}
+          </button>
+          <div class="dropdown-menu" aria-labelledby="dropdown-export">
+            <a href="#" class="dropdown-item" data-extension="html">{% trans %}HTML{% endtrans %}</a>
+            <a href="#" class="dropdown-item" data-extension="docx">{% trans %}DOCX{% endtrans %}</a>
+            <a href="#" class="dropdown-item" data-extension="pdf">{% trans %}PDF{% endtrans %}</a>
+            <a href="#" class="dropdown-item" data-extension="xlsx" data-document="false">{% trans %}Excel{% endtrans %}</a>
+            <a href="#" class="dropdown-item" data-extension="csv" data-document="false">{% trans %}CSV{% endtrans %}</a>
+          </div>
         </div>
       </div>
 
-- 
GitLab