DEV: Update for glimmer header

discourse · Mar 21, 2024 · 8ef59f8 · 8ef59f8
1 parent f90a07e
commit 8ef59f8
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 103 deletions.
diff --git a/common/common.scss b/common/common.scss
@@ -1,5 +1,5 @@
 .b-header,
-.brand-header-widgetized {
+.brand-header-contents {
   #brand-logo {
     max-height: 32px;
   }

diff --git a/javascripts/discourse/connectors/home-logo__before/mobile-brand-header.gjs b/javascripts/discourse/connectors/home-logo__before/mobile-brand-header.gjs
@@ -0,0 +1,28 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import { not, and } from "truth-helpers";
+import MountWidget from "discourse/components/mount-widget";
+import DMenu from "float-kit/components/d-menu";
+import BrandHeaderContents from "../../components/brand-header-contents";
+import dIcon from "discourse-common/helpers/d-icon";
+
+export default class BrandHeaderContainer extends Component {
+  @service site;
+
+  <template>
+    {{#if (and (not settings.show_bar_on_mobile) this.site.mobileView)}}
+      <DMenu
+        @icon="bars"
+        title="hamburger_brand_menu"
+        id="toggle-hamburger-brand-menu"
+        class="brand-header-toggle icon btn-flat"
+      >
+        <:content>
+          <div class="brand-header-contents">
+            <BrandHeaderContents />
+          </div>
+        </:content>
+      </DMenu>
+    {{/if}}
+  </template>
+}
diff --git a/javascripts/discourse/initializers/initialize-brand-header.js b/javascripts/discourse/initializers/initialize-brand-header.js
@@ -8,8 +8,8 @@ export default {
 
   initialize() {
     registerWidgetShim(
-      "brand-header-widgetized",
-      "div.brand-header-widgetized",
+      "brand-header-contents",
+      "div.brand-header-contents",
       hbs`<BrandHeaderContents />`
     );
 

diff --git a/javascripts/discourse/initializers/initialize-mobile-decorator.js b/javascripts/discourse/initializers/initialize-mobile-decorator.js
diff --git a/javascripts/discourse/widgets/brand-header-container.js b/javascripts/discourse/widgets/brand-header-container.js
diff --git a/javascripts/discourse/widgets/brand-header-icon.js b/javascripts/discourse/widgets/brand-header-icon.js
diff --git a/javascripts/discourse/widgets/hamburger-brand-menu.js b/javascripts/discourse/widgets/hamburger-brand-menu.js
diff --git a/mobile/mobile.scss b/mobile/mobile.scss
@@ -7,6 +7,15 @@
   }
 }
 
+.home-logo-wrapper-outlet {
+  display: flex;
+  .brand-header-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 // applies when show_bar_on_mobile is unchecked
 .d-header .brand-header-toggle {
   list-style: none;
@@ -19,7 +28,14 @@
   }
 }
 
-.brand-header-widgetized {
+.brand-header-contents {
+  padding: 0.5em;
+  width: 320px;
+  ul {
+    list-style: none;
+    margin: 0;
+  }
+
   .nav {
     border-top: 1px solid var(--primary-low);
     border-bottom: 1px solid var(--primary-low);
@@ -45,6 +61,7 @@
 
   .icons {
     display: flex;
+    height: 26px;
     a {
       padding: 0.33em 0.6em;
       .d-icon {