From 0e4de968db009fcb2fa5462ce419f7565fb03523 Mon Sep 17 00:00:00 2001
From: Corban-Lee <77944149+Corban-Lee@users.noreply.github.com>
Date: Sat, 21 Oct 2023 21:32:20 +0100
Subject: [PATCH] Dynamic sidebar implementation

---
 src/static/css/custom.css |  12 -----
 src/static/js/base.js     |  17 ++++++
 src/static/scss/base.scss | 105 ++++++++++++++++++++++++++++++++++++++
 src/templates/base.html   |  50 +++++++++++-------
 4 files changed, 154 insertions(+), 30 deletions(-)
 create mode 100644 src/static/js/base.js
 create mode 100644 src/static/scss/base.scss

diff --git a/src/static/css/custom.css b/src/static/css/custom.css
index 7db4c8d..17864ee 100644
--- a/src/static/css/custom.css
+++ b/src/static/css/custom.css
@@ -124,22 +124,10 @@ input[type='radio']:checked {
     box-shadow: none;
 }
 
-#sidebar {
-    width: 80px;
-}
-
-#webContent {
-    margin-left: 80px;
-}
-
 .light-tooltip {
     --bs-tooltip-bg: #04385c;
 }
 
-#sidebar .nav-item > a:hover {
-    background-color: rgba(0, 0, 0, 0.15);
-}
-
 html, body {
     overflow: hidden !important;
     max-width: 100vw;
diff --git a/src/static/js/base.js b/src/static/js/base.js
new file mode 100644
index 0000000..53852ad
--- /dev/null
+++ b/src/static/js/base.js
@@ -0,0 +1,17 @@
+$(".sidebar-collapse-button").on("click", function () {
+
+    const sidebar = $("#sidebar")
+    const content = $("#webContent")
+    const collapsed = !sidebar.hasClass("sidebar-enlarged");
+
+    if (collapsed) {
+        sidebar.addClass("sidebar-enlarged");
+        sidebar.find(".nav-item").tooltip("disable");
+        content.addClass("webcontent-collapsed")
+    }
+    else {
+        sidebar.removeClass("sidebar-enlarged");
+        sidebar.find(".nav-item").tooltip("enable");
+        content.removeClass("webcontent-collapsed")
+    }
+});
diff --git a/src/static/scss/base.scss b/src/static/scss/base.scss
new file mode 100644
index 0000000..5c0bc98
--- /dev/null
+++ b/src/static/scss/base.scss
@@ -0,0 +1,105 @@
+#webContent {
+    margin-left: 80px;
+    transition: margin 400ms ease-in-out;
+
+    &.webcontent-collapsed {
+        margin-left: 280px !important;
+    }
+}
+
+#sidebar {
+
+    color: white;
+    background-color: #04385c;
+
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+
+    position: fixed;
+    height: 100%;
+    z-index: 3;
+    padding: 1rem 0;
+
+    transition: width 400ms ease-in-out;
+    overflow: hidden;
+
+    .sidebar-collapse-button {
+
+        display: inline-block;
+        color: white;
+        border: none;
+        background: none;
+        transition: transform 200ms ease-in-out;
+
+    }
+
+    &.sidebar-enlarged {
+        width: 280px !important;
+
+        .sidebar-collapse-button > i { transform: rotate(-180deg); }
+
+        a.nav-link {
+            text-align: start !important;
+
+            i.bi {
+                margin: 0 1rem 0 .5rem !important;
+            }
+
+            span.sidebar-item-text {
+                display: inline !important;
+            }
+        }
+    }
+
+    &:not(.sidebar-enlarged) {
+        width: 80px;
+    }
+
+    #sidebar-brand {
+
+        max-width: 120px;
+        align-self: center;
+        display: flex;
+        align-items: center;
+        color: inherit;
+        text-decoration: none;
+        padding: 0 .5rem;
+
+    }
+
+    ul.sidebar-items {
+
+        flex-direction: column;
+        margin-bottom: auto;
+
+        li.nav-item {
+
+            a.nav-link {
+
+                color: inherit;
+                transition: all 200ms;
+                text-align: center;
+                white-space: nowrap;
+                
+                &:hover { background-color: rgba(0, 0, 0, 0.15); }
+                
+                i.bi {
+                    // transition: all 200ms ease-in-out;
+                    // margin: 0 auto;   
+                }
+
+                span.sidebar-item-text {
+
+                    display: none;
+
+                }
+
+            }
+
+        }
+
+    }
+
+}
+
diff --git a/src/templates/base.html b/src/templates/base.html
index 783f39a..918328d 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -1,3 +1,4 @@
+{% load compress %}
 <!DOCTYPE html>
 <html lang="en">
     <head>
