From b5cdeaa76ea8419d10d544d67dd048b982fd1cdc Mon Sep 17 00:00:00 2001
From: Svyatoslav Mikhaylov <Svyatoslav.Mikhaylov@jetbrains.com>
Date: Mon, 8 Mar 2021 22:16:36 +0300
Subject: [PATCH] feat: improve dropdown, add dark theme, add hover event

---
 src/v2/scss/components/_dropdown.scss       | 56 ++++++++++++++++++---
 src/v2/scss/layouts/_menu.scss              |  8 ++-
 templates/v2/components/menu/_macros.jinja2 | 13 +++--
 3 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/src/v2/scss/components/_dropdown.scss b/src/v2/scss/components/_dropdown.scss
index dfd87cf9..33d0202b 100644
--- a/src/v2/scss/components/_dropdown.scss
+++ b/src/v2/scss/components/_dropdown.scss
@@ -9,9 +9,7 @@ $dropdown-box-shadow: 0 0 1rem rgba($black, .175);
 $dropdown-color: $body-color;
 $dropdown-divider-bg: $gray-lighter;
 $dropdown-divider-margin-y: $nav-divider-margin-y;
-// FIXME: font-size-content?
-$dropdown-font-size: $font-size-base;
-
+$dropdown-font-size: $font-size-content-base;
 $dropdown-link-color: $black;
 $dropdown-link-hover-color: $black;
 $dropdown-link-hover-bg: $gray-lighter;
@@ -20,11 +18,11 @@ $dropdown-link-active-color: $component-active-color;
 $dropdown-link-active-bg: $component-active-bg;
 $dropdown-link-disabled-color: $gray-disabled;
 
-$dropdown-item-padding-y: spacer("1x");
-$dropdown-item-padding-x: spacer("3x");
+$dropdown-item-padding-y: spacer("2x");
+$dropdown-item-padding-x: spacer("2x");
 
 $dropdown-header-color: $gray-disabled;
-$dropdown-border-radius: 4px;
+$dropdown-border-radius: 0;
 
 $caret-width: 0;
 $caret-vertical-align:        $caret-width * .85 !default;
@@ -33,9 +31,55 @@ $caret-spacing:               $caret-width * .85 !default;
 // Imports
 @import "bootstrap/scss/dropdown";
 
+.dropdown.theme-dark {
+  color: $white;
+
+  .dropdown-menu {
+    background-color: lighten($gray-darker, 5);
+    box-shadow: none;
+    padding-bottom: 0;
+  }
+
+  .dropdown-item {
+    color: $white;
+    &:hover {
+      background-color: $gray-dark;
+    }
+  }
+
+  .svg-icon {
+    width: 1em;
+    height: 1em;
+    margin-left: 4px;
+    fill: $white;
+  }
+
+  ._arrow-right {
+    &::after {
+      border-bottom: 6px solid lighten($gray-darker, 5);
+    }
+  }
+
+  .dropdown-divider {
+    border-top-color: $gray-dark;
+  }
+}
+
+.nav-item.dropdown:hover {
+  .nav-link {
+    opacity: 1;
+    background-color: lighten($gray-darker, 5);
+  }
+
+  > .dropdown-menu {
+    display: block;
+  }
+}
+
 .dropdown-menu {
   border: none;
   box-shadow: $dropdown-box-shadow;
+  margin: -$nav-link-margin 0 0 $nav-link-margin;
 }
 
 ._arrow-right {
diff --git a/src/v2/scss/layouts/_menu.scss b/src/v2/scss/layouts/_menu.scss
index 304174b0..10fe3d03 100644
--- a/src/v2/scss/layouts/_menu.scss
+++ b/src/v2/scss/layouts/_menu.scss
@@ -302,7 +302,7 @@ body {
 }
 
 .dropdown-user-menu {
-  margin-left: auto;
+  margin-left: auto; //for mobile view
   margin-right: -$navbar-toggler-padding-x;
 
   ._user {
@@ -320,9 +320,13 @@ body {
   }
 
   .dropdown-menu {
-    font-size: $font-size-content-base;
     right: $navbar-toggler-padding-x;
     left: auto;
+    border-radius: 4px;
+  }
+
+  .dropdown-item {
+    padding: spacer("1x") spacer("3x");
   }
 
   .btn {
diff --git a/templates/v2/components/menu/_macros.jinja2 b/templates/v2/components/menu/_macros.jinja2
index 49dd4e7d..5f853923 100644
--- a/templates/v2/components/menu/_macros.jinja2
+++ b/templates/v2/components/menu/_macros.jinja2
@@ -36,9 +36,14 @@
                         <li class="nav-item">
                             <a class="nav-link _active" href="/v2/pages/about/">О центре</a>
                         </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="/v2/pages/programs/">Программы</a>
-                        </li>
+                      <li class="nav-item dropdown theme-dark">
+                         <a class="nav-link">Программы {{ macros.svg_icon('arrow-bottom') }}</a>
+                        <div class="dropdown-menu">
+                            <a class="dropdown-item" href="#">Computer science</a>
+                            <a class="dropdown-item" href="#">Data science</a>
+                            <a class="dropdown-item" href="#">Software engeneering</a>
+                        </div>
+                      </li>
                         <li class="nav-item">
                             <a class="nav-link" href="#">Курсы</a>
                         </li>
@@ -176,4 +181,4 @@
     {% endif %}
     </div>
     {% if show_notification %}<div class="top-banner-spacer"></div>{% endif %}
-{%- endmacro %}
\ No newline at end of file
+{%- endmacro %}