diff --git a/.changeset/clickstack-hexagon-mark.md b/.changeset/clickstack-hexagon-mark.md
new file mode 100644
index 0000000000..fa0340f45c
--- /dev/null
+++ b/.changeset/clickstack-hexagon-mark.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+fix(app): use the ClickStack hexagon and bolt mark in the logo, the collapsed nav, and the favicon.
diff --git a/.changeset/compact-nav-overlay.md b/.changeset/compact-nav-overlay.md
new file mode 100644
index 0000000000..9524154a6b
--- /dev/null
+++ b/.changeset/compact-nav-overlay.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+fix(app): open the full nav over the page on compact viewports. On narrow screens the sidebar toggle now opens the full nav as an overlay instead of doing nothing.
diff --git a/packages/app/public/favicons/clickstack/apple-touch-icon.png b/packages/app/public/favicons/clickstack/apple-touch-icon.png
index 9e847a0ede..5258791127 100644
Binary files a/packages/app/public/favicons/clickstack/apple-touch-icon.png and b/packages/app/public/favicons/clickstack/apple-touch-icon.png differ
diff --git a/packages/app/public/favicons/clickstack/favicon-16x16.png b/packages/app/public/favicons/clickstack/favicon-16x16.png
index 8c232df612..07da0a227b 100644
Binary files a/packages/app/public/favicons/clickstack/favicon-16x16.png and b/packages/app/public/favicons/clickstack/favicon-16x16.png differ
diff --git a/packages/app/public/favicons/clickstack/favicon-32x32.png b/packages/app/public/favicons/clickstack/favicon-32x32.png
index f6c633bbe1..3c269370a0 100644
Binary files a/packages/app/public/favicons/clickstack/favicon-32x32.png and b/packages/app/public/favicons/clickstack/favicon-32x32.png differ
diff --git a/packages/app/public/favicons/clickstack/favicon.ico b/packages/app/public/favicons/clickstack/favicon.ico
index 073b45701f..c2f759ca71 100644
Binary files a/packages/app/public/favicons/clickstack/favicon.ico and b/packages/app/public/favicons/clickstack/favicon.ico differ
diff --git a/packages/app/public/favicons/clickstack/favicon.svg b/packages/app/public/favicons/clickstack/favicon.svg
index ff5cd9aeab..8d47d5fdb2 100644
--- a/packages/app/public/favicons/clickstack/favicon.svg
+++ b/packages/app/public/favicons/clickstack/favicon.svg
@@ -1,15 +1,13 @@
\ No newline at end of file
+
diff --git a/packages/app/src/brand/Logomark.tsx b/packages/app/src/brand/Logomark.tsx
index 53678b7c13..a395275536 100644
--- a/packages/app/src/brand/Logomark.tsx
+++ b/packages/app/src/brand/Logomark.tsx
@@ -1,50 +1,25 @@
/**
- * ClickStack Logomark
- * A stylized database/stack icon with the brand yellow color
+ * ClickStack mark from the hexagon-and-bolt symbol.
+ * The bolt uses the page background so it stays two-tone: white on the dark
+ * surface, dark on the light one.
*/
export default function Logomark({ size = 16 }: { size?: number }) {
return (
-
);
}
diff --git a/packages/app/src/brand/Wordmark.tsx b/packages/app/src/brand/Wordmark.tsx
index 842f7f64b0..64f1042cae 100644
--- a/packages/app/src/brand/Wordmark.tsx
+++ b/packages/app/src/brand/Wordmark.tsx
@@ -10,46 +10,22 @@ export default function Wordmark() {
fill="none"
viewBox="0 0 121 25"
>
-
-
-
-
-
+ viewBox="0 0 38.7979 44.7998"
+ >
+
+
+
(null);
+ const wasMobileNavOpenRef = useRef(false);
+ // Traps Tab inside the open overlay so keys do not reach the page under the scrim.
+ const navFocusTrapRef = useFocusTrap(isMobileNavOpen);
+
+ // The toggle stays mounted when the overlay closes, so keyboard focus can
+ // return to it after Escape or the scrim removes itself.
+ useEffect(() => {
+ if (wasMobileNavOpenRef.current && !isMobileNavOpen) {
+ collapseButtonRef.current?.focus();
+ }
+ wasMobileNavOpenRef.current = isMobileNavOpen;
+ }, [isMobileNavOpen]);
+
+ // The page layout reserves the rail width even while the overlay is open,
+ // so opening the nav does not shift the content.
+ const isRail = isCompact || isPreferCollapsed;
+ const isCollapsed = isRail && !isMobileNavOpen;
+ const navWidth = isCollapsed ? RAIL_WIDTH : FULL_NAV_WIDTH;
+ const reservedWidth = isRail ? RAIL_WIDTH : FULL_NAV_WIDTH;
+ // The in-flow rail is border-box, so its 1px border is already inside
+ // reservedWidth. The fixed nav's ghost keeps the extra pixel it had
+ // before. The overlay ghost must not, or the page shifts when it opens.
+ const ghostWidth =
+ isMobileNavOpen && !fixed ? reservedWidth : reservedWidth + 1;
useEffect(() => {
HyperDX.addAction('user navigated', {
@@ -321,24 +353,35 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
return (
- {fixed && (
+ {(fixed || isMobileNavOpen) && (
)}
+ {isMobileNavOpen && (
+
+ )}
@@ -380,13 +423,20 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
{/* click-ui 0.12 has no sidebar-left icon, so the glyph is
inlined. Chrome matches IconButton type="primary" size="sm". */}