Created navbar w/ dropdowns

README.md

@@ -20,11 +20,12 @@ I probably won't write many tests, if any at all
 + [ ] Settings button & popup
 + [x] Remove white thingies and replace them by actual borders
 + [ ] Mashup profiles! / Codeforces automation
-+ [ ] Navbar dropdowns
++ [x] Navbar dropdowns
     + Groups => My Groups, All Groups
     + Contests => My Contests, All Contests
     + Add "Friends" tab?
-+ [ ] Goal: decrease number of clicks to navigate the site
++ [ ] Goal: decrease number of clicks to navigate the site (partially done with navbar dropdowns!)
 + [ ] Remove bloat from parcel's bundle
-+ [ ] File dropdown to submit
-+ [ ] Load pages with ajax so the script doesn't have to load every time (Hard, I think)
++ [ ] File drag & drop to submit
++ [ ] Load pages with ajax so the script doesn't have to load every time (Hard, I think)
++ [ ] "Google this problem" button (for mashups)

src/dom.js

@@ -1,8 +1,15 @@
+/**
+ * @file Utilities to manipulate the DOM
+ */
+
 module.exports = {
     $(query, element) {
         return (element || document).querySelector(query);
     },
     $$(query, element) {
         return (element || document).querySelectorAll(query);
     },
+    on(element, event, handler) {
+        element.addEventListener(event, handler);
+    },
 };

src/navbar.js

@@ -0,0 +1,107 @@
+/**
+ * @file Provides drowdown menus for the main navbar, for better site navigation
+ */
+
+let dom = require('./dom');
+
+module.exports = function() {
+    // Get user handle
+    const handle = dom.$('.lang-chooser').children[1].children[0].innerText.trim();
+
+    let oldNav = dom.$('.main-menu-list');
+    let newNav = document.createElement('nav');
+    newNav.className = 'cfpp-navbar';
+
+    // Without this the dropdowns don't appear
+    oldNav.parentNode.parentNode.style.overflow = 'visible';
+
+    let keys = {
+        "/groups": {
+            "My Groups": `/groups/with/${handle}`,
+            "My Teams": `/teams/with/${handle}`,
+        },
+        "/problemset": {
+            "Status": "/problemset/status",
+            "Friends Status": "/problemset/status?friends=on",
+            "My Submissions": `/submissions/${handle}`,
+            "Favourites": `/favourite/problems`,
+        },
+        "/contests": {
+            "My Contests": `/contests/with/${handle}`,
+        },
+        "/gyms": {
+            "Mashups": "/mashups",
+        },
+        "/ratings": {
+            "Friends": "/ratings/friend/true",
+        },
+    };
+
+    // Iterate over all nav items and include them the new navbar
+    for (let item of oldNav.children) {
+        let link = item.children[0]; // <a> tag
+
+        // Create new item and append the old <a> to it
+        let newItem = document.createElement('div');
+        newItem.className = 'cfpp-navbar-item';
+        newItem.appendChild(link);
+
+        // Add dropdown menu, if needed 
+        const href = link.getAttribute('href');
+        if (keys[href]) {
+            let dropdown = document.createElement('div');
+            dropdown.className = 'cfpp-dropdown';
+
+            for (let ddText in keys[href]) {
+                let ddItem = document.createElement('a');
+                ddItem.innerText = ddText;
+                ddItem.href = keys[href][ddText];
+                dropdown.appendChild(ddItem);
+            }
+
+            newItem.appendChild(dropdown);
+        }
+
+        newNav.appendChild(newItem);
+    }
+
+    oldNav.replaceWith(newNav);
+
+
+    // Create styling for the new menu
+    const style = `
+    .cfpp-navbar {
+        margin-left: 1.5em;
+    }
+    .cfpp-navbar-item {
+        display: inline-block;
+        position: relative;
+        margin-right: 1.5em;
+    }
+    .cfpp-navbar-item>a {
+        color: #212121;
+    }
+    .cfpp-dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        width: 200%;
+        z-index: 99;
+        display: none;
+        background: #212121;
+        padding: 1em;
+        box-shadow: 1px 7px 19px #00000054;
+    }
+    .cfpp-dropdown a {
+        display: block;
+        color: #E0E0E0;
+    }
+    .cfpp-navbar-item:hover .cfpp-dropdown {
+        display: block;
+    }
+    `;
+
+    let styleTag = document.createElement('style');    
+    styleTag.innerHTML = style;
+    document.body.appendChild(styleTag);
+};