WIP PWA for Grain
feat: show login button or user avatar in header
+69
-1
+69
-1
src/components/organisms/grain-header.js
+69
-1
src/components/organisms/grain-header.js
···
1
1
import { LitElement, html, css } from 'lit';
2
2
import { router } from '../../router.js';
3
+
import { auth } from '../../services/auth.js';
4
+
import '../molecules/grain-login-dialog.js';
5
+
import '../atoms/grain-avatar.js';
3
6
4
7
export class GrainHeader extends LitElement {
8
+
static properties = {
9
+
_user: { state: true }
10
+
};
11
+
5
12
static styles = css`
6
13
:host {
7
14
display: block;
···
14
21
header {
15
22
display: flex;
16
23
align-items: center;
17
-
justify-content: flex-start;
24
+
justify-content: space-between;
18
25
max-width: var(--feed-max-width);
19
26
margin: 0 auto;
20
27
height: 48px;
···
31
38
border: none;
32
39
padding: 0 8px;
33
40
}
41
+
.login-button {
42
+
font-size: var(--font-size-sm);
43
+
font-weight: var(--font-weight-semibold);
44
+
color: var(--color-text-primary);
45
+
background: none;
46
+
border: 1px solid var(--color-border);
47
+
border-radius: 6px;
48
+
padding: 6px 12px;
49
+
margin-right: 8px;
50
+
cursor: pointer;
51
+
}
52
+
.avatar-button {
53
+
background: none;
54
+
border: none;
55
+
padding: 0;
56
+
margin-right: 8px;
57
+
cursor: pointer;
58
+
}
34
59
`;
35
60
61
+
constructor() {
62
+
super();
63
+
this._user = auth.user;
64
+
}
65
+
66
+
connectedCallback() {
67
+
super.connectedCallback();
68
+
this._unsubscribe = auth.subscribe(user => {
69
+
this._user = user;
70
+
});
71
+
}
72
+
73
+
disconnectedCallback() {
74
+
super.disconnectedCallback();
75
+
this._unsubscribe?.();
76
+
}
77
+
36
78
#handleLogoClick() {
37
79
router.push('/');
38
80
}
39
81
82
+
#openLogin() {
83
+
this.shadowRoot.querySelector('grain-login-dialog').open();
84
+
}
85
+
86
+
#handleLogin(e) {
87
+
auth.login(e.detail.handle);
88
+
}
89
+
90
+
#goToProfile() {
91
+
if (this._user?.handle) {
92
+
router.push(`/profile/${this._user.handle}`);
93
+
}
94
+
}
95
+
40
96
render() {
41
97
return html`
42
98
<header>
43
99
<button class="logo" @click=${this.#handleLogoClick}>Grain</button>
100
+
${this._user ? html`
101
+
<button class="avatar-button" @click=${this.#goToProfile}>
102
+
<grain-avatar
103
+
src=${this._user.avatar?.url || ''}
104
+
alt=${this._user.handle || ''}
105
+
size="sm"
106
+
></grain-avatar>
107
+
</button>
108
+
` : html`
109
+
<button class="login-button" @click=${this.#openLogin}>Login</button>
110
+
`}
44
111
</header>
112
+
<grain-login-dialog @login=${this.#handleLogin}></grain-login-dialog>
45
113
`;
46
114
}
47
115
}