WIP PWA for Grain
feat: add Grain header with logo that navigates to timeline
Instagram-style sticky header with centered "Grain" logo.
Clicking the logo returns to the home timeline.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+50
+48
src/components/organisms/grain-header.js
+48
src/components/organisms/grain-header.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
import { router } from '../../router.js';
3
+
4
+
export class GrainHeader extends LitElement {
5
+
static styles = css`
6
+
:host {
7
+
display: block;
8
+
position: sticky;
9
+
top: 0;
10
+
background: var(--color-bg-primary);
11
+
border-bottom: 1px solid var(--color-border);
12
+
z-index: 100;
13
+
}
14
+
header {
15
+
display: flex;
16
+
align-items: center;
17
+
justify-content: center;
18
+
max-width: var(--feed-max-width);
19
+
margin: 0 auto;
20
+
padding: var(--space-sm) var(--space-md);
21
+
}
22
+
.logo {
23
+
font-family: var(--font-family-display, var(--font-family-base));
24
+
font-size: var(--font-size-lg);
25
+
font-weight: var(--font-weight-bold);
26
+
color: var(--color-text-primary);
27
+
text-decoration: none;
28
+
cursor: pointer;
29
+
background: none;
30
+
border: none;
31
+
padding: 0;
32
+
}
33
+
`;
34
+
35
+
#handleLogoClick() {
36
+
router.push('/');
37
+
}
38
+
39
+
render() {
40
+
return html`
41
+
<header>
42
+
<button class="logo" @click=${this.#handleLogoClick}>Grain</button>
43
+
</header>
44
+
`;
45
+
}
46
+
}
47
+
48
+
customElements.define('grain-header', GrainHeader);
+2
src/components/pages/grain-app.js
+2
src/components/pages/grain-app.js
···
5
5
import './grain-timeline.js';
6
6
import './grain-profile.js';
7
7
import './grain-gallery-detail.js';
8
+
import '../organisms/grain-header.js';
8
9
import '../organisms/grain-bottom-nav.js';
9
10
10
11
export class GrainApp extends LitElement {
···
35
36
36
37
render() {
37
38
return html`
39
+
<grain-header></grain-header>
38
40
<div id="outlet"></div>
39
41
<grain-bottom-nav></grain-bottom-nav>
40
42
`;