From 7eba95098607e22587d8e927d71720c64aea70ae Mon Sep 17 00:00:00 2001
From: Tony Air <tony@thewebdevelopmentagency.com>
Date: Mon, 19 Aug 2019 14:56:29 +0700
Subject: [PATCH] hover dropdown

---
 app/client/src/js/app.js                      |  2 +-
 app/client/src/scss/_components/_ui.main.scss | 67 +++++++++++++++++++
 app/templates/Includes/Navigation.ss          |  2 +-
 3 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/app/client/src/js/app.js b/app/client/src/js/app.js
index 1ec0731..f23e37b 100644
--- a/app/client/src/js/app.js
+++ b/app/client/src/js/app.js
@@ -9,7 +9,7 @@ import 'bootstrap/js/dist/carousel';
 import 'bootstrap/js/dist/collapse';
 
 // conflicting with bootstrap-select/dist/js/bootstrap-select
-//import 'bootstrap/js/dist/dropdown';
+import 'bootstrap/js/dist/dropdown';
 
 import 'bootstrap/js/dist/modal';
 import 'bootstrap/js/dist/tooltip';
diff --git a/app/client/src/scss/_components/_ui.main.scss b/app/client/src/scss/_components/_ui.main.scss
index 51c6841..3c398e9 100644
--- a/app/client/src/scss/_components/_ui.main.scss
+++ b/app/client/src/scss/_components/_ui.main.scss
@@ -137,3 +137,70 @@ button, input, optgroup, select, textarea,
 
     @extend .alert-danger;
 }
+
+// dropdown icon
+.dropdown.show .dropdown-toggle::after,
+.dropdown-toggle.active-dropdown::after,
+.dropdown-toggle.active::after {
+    transform: rotate(-90deg);
+}
+
+// dropdown hover
+@media only screen and (min-width: map-get($grid-breakpoints, "md")) {
+    .dropdown-hover .collapse ul li {
+        position: relative;
+    }
+
+    .dropdown-hover .collapse ul li:hover {
+        > .dropdown-toggle::after {
+            transform: rotate(-90deg);
+        }
+
+        > ul {
+            display: block;
+        }
+    }
+
+    .dropdown-hover .collapse ul ul {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        min-width: 250px;
+        display: none;
+    }
+
+    /*******/
+    .dropdown-hover .collapse ul ul li {
+        position: relative;
+    }
+
+    .dropdown-hover .collapse ul ul li:hover > ul {
+        display: block;
+    }
+
+    .dropdown-hover .collapse ul ul ul {
+        position: absolute;
+        top: 0;
+        left: 100%;
+        min-width: 250px;
+        display: none;
+    }
+
+    /*******/
+    .dropdown-hover .collapse ul ul ul li {
+        position: relative;
+    }
+
+    .dropdown-hover .collapse ul ul ul li:hover ul {
+        display: block;
+    }
+
+    .dropdown-hover .collapse ul ul ul ul {
+        position: absolute;
+        top: 0;
+        left: -100%;
+        min-width: 250px;
+        display: none;
+        z-index: 1;
+    }
+}
diff --git a/app/templates/Includes/Navigation.ss b/app/templates/Includes/Navigation.ss
index a1e8a18..a15a918 100644
--- a/app/templates/Includes/Navigation.ss
+++ b/app/templates/Includes/Navigation.ss
@@ -1,4 +1,4 @@
-<nav id="{$NavID}" class="navbar navbar-expand-lg navbar-light bg-light">
+<nav id="{$NavID}" class="navbar navbar-expand-lg navbar-light bg-light dropdown-hover">
     <button
             class="navbar-toggler"
             type="button"