Sticky header hide and show on scroll and visible login access

decidim-core/app/packs/src/decidim/index.js

@@ -48,6 +48,7 @@ import "src/decidim/gallery"
 import "src/decidim/direct_uploads/upload_field"
 import "src/decidim/data_consent"
 import "src/decidim/sw"
+import "src/decidim/sticky_header"
 
 // local deps that require initialization
 import formDatePicker from "src/decidim/datepicker/form_datepicker"

decidim-core/app/packs/src/decidim/sticky_header.js

@@ -0,0 +1,17 @@
+let prevScroll = window.scrollY;
+const stickyHeader = document.getElementById("sticky-header");
+
+document.addEventListener("scroll", () => {
+  // if a subelement is not visible it has no offsetParent
+  const header = document.getElementById("main-bar").offsetParent;
+  if (header) {
+    let currentScroll = window.scrollY;
+    if (prevScroll > currentScroll || currentScroll < stickyHeader.offsetHeight) {
+      stickyHeader.style.top = 0;
+    } else {
+      stickyHeader.style.top = `-${stickyHeader.offsetHeight}px`;
+      console.log(header.offsetHeight);
+    }
+    prevScroll = currentScroll;
+  }
+});

decidim-core/app/packs/stylesheets/decidim/_dropdown.scss

@@ -33,6 +33,24 @@
   }
 }
 
