nichoth.com / grain-pwa
WIP PWA for Grain
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: highlight profile icon when on logged-in user's profile

Chad Miller b610fe56 79668521

+22 -8
+22 -8
src/components/organisms/grain-bottom-nav.js
··· 5 5 6 6 export class GrainBottomNav extends LitElement { 7 7 static properties = { 8 - active: { type: String }, 9 - _user: { state: true } 8 + _user: { state: true }, 9 + _path: { state: true } 10 10 }; 11 11 12 12 static styles = css` ··· 46 46 47 47 constructor() { 48 48 super(); 49 - this.active = 'home'; 50 49 this._user = auth.user; 50 + this._path = window.location.pathname; 51 + this._onPopState = () => this._path = window.location.pathname; 51 52 } 52 53 53 54 connectedCallback() { ··· 55 56 this._unsubscribe = auth.subscribe(user => { 56 57 this._user = user; 57 58 }); 59 + window.addEventListener('popstate', this._onPopState); 58 60 } 59 61 60 62 disconnectedCallback() { 61 63 super.disconnectedCallback(); 62 64 this._unsubscribe?.(); 65 + window.removeEventListener('popstate', this._onPopState); 66 + } 67 + 68 + get #isHome() { 69 + return this._path === '/'; 70 + } 71 + 72 + get #isOwnProfile() { 73 + return this._user?.handle && this._path === `/profile/${this._user.handle}`; 63 74 } 64 75 65 76 #handleHome() { 66 77 router.push('/'); 78 + this._path = '/'; 67 79 } 68 80 69 81 #handleProfile() { 70 82 if (this._user?.handle) { 71 - router.push(`/profile/${this._user.handle}`); 83 + const path = `/profile/${this._user.handle}`; 84 + router.push(path); 85 + this._path = path; 72 86 } 73 87 } 74 88 ··· 76 90 return html` 77 91 <nav> 78 92 <button 79 - class=${this.active === 'home' ? 'active' : ''} 93 + class=${this.#isHome ? 'active' : ''} 80 94 @click=${this.#handleHome} 81 95 > 82 - <grain-icon name=${this.active === 'home' ? 'home' : 'homeLine'} size="20"></grain-icon> 96 + <grain-icon name=${this.#isHome ? 'home' : 'homeLine'} size="20"></grain-icon> 83 97 </button> 84 98 <button 85 - class=${this.active === 'profile' ? 'active' : ''} 99 + class=${this.#isOwnProfile ? 'active' : ''} 86 100 @click=${this.#handleProfile} 87 101 > 88 - <grain-icon name=${this.active === 'profile' ? 'userFilled' : 'user'} size="20"></grain-icon> 102 + <grain-icon name=${this.#isOwnProfile ? 'userFilled' : 'user'} size="20"></grain-icon> 89 103 </button> 90 104 </nav> 91 105 `;