🌸 Themes/ Mobile: Eliminate top navigation (#1859)

- #832
- #621
- #833

The top navigation is a bit excessive, especially on mobile. 

This brings the UI to a much cleaner place; with breadcrumbs and sign in
/ out only on the bottom of the page.

## After
![Screenshot 2023-10-04 at 17-34-42 Convene - The Oakland Community Food
Network](https://github.com/zinc-collective/convene/assets/50284/97f56943-d148-43d1-9b8c-6668eb9ba06d)

## Before
![Screenshot 2023-09-30 at 16-18-18 Convene - Zee's
Space](https://github.com/zinc-collective/convene/assets/50284/315afd50-059d-4aa7-9d92-84f7b001f28b)

app/assets/stylesheets/components/header.scss

@@ -1,18 +1,4 @@
 @layer components {
-  body > header {
-    @apply flex justify-between px-2 py-2 bg-orange-500 text-white place-items-end;
-
-    .profile-menu {
-      @apply flex flex-row relative;
-      :first-child {
-        @apply pr-0;
-      }
-      > * {
-        @apply px-2;
-      }
-    }
-  }
-
   .flash-message {
     @apply px-4 py-4;
 

app/furniture/marketplace/marketplace_component.html.erb

@@ -1,3 +1,7 @@
+<h2 class="ml-2 my-2">
+  <%= t('.header', space: marketplace.space.name, room: marketplace.room.name) %>
+</h2>
+
 
 <%= render onboarding_component %>
 

app/furniture/marketplace/marketplace_component.yml

@@ -0,0 +1,2 @@
+en:
+  header: Shop %{room} on %{space}

app/views/layouts/_header.html.erb

@@ -1,16 +1 @@
-<header>
-  <%= render partial: "breadcrumbs" %>
-
-  <nav aria-label="Menu" class="profile-menu" data-person-email="<%= current_person.email %>">
-    <%- if current_person.authenticated? %>
-      <%- if current_membership.present? %>
-        <%= link_to "Your Account", [current_space, current_membership], title: current_membership.member.email %>
-      <%- end %>
-      <%= link_to "Sign out", [current_space, :authenticated_session].compact, data: { turbo: true, turbo_method: :delete }, class: 'sign-out' %>
-    <%- else %>
-      <%= link_to "Sign in", [:new, current_space, :authenticated_session].compact, class: "sign-in" %>
-    <%- end %>
-  </nav>
-</header>
-
 <%= render "flash_messages" , flash: flash %>

app/views/layouts/application.html.erb

@@ -31,23 +31,32 @@
         <%- if current_room && policy(current_room).edit? %>
           <%= link_to t('icons.edit'), [:edit, current_space, current_room], class: 'no-underline', aria: { label: "Configure Section"} %>
         <%- end %>
-        <%= render Neighborhood::LinkComponent.new %>
-      </div>
-      <div>
-        💾&nbsp;
-        <%= link_to "Contribute", "https://github.com/zinc-collective/convene" %>
-        💚&nbsp;
-        <%= link_to "Sponsor", "https://opencollective.com/zinc-community" %>
+
       </div>
 
-      <%- if current_space&.agreements&.present? %>
-        <div class="text-xs mt-2 w-full flex flex-wrap justify-center">
-          <%- current_space.agreements.each do |agreement| %>
-            <%- next unless agreement.persisted? %>
-            <%= link_to(agreement.name, agreement.location, class: "px-4 py-2") %>
+      <nav class="text-sm w-full flex flex-wrap justify-center" aria-label="Profile Menu" data-person-email="<%= current_person.email %>">
+        <%- if current_person.authenticated? %>
+          <%- if current_membership.present? %>
+            <%= link_to "Your Account", [current_space, current_membership], title: current_membership.member.email, class: "px-4 py-1" %>
           <%- end %>
-        </div>
-      <%- end %>
+          <%= link_to "Sign out", [current_space, :authenticated_session].compact, data: { turbo: true, turbo_method: :delete }, class: "sign-out px-4 py-1" %>
+        <%- else %>
+          <%= link_to "Sign in", [:new, current_space, :authenticated_session].compact, class: "px-4 py-1" %>
+        <%- end %>
+      </nav>
+
+      <div class="text-xs w-full flex flex-wrap justify-center mt-1">
+        <%= link_to "💾 Contribute", "https://github.com/zinccollective/convene", class: "px-2 py-1" %>
+        <%= link_to "💚 Sponsor", "https://opencollective.com/zinccommunity", class: "px-2 py-1" %>
+
+        <%- current_space&.agreements&.each do |agreement| %>
+          <%- next unless agreement.persisted? %>
+          <%= link_to(agreement.name, agreement.location, class: "px-2 py-1") %>
+        <%- end %>
+      </div>
+      <div class="mt-1 text-xs">
+        <%= render Neighborhood::LinkComponent.new %>
+      </div>
     </footer>
   </body>
 </html>

features/harness/Page.js

@@ -23,7 +23,10 @@ class Page {
    * @returns {PersonNavigationComponent}
    */
   personNavigation() {
-    return this.component(".profile-menu", PersonNavigationComponent);
+    return this.component(
+      "*[aria-label='Profile Menu']",
+      PersonNavigationComponent,
+    );
   }
   /**
    * Goes directly to the page, as defined in the path method.

features/lib/Actor.js

@@ -65,7 +65,7 @@ class Actor {
    * @returns {Promise<boolean>}
    */
   isSignedIn(driver) {
-    return new PersonNavigationComponent(driver, ".profile-menu")
+    return new PersonNavigationComponent(driver, "*[aria-label='Profile Menu']")
       .signedInEmail()
       .then((email) => this.email == email);
   }