Merge pull request #716 from NoelDeMartin/709-header

#709 Implement Design System Header

Author: NoelDeMartin

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-panes",
-  "version": "4.4.2-2",
+  "version": "4.4.2-3",
   "description": "Solid-compatible Panes: applets and views for the mashlib and databrowser",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -85,6 +85,7 @@
     "pane-registry": "$pane-registry"
   },
   "devDependencies": {
+    "@iconify/json": "2.2.494",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/node": "^22.20.0",
@@ -96,6 +97,7 @@
     "neostandard": "^0.13.0",
     "solidos-toolkit": "dev",
     "typescript": "^6.0.3",
+    "unplugin-icons": "^23.0.1",
     "vite": "^8.0.16",
     "vitest": "^4.0.18"
   },

package.json

@@ -0,0 +1,38 @@
+@import "solid-ui/breakpoints.css";
+
+:host {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--solid-ui-color-slate-800);
+    color: var(--solid-ui-color-white);
+    padding: 7px 20px;
+    gap: 10px;
+
+    a.logo {
+        height: 40px;
+
+        solid-ui-solid-emblem {
+            height: 100%;
+        }
+    }
+
+    .spacer {
+        flex: 1;
+    }
+
+    .separator {
+        background: var(--solid-ui-color-body-grey);
+        width: 1px;
+        align-self: stretch;
+    }
+
+    @media (--solid-ui-mobile) {
+        a.logo,
+        solid-ui-menu,
+        .separator {
+            display: none;
+        }
+    }
+}

src/components/header/Header.styles.css

@@ -0,0 +1,42 @@
+import { customElement, WebComponent } from 'solid-ui'
+import { html } from 'lit'
+import { property } from 'lit/decorators.js'
+import type { AccountMenuItem } from 'solid-ui/components/account'
+
+import 'solid-ui/components/account'
+import 'solid-ui/components/button'
+import 'solid-ui/components/menu-item'
+import 'solid-ui/components/menu'
+import 'solid-ui/components/solid-emblem'
+import '~icons/lucide/help-circle'
+
+import styles from './Header.styles.css'
+
+@customElement('solid-panes-header')
+export default class Header extends WebComponent {
+  static styles = styles
+
+  @property({ type: Array })
+  accessor menuItems: AccountMenuItem[] = []
+
+  render () {
+    return html`
+        <a href="/" class="logo">
+          <span class="sr-only">Home</span>
+          <solid-ui-solid-emblem></solid-ui-solid-emblem>
+        </a>
+        <div class="spacer"></div>
+        <solid-ui-account .menuItems=${this.menuItems}></solid-ui-account>
+        <span class="separator"></span>
+        <solid-ui-menu placement="bottom-end" distance="5">
+            <solid-ui-button slot="trigger" variant="ghost" title="Open help">
+                <span class="sr-only">Open help</span>
+                <icon-lucide-help-circle slot="icon"></icon-lucide-help-circle>
+            </solid-ui-button>
+
+            <solid-ui-menu-item href="https://solidos.github.io/userguide/">User guide</solid-ui-menu-item>
+            <solid-ui-menu-item href="https://github.com/solidos/solidos/issues">Report a problem</solid-ui-menu-item>
+        </solid-ui-menu>
+    `
+  }
+}

src/components/header/Header.ts

@@ -0,0 +1,4 @@
+import Header from './Header'
+
+export { Header }
+export default Header