Add workaround for reactive dropdown in mobile header

Dhruvi16 · Dhruvi16 · commit 0a183b94c70e · 2020-05-26T16:09:27.000+05:30
diff --git a/themes/vocabulary_theme/templates/layout.html b/themes/vocabulary_theme/templates/layout.html
@@ -4,7 +4,6 @@
 <link rel="shortcut icon" type="image/x-icon" href="{{ '/static/favicon.ico'|url }}">
 <link rel="stylesheet" href="{{ '/static/gen/style.css'|url }}">
 <link rel="stylesheet" href="{{ get_pygments_stylesheet()|url }}">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativecommons/vocabulary/css/vocabulary.css">
 <meta property="og:site_name" content="Creative Commons" />
 <meta property="og:title" content="{{ this.title }}" />
 {% if this.description %}
@@ -41,7 +40,7 @@
 
 <body>
   <div class="ga-script">{{ generate_google_analytics() }}</div>
-  <header class="bulma">
+  <header>
     <nav class="navbar">
       <div class="navbar-brand">
         {% set cc_logo = site.get('/').attachments.get('open_source.svg') %}
diff --git a/webpack/js/main.js b/webpack/js/main.js
@@ -16,6 +16,22 @@ $(document).ready(function () {
         $(".navbar-burger").toggleClass("is-active");
         $(".navbar-menu").toggleClass("is-active");
     });
+
+    $(".navbar-item.has-dropdown").click(function() {
+        if ($(".navbar-burger").is(':visible')) {
+            $(this).toggleClass("is-active");
+        }
+    });
+    $(".navbar-item > .navbar-link").click(function(e) {
+        if ($(".navbar-burger").is(':visible')) {
+            e.preventDefault();
+        }
+    });
+    $(window).resize(function() {
+        if (!$(".navbar-burger").is(':visible') && $(".navbar-item.has-dropdown.is-active").length) {
+            $(".navbar-item.has-dropdown.is-active").removeClass('is-active');
+        }
+    });
 });
 
 const getFullyQualifiedUrl = (path, version) => {
diff --git a/webpack/sass/main.scss b/webpack/sass/main.scss
@@ -1,11 +1,13 @@
+@import "../node_modules/@creativecommons/vocabulary/css/vocabulary.css";
+
 //Color Variables
 $pumpkin: #e15803;
 $orange: #FB7928;
 $candy: #EE5B32;
 $jet-black: #333333;
 $grey: rgba(255, 255, 255, 0.6);
 $blue: #00b5da;
-$white: #fff;
+$white: #ffffff;
 
 //Color Configs
 $brand-theme: $candy;
@@ -15,6 +17,20 @@ $brand-theme-light: $orange;
 $text-color: $jet-black;
 $project-card-theme: $blue;
 
+
+.navbar-item {
+  &.has-dropdown {
+    .navbar-dropdown {
+      display: none;
+    }
+    &.is-active {
+      .navbar-dropdown {
+        display: block;
+      }
+    }
+  }
+}
+
 h2 {
   font-weight: 600;
   padding-bottom: 0.5rem;
@@ -118,4 +134,3 @@ img {
     animation:octocat-wave 560ms ease-in-out
   }
 }
-
