Merge pull request #644 from Avaiga/fix/persistent-page-title

fix(header): Bring back dynamic site name and page title
Avaiga · Oct 10, 2023 · 88cfde2 · 88cfde2
2 parents d4928d3 + 2b53260
commit 88cfde2
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 12 deletions.
diff --git a/mkdocs.yml_template b/mkdocs.yml_template
@@ -209,7 +209,7 @@ theme:
   font:
     text: Lato
   icon:
-    logo: taipy-logo
+    logo: taipy-logo-icon
     repo: fontawesome/brands/git-alt
   palette:
     - media: "(prefers-color-scheme: light)"

diff --git a/taipy_theme/.icons/taipy-logo-icon.svg b/taipy_theme/.icons/taipy-logo-icon.svg
diff --git a/taipy_theme/assets/stylesheets/avaiga.css b/taipy_theme/assets/stylesheets/avaiga.css
@@ -119,15 +119,30 @@
   }
 }
 
+.md-header__title-wrapper{
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
 .md-header .md-logo img,
 .md-header .md-logo svg{
   height: 1.5rem;
 }
 
+.md-header__title-wrapper .md-header__title{
+  margin-left: 0;
+}
+
+.md-header__title .md-site-name{
+  font-size: 1.25rem;
+  font-weight: 400;
+}
+
 @media screen and (max-width: 76.1875em){
   .md-header .md-logo {
     display: block;
-    flex: 1;
+    flex: 0 0 auto;
   }
 }
 
@@ -151,7 +166,7 @@
 }
 
 .md-header .md-tabs{
-  flex: 1;
+  flex: 0 0 auto;
   width: auto;
   background-color: transparent;
   color: currentColor;

diff --git a/taipy_theme/partials/header.html b/taipy_theme/partials/header.html
@@ -59,15 +59,44 @@
       </label>
 
       <!-- Link to home -->
-      <a
-        href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
-        title="{{ config.site_name | e }}"
-        class="md-header__button md-logo"
-        aria-label="{{ config.site_name }}"
-        data-md-component="logo"
-      >
-        {% include "partials/logo.html" %}
-      </a>
+
+      <div class="md-header__title-wrapper">
+        <a
+          href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
+          title="{{ config.site_name | e }}"
+          class="md-header__button md-logo"
+          aria-label="{{ config.site_name }}"
+          data-md-component="logo"
+        >
+          {% include "partials/logo.html" %}
+        </a>
+
+        <!-- Header title -->
+        <div class="md-header__title" data-md-component="header-title">
+          <div class="md-header__ellipsis">
+            <div class="md-header__topic">
+              <a
+                href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
+                title="{{ config.site_name | e }}"
+                class="md-ellipsis md-site-name"
+                aria-label="{{ config.site_name }}"
+              >
+                {{ config.site_name }}
+              </a>
+            </div>
+            <div class="md-header__topic" data-md-component="header-topic">
+              <span class="md-ellipsis">
+                {% if page.meta and page.meta.title %}
+                  {{ page.meta.title }}
+                {% else %}
+                  {{ page.title }}
+                {% endif %}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- Site language selector -->
       {% if config.extra.alternate %}
       <div class="md-header__option">