refactor(components/top-bar): gecut top bar

Author: MM25Zamanian

packages/components/src/top-bar/center-top-bar.ts

@@ -1,21 +1,20 @@
-import {classMap} from 'lit/directives/class-map.js';
 import {html, nothing} from 'lit/html.js';
 
 import {endIconListTemplate} from './_end-icon-list.js';
 import {gecutIconButton} from '../icon-button/icon-button.js';
 
 import type {TopBarContent} from './_type.js';
 
-export const gecutCenterTopBar = (content: TopBarContent, scroll = false) =>
-  html`<header
-    class="z-sticky flex h-16 shrink-0 grow-0 select-none items-center
-           bg-surface [&.scroll]:bg-surfaceContainer ${classMap({scroll})}"
-  >
-    ${content.startIcon ? gecutIconButton(content.startIcon) : nothing}
+export const gecutCenterTopBar = (content: TopBarContent) => html`
+  <header class="gecut-top-bar center">
+    <div class="gecut-top-bar-box">
+      <div>${content.startIcon ? gecutIconButton(content.startIcon) : nothing}</div>
 
-    <div class="lead grow overflow-clip whitespace-nowrap px-1 text-center text-titleLarge text-onSurface">
-      ${content.title}
-    </div>
+      <div class="gecut-top-bar-title">
+        <h1>${content.title}</h1>
+      </div>
 
-    ${endIconListTemplate(content.endIconList)}
-  </header>`;
+      <div>${endIconListTemplate(content.endIconList)}</div>
+    </div>
+  </header>
+`;

packages/components/src/top-bar/small-top-bar.ts

@@ -1,21 +1,20 @@
-import {classMap} from 'lit/directives/class-map.js';
 import {html, nothing} from 'lit/html.js';
 
 import {endIconListTemplate} from './_end-icon-list.js';
 import {gecutIconButton} from '../icon-button/icon-button.js';
 
 import type {TopBarContent} from './_type.js';
 
-export const gecutSmallTopBar = (content: TopBarContent, scroll = false) =>
-  html`<header
-    class="z-sticky flex h-16 shrink-0 grow-0 select-none items-center
-           bg-surface [&.scroll]:bg-surfaceContainer ${classMap({scroll})}"
-  >
-    ${content.startIcon ? gecutIconButton(content.startIcon) : nothing}
+export const gecutSmallTopBar = (content: TopBarContent) => html`
+  <header class="gecut-top-bar small">
+    <div class="gecut-top-bar-box">
+      <div>${content.startIcon ? gecutIconButton(content.startIcon) : nothing}</div>
 
-    <div class="lead me-auto overflow-clip whitespace-nowrap px-1 text-center text-titleLarge text-onSurface">
-      ${content.title}
-    </div>
+      <div class="gecut-top-bar-title">
+        <h1>${content.title}</h1>
+      </div>
 
-    ${endIconListTemplate(content.endIconList)}
-  </header>`;
+      <div>${endIconListTemplate(content.endIconList)}</div>
+    </div>
+  </header>
+`;

packages/styles/src/components/components.css

@@ -5,3 +5,4 @@
 @import './item.css';
 @import './list.css';
 @import './snack-bar.css';
+@import './top-bar.css';

packages/styles/src/components/top-bar.css

@@ -0,0 +1,37 @@
+@layer components {
+  .gecut-top-bar {
+    &-box {
+      & > div {
+        @apply flex items-center justify-center;
+      }
+
+      @apply max-w-screen-sm mx-auto flex px-1 py-2 w-full h-full *:h-auto relative;
+    }
+
+    &-title {
+      h1 {
+        @apply w-full;
+      }
+
+      @apply text-titleLarge text-primary grow px-2;
+    }
+
+    &.center {
+      .gecut-top-bar-title > h1 {
+        @apply text-center;
+      }
+    }
+
+    &.small {
+      .gecut-top-bar-title > h1 {
+        @apply text-start;
+      }
+    }
+
+    .gecut-button {
+      @apply px-4;
+    }
+
+    @apply fixed top-0 inset-x-0 bg-surfaceContainer translucent flex flex-col;
+  }
+}