@@ -6,10 +7,13 @@
         <title>{% block title %}{% endblock title %}Angling Trust Results</title>
         
         {% load static %}
-        <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
-        <link rel="stylesheet" href="{% static 'icons/font/bootstrap-icons.min.css' %}">
-        <link rel="stylesheet" href="{% static 'css/custom.css' %}">
-        <link rel="stylesheet" href="{% static 'css/index.css' %}">
+        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" media="screen">
+        <link rel="stylesheet" type="text/css" href="{% static 'icons/font/bootstrap-icons.min.css' %}" media="screen">
+        <link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}" media="screen">
+        <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" media="screen">
+        {% compress css %}
+            <link rel="stylesheet" type="text/x-scss" href="{% static 'scss/base.scss' %}" media="screen">
+        {% endcompress %}
         {% include 'fonts.html' %}
         {% block style %}
         {% endblock style %}
@@ -17,40 +21,49 @@
     <body class="font-helvetica mw-100">
 
         <div class="d-flex align-content-stretch h-100 align-self-stretch">
-            <aside class="company-bg text-white d-flex flex-column flex-shrink-0 py-3 position-fixed h-100 shadow-lg z-3" id="sidebar">
-                <a href="/" class="d-flex align-items-center mb-3 mb-md-0 text-reset text-decoration-none px-2">
+            <aside id="sidebar" class="shadow-lg font-raleway">
+                <a id="sidebar-brand" class="mb-3 mb-md-0" href="/">
                     <img src="{% static 'img/at-logo.png' %}" alt="" class="w-100">
                 </a>
                 <hr class="mx-2">
-                <ul class="nav nav-pills flex-column mb-auto">
+                <ul class="sidebar-items nav nav-pills">
                     <li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Home">
-                        <a class="nav-link text-reset d-flex align-items-center py-3" href="/">
-                            <i class="bi bi-house-fill fs-4 mx-auto"></i>
+                        <a class="nav-link py-3" href="/">
+                            <i class="bi bi-house-fill fs-4"></i>
+                            <span class="sidebar-item-text">Home</span>
                         </a>
                     </li>
                     <li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Anglers">
-                        <a class="nav-link text-reset d-flex align-items-center py-3" href="/anglers">
-                            <i class="bi bi-people-fill fs-4 mx-auto"></i>
+                        <a class="nav-link py-3" href="/anglers">
+                            <i class="bi bi-people-fill fs-4"></i>
+                            <span class="sidebar-item-text">Anglers</span>
                         </a>
                     </li>
                     <li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Matches">
-                        <a class="nav-link text-reset d-flex align-items-center py-3" href="#">
-                            <i class="bi bi-award-fill fs-4 mx-auto"></i>
+                        <a class="nav-link py-3" href="#">
+                            <i class="bi bi-award-fill fs-4"></i>
+                            <span class="sidebar-item-text">Matches</span>
                         </a>
                     </li>
                     <li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Scoreboard">
-                        <a class="nav-link text-reset d-flex align-items-center py-3" href="#">
-                            <i class="bi bi-clipboard-data-fill fs-4 mx-auto"></i>
+                        <a class="nav-link py-3" href="#">
+                            <i class="bi bi-clipboard-data-fill fs-4"></i>
+                            <span class="sidebar-item-text">Scoreboard</span>
                         </a>
                     </li>
                 </ul>
-                <ul class="nav nav-pills flex-column">
+                <ul class="sidebar-items nav nav-pills mb-0">
                     <li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Admin">
-                        <a class="nav-link text-reset d-flex align-items-center py-3" href="/admin">
-                            <i class="bi bi-person-fill-gear fs-4 mx-auto"></i>
+                        <a class="nav-link py-3" href="/admin">
+                            <i class="bi bi-person-fill-gear fs-4"></i>
+                            <span class="sidebar-item-text">Administration</span>
                         </a>
                     </li>
                 </ul>
+                <hr class="mx-2">
+                <button class="sidebar-collapse-button">
+                    <i class="bi bi-chevron-double-right"></i>
+                </button>
             </aside>
             <div class="flex-grow-1 d-flex flex-column" id="webContent">
                 <div class="bg-body-secondary shadow-sm p-3 align-items-center" id="pageHeader" style="display: flex;">
@@ -73,6 +86,7 @@
         <script src="{% static 'js/jquery.validate.min.js' %}"></script>
         <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
         <script src="{% static 'js/custom.js' %}"></script>
+        <script src="{% static 'js/base.js' %}"></script>
         {% block scripts %}
         {% endblock scripts %}
     </body>