Finish mobile burger menu

app/assets/stylesheets/_nav.scss

@@ -12,20 +12,21 @@
   left: 0;
   background-color: $background-sexy;
   position: absolute;
-  display: none;
+  display: flex;
   flex-direction: column;
   align-items: flex-start;
   z-index: 999999999;
   width: 100vw;
-  height: 40vh;
+  height: 93vh;
 
   .profile {
     margin-top: 20px;
     width: 100%;
     display: flex;
     flex-flow: row nowrap;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
+    padding-left: 50px;
 
     .nav_profile_image {
       width: 20%;
@@ -43,7 +44,7 @@
     padding-left: 50px;
     ul {
       display: grid;
-      grid-template-columns: 25% 65%;
+      grid-template-columns: 25% 75%;
       grid-template-rows: auto;
       column-gap: 10%;
       font-size: $size-heading;
@@ -61,6 +62,9 @@
         & > a {
           color: white;
         }
+        .is-current-page {
+          color: $highlight;
+        }
         &:nth-child(1) {
           grid-area: text-feed;
         }
@@ -76,7 +80,7 @@
       }
       .menu-img {
         display: flex;
-        justify-self: right;
+        justify-self: flex-start;
         width: 100%;
         display: inline;
         text-align: right;
@@ -106,6 +110,25 @@
     }
     align-self: center;
   }
+
+  .menu-tags {
+    width: 100%;
+    display: flex;
+    margin-top: 30px;
+    padding-left: 0;
+    justify-self: center;
+    align-self: center;
+    justify-content: center;
+    align-items: center;
+    flex-flow: row wrap;
+    overflow-y: scroll;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+    border-radius: 0.5rem;
+    text-align: center;
+    font-family: $heading;
+    font-size: $text;
+  }
 }
 
 nav {

app/javascript/packs/hamburgers.js

-
-
 document.addEventListener('turbolinks:load', (event) => {
     let menuButton = document.getElementById('hamburger')
     let burgerNavDiv = document.getElementById("burger-nav-items")
@@ -14,9 +12,10 @@ document.addEventListener('turbolinks:load', (event) => {
             burgerNavDiv.style.display = "none"
         }
     }
+
+
+
     menuButton.addEventListener('click', toggleBurgerMenu)
-    // navigationLinks.forEach(link => {
-    //     link.addEventListener('click', toggleBurgerMenu);
-    // })
+
 
 })

app/views/layouts/application.html.erb

@@ -42,6 +42,15 @@
                     <%= form.text_field :query, class: "search-form-small", remote: true %>
                 <% end %>
             </div>
+        <div class="menu-tags" id="menu-tags">
+                <% most_used_tags_sorted.each do |tag| %>
+                    <% if current_user.user_tag_list.include? tag.to_s %>
+                        <%= link_to tag, remove_tag_user_path(:tagname => tag.to_s, id: current_user),  class: 'tag owned', remote: true, method: :put %>
+                    <% else %>
+                        <%= link_to tag, add_tag_user_path(:tagname => tag.to_s, id: current_user), class: 'tag', remote: true, method: :put %>
+                    <% end %>
+                <% end %>
+            </div>
                 
                 
             </div>