@triptease/tt-navbar 0.0.41 → 0.0.43

package/dist/web/urlMappings.js

@@ -1,5 +1,5 @@
 /**
-* @triptease/tt-navbar v0.0.41
+* @triptease/tt-navbar v0.0.43
 */
 
 // src/urlMappings.ts

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-navbar following open-wc recommendations",
   "license": "MIT",
   "author": "tt-navbar",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@clerk/clerk-js": "^5.102.1",
+    "@clerk/types": "^4.95.1",
     "@triptease/icons": "^1.1.1",
     "@triptease/tt-combobox": "^5.3.0",
     "lit": "^3.1.4"

package/src/NavbarController.ts

@@ -1,4 +1,5 @@
 import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { UnsubscribeCallback } from '@clerk/types';
 
 export class NavbarController implements ReactiveController {
   host: ReactiveControllerHost;
@@ -7,6 +8,8 @@ export class NavbarController implements ReactiveController {
 
   private _hasInitialized = false;
 
+  private _removeClerkListener?: UnsubscribeCallback;
+
   constructor(host: ReactiveControllerHost) {
     (this.host = host).addController(this);
   }
@@ -17,14 +20,26 @@ export class NavbarController implements ReactiveController {
 
   hostUpdate() {
     if (!this._hasInitialized && window.Clerk) {
-      const userSetting =
-        window.Clerk.user?.unsafeMetadata?.preferences?.ui?.navigationOpen;
-
-      if (userSetting !== undefined) {
-        this._isOpen = userSetting;
-        this._hasInitialized = true;
-        this.host.requestUpdate();
-      }
+      this._removeClerkListener = window.Clerk.addListener(resources => {
+        const { user } = resources;
+        if (user && !this._hasInitialized) {
+          const navigationOpen =
+            user.unsafeMetadata?.preferences?.ui?.navigationOpen;
+
+          if (navigationOpen !== undefined) {
+            this._isOpen = navigationOpen;
+            this.host.requestUpdate();
+          }
+
+          this._hasInitialized = true;
+        }
+      });
+    }
+  }
+
+  hostDisconnected() {
+    if (this._removeClerkListener) {
+      this._removeClerkListener();
     }
   }
 

package/src/styles.ts

@@ -174,7 +174,7 @@ export const styles = css`
       width: var(--space-scale-2);
     }
 
-    &[open] .chevron {
+    &[open] .chevron svg {
       transform: rotate(180deg);
     }
 

package/test/tt-navbar.test.ts

@@ -7,6 +7,7 @@ import {
   nextFrame,
   waitUntil,
 } from '@open-wc/testing';
+import { Resources } from '@clerk/types';
 import { TtNavbar } from '../src/index.js';
 import { Routes } from '../src/Routes.js';
 
@@ -412,10 +413,17 @@ describe('TtNavbar', () => {
   });
 
   it('should default to state stored in Clerk when set', async () => {
+    const mockUser = {
+      unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },
+    };
+
+    const mockAddListener = (func: (resources: Resources) => void) => {
+      func({ user: mockUser } as unknown as Resources);
+    };
+
     window.Clerk = {
-      user: {
-        unsafeMetadata: { preferences: { ui: { navigationOpen: false } } },
-      },
+      addListener: mockAddListener,
+      user: mockUser,
     } as Clerk;
 
     const navbar = await fixture<TtNavbar>(
@@ -439,17 +447,24 @@ describe('TtNavbar', () => {
       calledWith = args;
     };
 
-    window.Clerk = {
-      user: {
-        update: mockUpdate,
-        unsafeMetadata: {
-          foo: 'foo',
-          preferences: {
-            bar: 'bar',
-            ui: { duck: 'duck', navigationOpen: false },
-          },
+    const mockUser = {
+      update: mockUpdate,
+      unsafeMetadata: {
+        foo: 'foo',
+        preferences: {
+          bar: 'bar',
+          ui: { duck: 'duck', navigationOpen: false },
         },
       },
+    };
+
+    const mockAddListener = (func: (resources: Resources) => void) => {
+      func({ user: mockUser } as unknown as Resources);
+    };
+
+    window.Clerk = {
+      addListener: mockAddListener,
+      user: mockUser,
     } as unknown as Clerk;
 
     const navbar = await fixture<TtNavbar>(