From 2338956aa5122acd941d946d93200e8ef162eec1 Mon Sep 17 00:00:00 2001
From: horus
Date: Thu, 1 Oct 2020 01:20:28 +0200
Subject: add unused prototype for sticky sidebar

---
 resources/js/sidebar.js                   | 19 +++++++++
 resources/sass/sidebar.scss               | 50 +++++++++++++++++++++++
 resources/views/layouts/sidebar.blade.php | 67 +++++++++++++++++++++++++++++++
 3 files changed, 136 insertions(+)
 create mode 100644 resources/js/sidebar.js
 create mode 100644 resources/sass/sidebar.scss
 create mode 100644 resources/views/layouts/sidebar.blade.php

diff --git a/resources/js/sidebar.js b/resources/js/sidebar.js
new file mode 100644
index 0000000..2d54fc8
--- /dev/null
+++ b/resources/js/sidebar.js
@@ -0,0 +1,19 @@
+$(document).ready(function () {
+
+	/*
+    $("#sidebar").mCustomScrollbar({
+         theme: "minimal"
+    });
+    */
+
+    $('#sidebarCollapse').on('click', function () {
+        // open or close navbar
+        $('#sidebar').toggleClass('active');
+        // close dropdowns
+        $('.collapse.in').toggleClass('in');
+        // and also adjust aria-expanded attributes we use for the open/closed arrows
+        // in our CSS
+        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
+    });
+
+});
diff --git a/resources/sass/sidebar.scss b/resources/sass/sidebar.scss
new file mode 100644
index 0000000..3755d4d
--- /dev/null
+++ b/resources/sass/sidebar.scss
@@ -0,0 +1,50 @@
+.wrapper {
+    display: flex;
+    width: 100%;
+}
+
+#sidebar {
+    width: 250px;
+    position: fixed;
+    /** Needs sticky navbar to work. */
+    top: 55px;
+    left: 0;
+    height: 100vh;
+    z-index: 999;
+    background: rgb(255, 255, 255, 0.35);
+    transition: all 0.3s;
+}
+
+#sidebar .sidebar-header {
+    padding: 20px;
+/** TODO
+    background: #6d7fcc;
+*/
+}
+
+#sidebar ul.components {
+    padding: 20px 0;
+}
+
+#sidebar ul p {
+    padding: 10px;
+}
+
+#sidebar ul li a {
+    padding: 10px;
+    font-size: 1.1em;
+    display: block;
+}
+#sidebar ul li a:hover {
+/** TODO
+    color: #7386D5;
+    background: #fff;
+*/
+}
+
+#sidebar ul li.active > a, a[aria-expanded="true"] {
+/** TODO
+    color: #fff;
+    background: #6d7fcc;
+*/
+}
diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php
new file mode 100644
index 0000000..4584b38
--- /dev/null
+++ b/resources/views/layouts/sidebar.blade.php
@@ -0,0 +1,67 @@
+<!-- Sidebar -->
+<nav id="sidebar">
+
+        <div class="sidebar-header">
+	    <form id="season_change" action="/changeSeason/" method="get">
+		<div class="form-group">
+		    <label for="season_switcher">
+            		<h3>Change Season</h3>
+		    </label>
+		    <select name="season" id="season_switcher" class="custom-select" required>
+@foreach( getChangeSeasonOptions() as $season )
+			<option value="{{ $season->season_name }}-{{ $season->season_year }}">{{ $season->season_name }} {{ $season->season_year }}</option>
+@endforeach
+		    </select>
+		</div>
+		<button class="btn btn-primary" type="submit">Submit form</button>
+	    </form>
+        </div>
+
+<!--
+        <div class="sidebar-header">
+            <h3>Bootstrap Sidebar</h3>
+        </div>
+
+        <ul class="list-unstyled components">
+            <p>TODO</p>
+            <li class="active">
+                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
+                <ul class="collapse list-unstyled" id="homeSubmenu">
+                    <li>
+                        <a href="#">Home 1</a>
+                    </li>
+                    <li>
+                        <a href="#">Home 2</a>
+                    </li>
+                    <li>
+                        <a href="#">Home 3</a>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <a href="#">About</a>
+            </li>
+            <li>
+                <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
+                <ul class="collapse list-unstyled" id="pageSubmenu">
+                    <li>
+                        <a href="#">Page 1</a>
+                    </li>
+                    <li>
+                        <a href="#">Page 2</a>
+                    </li>
+                    <li>
+                        <a href="#">Page 3</a>
+                    </li>
+                </ul>
+            </li>
+            <li>
+                <a href="#">Portfolio</a>
+            </li>
+            <li>
+                <a href="#">Contact</a>
+            </li>
+        </ul>
+-->
+
+</nav>
-- 
cgit v1.2.3