From beeb0579ce111ee2c99bbcb5bc3fbd1174c69018 Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Tue, 18 Feb 2025 21:04:09 -0300
Subject: [PATCH] feat(insights): make sidebar sticky

---
 app/templates/insights/pages/index.html | 125 +++++++++++++-----------
 1 file changed, 67 insertions(+), 58 deletions(-)

diff --git a/app/templates/insights/pages/index.html b/app/templates/insights/pages/index.html
index 3afbe45..3ec8aa3 100644
--- a/app/templates/insights/pages/index.html
+++ b/app/templates/insights/pages/index.html
@@ -4,11 +4,12 @@
 
 {% block content %}
   <div class="container-fluid">
-    <div class="row my-3">
+    <div class="row my-3 h-100">
       <div class="col-lg-2 col-md-3 mb-3 mb-md-0">
-        <div class="">
-          <div class="mb-2 w-100 d-lg-inline-flex d-grid gap-2 flex-wrap justify-content-lg-center" role="group"
-               _="on change
+        <div class="position-sticky tw-top-3">
+          <div class="">
+            <div class="mb-2 w-100 d-lg-inline-flex d-grid gap-2 flex-wrap justify-content-lg-center" role="group"
+                 _="on change
                     set type to event.target.value
                     add .tw-hidden to <#picker-form > div:not(.tw-hidden)/>
 
@@ -28,65 +29,73 @@
                       remove .tw-hidden from #date-range-form
                     end
                     then trigger updated"
-               id="picker-type">
-            <input type="radio" class="btn-check" name="type" value="month" id="monthradio" autocomplete="off" checked>
-            <label class="btn btn-sm btn-outline-primary flex-grow-1" for="monthradio">{% translate 'Month' %}</label>
+                 id="picker-type">
+              <input type="radio" class="btn-check" name="type" value="month" id="monthradio" autocomplete="off"
+                     checked>
+              <label class="btn btn-sm btn-outline-primary flex-grow-1" for="monthradio">{% translate 'Month' %}</label>
 
-            <input type="radio" class="btn-check" name="type" value="year" id="yearradio" autocomplete="off">
-            <label class="btn btn-sm btn-outline-primary flex-grow-1" for="yearradio">{% translate 'Year' %}</label>
+              <input type="radio" class="btn-check" name="type" value="year" id="yearradio" autocomplete="off">
+              <label class="btn btn-sm btn-outline-primary flex-grow-1" for="yearradio">{% translate 'Year' %}</label>
 
-            <input type="radio" class="btn-check" name="type" value="month-range" id="monthrangeradio" autocomplete="off">
-            <label class="btn btn-sm btn-outline-primary flex-grow-1" for="monthrangeradio">{% translate 'Month Range' %}</label>
+              <input type="radio" class="btn-check" name="type" value="month-range" id="monthrangeradio"
+                     autocomplete="off">
+              <label class="btn btn-sm btn-outline-primary flex-grow-1"
+                     for="monthrangeradio">{% translate 'Month Range' %}</label>
 
-            <input type="radio" class="btn-check" name="type" value="year-range" id="yearrangeradio" autocomplete="off">
-            <label class="btn btn-sm btn-outline-primary flex-grow-1" for="yearrangeradio">{% translate 'Year Range' %}</label>
+              <input type="radio" class="btn-check" name="type" value="year-range" id="yearrangeradio"
+                     autocomplete="off">
+              <label class="btn btn-sm btn-outline-primary flex-grow-1"
+                     for="yearrangeradio">{% translate 'Year Range' %}</label>
 
-            <input type="radio" class="btn-check" name="type" value="date-range" id="daterangeradio" autocomplete="off">
-            <label class="btn btn-sm btn-outline-primary flex-grow-1" for="daterangeradio">{% translate 'Date Range' %}</label>
-          </div>
-          <form id="picker-form"
-               _="install init_datepicker
+              <input type="radio" class="btn-check" name="type" value="date-range" id="daterangeradio"
+                     autocomplete="off">
+              <label class="btn btn-sm btn-outline-primary flex-grow-1"
+                     for="daterangeradio">{% translate 'Date Range' %}</label>
+            </div>
+            <form id="picker-form"
+                  _="install init_datepicker
                   on change trigger updated">
-            <div id="month-form" class="">
-              {% crispy month_form %}
-            </div>
-            <div id="year-form" class="tw-hidden">
-              {% crispy year_form %}
-            </div>
-            <div id="month-range-form" class="tw-hidden">
-              {% crispy month_range_form %}
-            </div>
-            <div id="year-range-form" class="tw-hidden">
-              {% crispy year_range_form %}
-            </div>
-            <div id="date-range-form" class="tw-hidden">
-              {% crispy date_range_form %}
-            </div>
-          </form>
-        </div>
-        <hr class="mt-0">
-        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
-             aria-orientation="vertical">
-          <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
-                  type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
-                  hx-get="{% url 'insights_sankey_by_account' %}" hx-include="#picker-form, #picker-type"
-                  hx-indicator="#tab-content"
-                  hx-target="#tab-content">{% trans 'Account Flow' %}
-          </button>
-          <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
-                  type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
-                  hx-get="{% url 'insights_sankey_by_currency' %}"
-                  hx-include="#picker-form, #picker-type"
-                  hx-indicator="#tab-content"
-                  hx-target="#tab-content">{% trans 'Currency Flow' %}
-          </button>
-          <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
-                  type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
-                  hx-get="{% url 'category_explorer_index' %}"
-                  hx-include="#picker-form, #picker-type"
-                  hx-indicator="#tab-content"
-                  hx-target="#tab-content">{% trans 'Category Explorer' %}
-          </button>
+              <div id="month-form" class="">
+                {% crispy month_form %}
+              </div>
+              <div id="year-form" class="tw-hidden">
+                {% crispy year_form %}
+              </div>
+              <div id="month-range-form" class="tw-hidden">
+                {% crispy month_range_form %}
+              </div>
+              <div id="year-range-form" class="tw-hidden">
+                {% crispy year_range_form %}
+              </div>
+              <div id="date-range-form" class="tw-hidden">
+                {% crispy date_range_form %}
+              </div>
+            </form>
+          </div>
+          <hr class="mt-0">
+          <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
+               aria-orientation="vertical">
+            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
+                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                    hx-get="{% url 'insights_sankey_by_account' %}" hx-include="#picker-form, #picker-type"
+                    hx-indicator="#tab-content"
+                    hx-target="#tab-content">{% trans 'Account Flow' %}
+            </button>
+            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
+                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                    hx-get="{% url 'insights_sankey_by_currency' %}"
+                    hx-include="#picker-form, #picker-type"
+                    hx-indicator="#tab-content"
+                    hx-target="#tab-content">{% trans 'Currency Flow' %}
+            </button>
+            <button class="nav-link" id="v-pills-tab" data-bs-toggle="pill" data-bs-target="#v-pills-content"
+                    type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
+                    hx-get="{% url 'category_explorer_index' %}"
+                    hx-include="#picker-form, #picker-type"
+                    hx-indicator="#tab-content"
+                    hx-target="#tab-content">{% trans 'Category Explorer' %}
+            </button>
+          </div>
         </div>
       </div>
       <div class="col-md-9 col-lg-10">