Redesign extended_navigation_bar

app/views/decidim/calendar/calendar/index.html.erb

@@ -5,14 +5,17 @@
 
 <%= participatory_space_wrapper do %>
   <div class="row columns">
-      <%= render partial: "decidim/meetings/calendar_modal", locals: {
-             path:  calendar_ical_path
-           } %>
-    <div class="calendar-filters button-group">
-      <% available_events.each do |_key,item| %>
-        <button class="button button__sm button__transparent-secondary cal-filter <%= item[:id] %>" id="<%= item[:id] %>"><%= I18n.t(item[:id], scope: "decidim.calendar.index.filters") %></button>
-      <% end %>
+    <div class="calendar-filters button-group flex">
+      <div class="flex-grow mt-6 md:mt-12 md:self-start">
+        <% available_events.each do |_key,item| %>
+          <button class="button button__sm button__transparent-secondary cal-filter <%= item[:id] %>" id="<%= item[:id] %>"><%= I18n.t(item[:id], scope: "decidim.calendar.index.filters") %></button>
+        <% end %>
+      </div>
+      <div class="flex justify-end">
+        <%= render partial: "decidim/meetings/calendar_modal", locals: { path:  calendar_ical_path } %>
+      </div>
     </div>
+
     <%= content_tag :div, "", id: "calendar", data: {
         locale: I18n.locale,
         events: render_events(@events),

app/views/layouts/_calendar_navigation.html.erb

@@ -1,14 +1,6 @@
-<%=
-  extended_navigation_bar([
-    {
-      name: t("menu.calendar", scope: "decidim.calendar"),
-      url: calendar_index_path,
-      active: is_active_link?(calendar_index_path, :exclusive)
-    },
-    {
-      name: t("menu.gantt", scope: "decidim.calendar"),
-      url: calendar_gantt_path,
-      active: is_active_link?(calendar_gantt_path, :exclusive)
-    }
-  ])
-%>
+<nav class="flex space-x-4" aria-label="Tabs" style="border-bottom: 1px solid #E5E7EB;">
+  <%= link_to t("menu.calendar", scope: "decidim.calendar"), calendar_index_path,
+              class: "#{is_active_link?(calendar_index_path, :exclusive) ? 'bg-primary text-white' : 'bg-transparent'} py-2 px-4 uppercase" %>
+  <%= link_to t("menu.gantt", scope: "decidim.calendar"), calendar_gantt_path,
+              class: "#{is_active_link?(calendar_gantt_path, :exclusive) ? 'bg-primary text-white' : 'bg-transparent'} py-2 px-4 uppercase" %>
+</nav>

spec/system/view_events_spec.rb

@@ -21,7 +21,7 @@
     end
 
     it "show the calendar" do
-      expect(page).to have_i18n_content("Calendar")
+      expect(page).to have_i18n_content("CALENDAR")
     end
 
     it "show a item in calendar" do