+[data-target*="dropdown-menu-language-chooser"] {
+  & > span {
+    @apply block font-semibold text-black text-xs;
+  }
+
+  > svg {
+    @apply w-5 h-6 flex-none text-xs font-normal text-black fill-current;
+  }
+
+  & > ul {
+    @apply w-6 bg-gray;
+
+    > li {
+      @apply w-6 bg-gray;
+    }
+  }
+}
+
 .dropdown {
   @apply absolute border-2 border-gray-3 rounded min-w-max p-4 drop-shadow-md text-left z-10;
 

decidim-core/app/packs/stylesheets/decidim/_filters.scss

@@ -69,7 +69,7 @@
   }
 
   &-search {
-    @apply w-full relative;
+    @apply w-full relative bg-gray;
 
     input {
       @apply w-full;

decidim-core/app/packs/stylesheets/decidim/_footer.scss

@@ -1,6 +1,4 @@
 footer {
-  @apply mb-16 lg:mb-0;
-
   .main-footer {
     @apply bg-gray-4;
 

decidim-core/app/packs/stylesheets/decidim/_forms.scss

@@ -1,3 +1,11 @@
+#form-search_dropdownmenu{
+  @apply py-1.5 px-4 bg-gray-6 rounded-sm;
+
+  input[type="text"] {
+    @apply bg-gray-6;
+  }
+}
+
 .form-defaults {
   /* text-like inputs */
   input[type="date"],

decidim-core/app/packs/stylesheets/decidim/_header.scss

@@ -20,8 +20,32 @@ header {
     }
   }
 
+  #flash-messages-container {
+    @apply mt-28 md:mt-0;
+  }
+
+  #menu-bar-container {
+    @apply mt-24 md:mt-0;
+  }
+
+  &.with-admin-bar {
+    #flash-messages-container {
+      @apply mt-40 md:mt-0;
+    }
+
+    #menu-bar-container {
+      @apply mt-[140px] md:mt-0;
+    }
+  }
+
+  #sticky-header {
+    @apply fixed top-0 shadow-lg z-40 bg-white md:relative;
+
+    transition: top 0.3s;
+  }
+
   .main-bar {
-    @apply container grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4 items-center py-5;
+    @apply container grid grid-cols-4 md:grid-cols-8 lg:grid-cols-12 gap-4 items-center py-5 h-24;
 
     &__container {
       @apply relative w-full;
@@ -81,10 +105,10 @@ header {
       @apply fixed bottom-0 left-0 z-40 bg-white w-full px-4 py-3 flex justify-between text-secondary shadow-[0_-4px_6px_rgba(198,198,198,0.25)];
 
       &__trigger {
-        @apply flex flex-col items-center text-secondary cursor-pointer p-2;
+        @apply flex flex-col items-center text-secondary cursor-pointer pl-4 border-l border-gray-3;
 
         svg {
-          @apply w-5 h-5 fill-current;
+          @apply w-6 h-6 fill-current;
         }
 
         span {
@@ -96,6 +120,10 @@ header {
         @apply absolute top-full left-0 z-30 bg-white;
       }
 
+      &__dropdown-before {
+        @apply before:block before:absolute before:-top-8 before:right-12 before:content-[""] before:bg-white before:w-32 before:h-8 before:-mt-8;
+      }
+
       &__account {
         @apply fixed top-0 left-0 w-full h-full z-30 bg-white;
 
@@ -122,42 +150,17 @@ header {
 
       &__search {
         @apply fixed top-0 left-0 w-full h-full z-30 bg-white;
-
-        &-block {
-          @apply container h-full flex flex-col justify-center;
-        }
-
-        .main-bar {
-          @apply border-b border-gray;
-        }
-
-        label {
-          @apply block mb-4 text-black;
-        }
-
-        form {
-          @apply relative;
-        }
       }
 
-      &__item {
-        @apply w-1/4 flex flex-col items-center relative;
+      &__login {
+        @apply w-20 h-full flex flex-row items-center relative text-secondary gap-1;
 
         svg {
-          @apply w-8 h-8 fill-current;
+          @apply w-8 h-6 fill-current;
         }
 
         svg + span {
-          @apply text-sm first-letter:uppercase;
-        }
-
-        /* overwrite default dropdown styles */
-        &[data-target*="dropdown"] {
-          @apply p-0 gap-0;
-
-          > span {
-            @apply block font-normal text-sm first-letter:uppercase;
-          }
+          @apply text-sm first-letter:uppercase pr-4;
         }
       }
     }
@@ -183,7 +186,7 @@ header {
     }
 
     &__avatar {
-      @apply block w-8 h-8 rounded-full border border-secondary overflow-hidden;
+      @apply block w-6 h-6 rounded-full border border-secondary overflow-hidden mr-2;
 
       span {
         @apply w-full h-full rounded-full overflow-hidden;
@@ -202,14 +205,10 @@ header {
         @apply md:hidden;
       }
     }
-
-    [data-target*="dropdown"] {
-      @apply last-of-type:[&>svg]:block;
-    }
   }
 
   .menu-bar {
-    @apply container h-full flex justify-between items-center lg:relative;
+    @apply container h-full flex justify-between items-center lg:relative last-of-type:[&>svg]:hidden;
 
     &__container {
       @apply bg-primary relative h-14;
@@ -342,22 +341,17 @@ header {
       }
     }
 
+    &__language-chooser {
+      @apply absolute top-full left-0 bg-white rounded w-full bg-gray-5;
+    }
+
     &__main-dropdown {
       @apply bg-white divide-y divide-gray-3 rounded-b shadow-lg text-black w-full lg:w-[1280px];
 
       &__bottom,
       &__top {
         @apply flex flex-col md:flex-row justify-between p-4 md:p-8 gap-x-8;
 
-        &-left {
-          @apply w-full md:w-1/2;
-
-          /* Overwrite default size */
-          .card__highlight-text {
-            @apply text-md;
-          }
-        }
-
         &-right {
           @apply hidden md:block md:w-1/2;
         }

decidim-core/app/views/layouts/decidim/_wrapper.html.erb

@@ -11,15 +11,19 @@ end
 %>
 
 <div class="layout-container">
-  <header>
-    <%= render partial: "layouts/decidim/admin_links" if current_user&.admin %>
-    <%= render partial: "layouts/decidim/header/main" %>
-    <% if display_flash_messages.present? %>
-      <div class="container">
-        <%= display_flash_messages %>
-      </div>
-    <% end %>
-    <%= render partial: "layouts/decidim/header/menu" unless controller_name == "homepage" %>
+  <header <%= "class=with-admin-bar" if current_user&.admin %>>
+    <div id="sticky-header">
+      <%= render partial: "layouts/decidim/admin_links" if current_user&.admin %>
+      <%= render partial: "layouts/decidim/header/main" %>
+    </div>
+    <div id="menu-bar-container">
+      <% if display_flash_messages.present? %>
+        <div id="flash-messages-container" class="container">
+          <%= display_flash_messages %>
+        </div>
+      <% end %>
+      <%= render partial: "layouts/decidim/header/menu" unless controller_name == "homepage" %>
+    </div>
   </header>
 
   <div id="content" data-content>

decidim-core/app/views/layouts/decidim/header/_main.html.erb

@@ -4,27 +4,30 @@
       <%= render partial: "layouts/decidim/logo", locals: { organization: current_organization } %>
     </div>
     <div class="main-bar__search">
-      <%= render partial: "layouts/decidim/header/main_search" %>
+      <%= render partial: "layouts/decidim/header/main_search", locals: { id: "search-mobile" } %>
     </div>
     <div class="main-bar__links-desktop">
       <%= render partial: "layouts/decidim/header/main_links_desktop" %>
     </div>
 
     <div class="lg:hidden">
-      <%# Main dropdown mobile %>
-      <button id="main-dropdown-summary-mobile" class="main-bar__links-mobile__trigger"
-        data-component="dropdown"
-        data-target="dropdown-menu-main-mobile">
-        <%= icon "menu-line" %><span class="sr-only"><%= t("main_menu", scope: "layouts.decidim.header") %></span>
-      </button>
+      <div class="flex flex-row-reverse items-center">
+        <%# Main dropdown mobile %>
+        <button id="main-dropdown-summary-mobile" class="main-bar__links-mobile__trigger p-0"
+          data-component="dropdown"
+          data-target="dropdown-menu-main-mobile">
+          <%= icon "menu-line" %><span class="sr-only"><%= t("main_menu", scope: "layouts.decidim.header") %></span>
+          <%= icon "close-line" %>
+        </button>
 
-      <div id="dropdown-menu-main-mobile" class="main-bar__links-mobile__dropdown" aria-hidden="true">
-        <%= render partial: "layouts/decidim/header/menu_breadcrumb_main_dropdown", locals: { id: "breadcrumb-main-dropdown-mobile" } %>
-      </div>
+        <div id="dropdown-menu-main-mobile" class="main-bar__links-mobile__dropdown main-bar__links-mobile__dropdown-before" aria-hidden="true">
+          <%= render partial: "layouts/decidim/header/menu_breadcrumb_main_dropdown", locals: { id: "breadcrumb-main-dropdown-mobile" } %>
+        </div>
 
-      <%# Sticky menu mobile %>
-      <div class="main-bar__links-mobile">
-        <%= render partial: "layouts/decidim/header/main_links_mobile" %>
+        <%# Main mobile login %>
+        <div>
+          <%= render partial: "layouts/decidim/header/main_links_mobile_item_account" %>
+        </div>
       </div>
 
       <%# Overlay menus mobile %>

decidim-core/app/views/layouts/decidim/header/_main_links_mobile_item_account.html.erb

@@ -0,0 +1,22 @@
+<% if current_user %>
+  <button id="dropdown-trigger-links-mobile" class="main-bar__links-mobile__item" data-component="dropdown" data-target="dropdown-menu-account-mobile">
+    <% if current_user.notifications.any? %>
+      <span class="main-bar__notification"></span>
+    <% end %>
+    <% if current_user.avatar.attached? %>
+      <span class="main-bar__avatar">
+        <%= image_tag(
+                current_user.attached_uploader(:avatar).path(variant: :thumb),
+                alt: t("decidim.author.avatar", name: decidim_sanitize(current_user.avatar.name))
+              ) %>
+      </span>
+    <% else %>
+      <%= icon "user-smile-line" %>
+    <% end %>
+
+  </button>
+<% else %>
+  <%= link_to decidim.new_user_session_path, class: "main-bar__links-mobile__login" do %>
+    <%= icon "user-line" %><span><%= t("layouts.decidim.header.log_in") %></span>
+  <% end %>
+<% end %>

decidim-core/app/views/layouts/decidim/header/_main_links_mobile_search.html.erb

@@ -10,25 +10,4 @@
       </div>
     </div>
   </div>
-
-  <div class="main-bar__links-mobile__search-block">
-    <div class="-translate-y-full">
-      <label class="h4" for="input-search-mobile"><%= t("decidim.search.term_input_placeholder") %></label>
-      <%= form_tag(decidim.search_path, method: :get, class: "filter-search") do %>
-        <%= text_field_tag(
-          :term,
-          nil,
-          id: "input-search-mobile",
-          value: params[:term] || params.dig(:filter, :term),
-          placeholder: t("decidim.search.term_input_placeholder"),
-          title: t("decidim.search.term_input_placeholder"),
-          "aria-label": t("decidim.search.term_input_placeholder"),
-          tabindex: "0"
-        ) %>
-        <button type="submit" aria-label="<%= t("decidim.search.term_input_placeholder") %>">
-          <%= icon "search-line" %>
-        </button>
-      <% end %>
-    </div>
-  </div>
 </div>