Me likey reponsive

app/assets/stylesheets/_conversation.scss

@@ -32,6 +32,10 @@
       "avatar partner"
       "avatar message";
 
+    @include mobile {
+      width: 250px;
+    }
+
     transition: all 0.5s ease;
 
     &:hover {
@@ -43,6 +47,10 @@
       grid-area: avatar;
       margin: auto;
       font-family: $heading;
+
+      @include mobile {
+        max-height: 50%;
+      }
     }
 
     .conversation-right {
@@ -83,6 +91,16 @@
     "create";
   border-radius: 10px;
 
+  @include tablet {
+    width: 70%;
+  }
+
+  @include mobile {
+    width: 100%;
+    height: 90%;
+    margin-top: 0;
+  }
+
   h1 {
     color: black;
     border-radius: 10px 10px 0 0;
@@ -94,6 +112,10 @@
     justify-content: space-between;
     align-items: center;
 
+    @include tablet {
+      font-size: $size-heading;
+    }
+
     img {
       height: 80%;
     }
@@ -124,6 +146,10 @@
       grid-template-rows: 30px auto;
       grid-template-columns: 100%;
 
+      @include mobile {
+        width: 70%;
+      }
+
       &.left {
         align-self: flex-start;
       }

app/assets/stylesheets/_nav.scss

@@ -19,14 +19,20 @@
   width: 100vw;
   height: 93vh;
 
+  .logout {
+    width: 10%;
+    filter: invert(1);
+    justify-self: center;
+    margin-left: 5%;
+  }
+
   .profile {
     margin-top: 20px;
     width: 100%;
     display: flex;
     flex-flow: row nowrap;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: center;
-    padding-left: 50px;
 
     .nav_profile_image {
       width: 20%;

app/assets/stylesheets/_users.scss

@@ -17,6 +17,11 @@
     justify-content: center;
     flex-wrap: wrap;
     align-items: flex-start;
+    @include tablet {
+      justify-content: flex-start;
+      flex-direction: column;
+      align-items: center;
+    }
   }
 
   .single-user-container {
@@ -35,6 +40,16 @@
     grid-template-areas: "avatar content";
     transition: all 0.5s ease;
 
+    @include tablet {
+      margin: 15px;
+      max-width: 40%;
+    }
+
+    @include mobile {
+      margin: 15px;
+      max-width: 100%;
+    }
+
     &:hover {
       background-color: $background-light;
     }
@@ -173,6 +188,15 @@
     "avatar avatar"
     "edit statistics";
 
+  @include tablet {
+    grid-template-rows: auto;
+    grid-template-columns: 100%;
+    grid-template-areas:
+      "avatar "
+      "edit"
+      "statistics";
+  }
+
   .profile-avatar-section {
     grid-area: avatar;
     display: flex;
@@ -186,6 +210,9 @@
       align-items: center;
       img {
         width: 50%;
+        @include tablet {
+          width: 40%;
+        }
       }
     }
 
@@ -202,6 +229,11 @@
     justify-self: center;
     align-self: center;
     border-radius: 10px;
+
+    @include tablet {
+      min-height: 400px;
+      margin-bottom: 30px;
+    }
   }
 
   .profile-statistics-section {

app/assets/stylesheets/main.scss

@@ -88,7 +88,7 @@ main {
   .fab {
     position: absolute;
     z-index: 100000;
-    bottom: 5%;
+    bottom: 3%;
     right: 2%;
     width: 4rem;
     background-color: $highlight;

app/javascript/packs/hamburgers.js

@@ -13,9 +13,13 @@ document.addEventListener('turbolinks:load', (event) => {
         }
     }
 
-
+    function fixNavLinks() {
+        menuButton.classList.remove("is-active")
+    }
 
     menuButton.addEventListener('click', toggleBurgerMenu)
-
+    navigationLinks.forEach(link => {
+        link.addEventListener('click', fixNavLinks)
+    })
 
 })

app/views/layouts/application.html.erb

@@ -23,6 +23,7 @@
                 <div class="profile">
                     <%= image_tag(current_user.avatar.variant(resize_to_fill: [400,400]), class: "avatar nav_profile_image") %> 
                     <h2 class="profile_name"> <% if !current_user.nil? %> <%= current_user.username %> <% end %></h2>
+                    <%= link_to image_tag('sign-out-alt-solid.svg'), destroy_user_session_path, method: :delete, :class => ['logout']  %>
                 </div> 
                 <div class="menu-points">
                     <ul>
@@ -36,23 +37,21 @@
                         <li><%= link_to "Profile", user_path(current_user), :class => "#{'is-current-page' if current_page?(user_path(current_user))} no-link-styles"%></li>
                     </ul>
                 </div>
-            <div class="menu-search">
-                <h2 class="search">TAGS</h2>
-                <%= form_with url: "tags/search_tag", method: "post", remote: true do |form| %>
-                    <%= 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 %>
+                <div class="menu-search">
+                    <h2 class="search">TAGS</h2>
+                    <%= form_with url: "tags/search_tag", method: "post", remote: true do |form| %>
+                        <%= form.text_field :query, class: "search-form-small", remote: true %>
                     <% end %>
-                <% end %>
-            </div>
-                
-                
+                </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>
         </header>
         <header id="normal-header">