@mounaji_npm/saas-template 0.1.0

package/src/shell/TopNav.jsx

@@ -0,0 +1,291 @@
+/**
+ * TopNav — @mounaji/saas-template
+ *
+ * Top navigation bar. Mirrors the platform's ProjectNavigation + top strip.
+ * Renders:
+ *   Left:   breadcrumb (org → project) or custom left slot
+ *   Center: custom center slot
+ *   Right:  theme toggle, notifications slot, user menu
+ *
+ * Props:
+ *   org            — { name, logo? } | null
+ *   project        — { name } | null
+ *   onOrgClick     — () => void
+ *   onProjectClick — () => void
+ *   onNewProject   — () => void
+ *   user           — { name, avatar?, email? } | null
+ *   onThemeToggle  — () => void
+ *   isDark         — boolean
+ *   leftSlot       — React node (override left breadcrumb)
+ *   centerSlot     — React node
+ *   rightSlot      — React node (appended after built-in right items)
+ *   onLogout       — () => void
+ *   tokens         — Partial<DEFAULT_TOKENS>
+ */
+
+import { useState, useRef, useEffect } from 'react';
+import { TOKEN_CSS_MAP } from '@mounaji_npm/tokens';
+
+function buildInlineTokens(tokens) {
+  if (!tokens) return {};
+  const s = {};
+  Object.entries(tokens).forEach(([k, v]) => { const c = TOKEN_CSS_MAP[k]; if (c) s[c] = v; });
+  return s;
+}
+
+export function TopNav({
+  org,
+  project,
+  onOrgClick,
+  onProjectClick,
+  onNewProject,
+  user,
+  onThemeToggle,
+  isDark = true,
+  leftSlot,
+  centerSlot,
+  rightSlot,
+  onLogout,
+  tokens,
+  style,
+}) {
+  return (
+    <header
+      style={{
+        height: 52,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+        padding: '0 16px',
+        backgroundColor: 'var(--mn-color-nav-dark, #07091C)',
+        borderBottom: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))',
+        backdropFilter: 'blur(12px)',
+        WebkitBackdropFilter: 'blur(12px)',
+        position: 'sticky',
+        top: 0,
+        zIndex: 30,
+        fontFamily: 'var(--mn-font-family, inherit)',
+        ...buildInlineTokens(tokens),
+        ...style,
+      }}
+    >
+      {/* Left — Breadcrumb or custom */}
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+        {leftSlot ?? (
+          <Breadcrumb
+            org={org}
+            project={project}
+            onOrgClick={onOrgClick}
+            onProjectClick={onProjectClick}
+            onNewProject={onNewProject}
+          />
+        )}
+      </div>
+
+      {/* Center */}
+      {centerSlot && (
+        <div style={{ flexShrink: 0 }}>{centerSlot}</div>
+      )}
+
+      {/* Right */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
+        {onThemeToggle && (
+          <IconButton onClick={onThemeToggle} title={isDark ? 'Light mode' : 'Dark mode'}>
+            {isDark ? '☀' : '☾'}
+          </IconButton>
+        )}
+
+        {rightSlot}
+
+        {user && (
+          <UserMenu user={user} onLogout={onLogout} />
+        )}
+      </div>
+    </header>
+  );
+}
+
+// ─── Breadcrumb ───────────────────────────────────────────────────────────────
+
+function Breadcrumb({ org, project, onOrgClick, onProjectClick, onNewProject }) {
+  if (!org && !project) return null;
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
+      {org && (
+        <button
+          onClick={onOrgClick}
+          style={crumbStyle}
+        >
+          <OrgDot />
+          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{org.name}</span>
+        </button>
+      )}
+
+      {org && project && (
+        <span style={{ color: 'var(--mn-text-muted-dark, #64748B)', fontSize: 14 }}>/</span>
+      )}
+
+      {project ? (
+        <button onClick={onProjectClick} style={crumbStyle}>
+          <span style={{ fontSize: 12 }}>📁</span>
+          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{project.name}</span>
+        </button>
+      ) : onNewProject && (
+        <button
+          onClick={onNewProject}
+          style={{ ...crumbStyle, color: 'var(--mn-color-primary, #3B82F6)', opacity: 0.7 }}
+        >
+          + New Project
+        </button>
+      )}
+    </div>
+  );
+}
+
+const crumbStyle = {
+  display: 'inline-flex', alignItems: 'center', gap: 6,
+  padding: '4px 8px',
+  borderRadius: 'var(--mn-radius-md, 0.5rem)',
+  background: 'none', border: 'none',
+  color: 'var(--mn-text-secondary-dark, #94A3B8)',
+  fontSize: 'var(--mn-font-size-sm, 0.875rem)',
+  fontWeight: 500,
+  cursor: 'pointer',
+  maxWidth: 160,
+  fontFamily: 'inherit',
+  transition: 'background-color 150ms',
+};
+
+function OrgDot() {
+  return <span style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: 'var(--mn-color-accent, #8B5CF6)', flexShrink: 0, display: 'inline-block' }} />;
+}
+
+// ─── User Menu ────────────────────────────────────────────────────────────────
+
+function UserMenu({ user, onLogout }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handler(e) {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    }
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  return (
+    <div ref={ref} style={{ position: 'relative' }}>
+      <button
+        onClick={() => setOpen(o => !o)}
+        style={{
+          display: 'flex', alignItems: 'center', gap: 6,
+          padding: '4px 6px',
+          borderRadius: 'var(--mn-radius-md, 0.5rem)',
+          background: 'none', border: 'none',
+          cursor: 'pointer',
+          color: 'var(--mn-text-secondary-dark, #94A3B8)',
+          fontFamily: 'inherit',
+        }}
+      >
+        <UserAvatar user={user} size={26} />
+        <span style={{ fontSize: 'var(--mn-font-size-sm, 0.875rem)', fontWeight: 500 }}>
+          {user.name?.split(' ')[0] ?? 'Account'}
+        </span>
+        <span style={{ fontSize: 10 }}>▾</span>
+      </button>
+
+      {open && (
+        <div style={{
+          position: 'absolute', top: '100%', right: 0, marginTop: 6,
+          width: 200,
+          borderRadius: 'var(--mn-radius-lg, 0.75rem)',
+          backgroundColor: 'var(--mn-color-card-dark, #0B0F23)',
+          border: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))',
+          boxShadow: 'var(--mn-shadow-lg, 0 4px 30px rgba(0,0,0,0.4))',
+          zIndex: 100,
+          overflow: 'hidden',
+        }}>
+          {/* User info */}
+          <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))' }}>
+            <p style={{ margin: 0, fontSize: '0.8125rem', fontWeight: 600, color: 'var(--mn-text-primary-dark, #F0F4FF)' }}>{user.name}</p>
+            {user.email && <p style={{ margin: '2px 0 0', fontSize: 11, color: 'var(--mn-text-muted-dark, #64748B)' }}>{user.email}</p>}
+          </div>
+
+          {/* Menu items */}
+          <div style={{ padding: '6px 0' }}>
+            <MenuItem onClick={() => setOpen(false)}>Profile settings</MenuItem>
+            <MenuItem onClick={() => setOpen(false)}>API Keys</MenuItem>
+            {onLogout && (
+              <>
+                <div style={{ height: 1, backgroundColor: 'var(--mn-border-dark, rgba(255,255,255,0.05))', margin: '6px 0' }} />
+                <MenuItem onClick={() => { setOpen(false); onLogout(); }} danger>Log out</MenuItem>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function MenuItem({ children, onClick, danger }) {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        display: 'block', width: '100%', textAlign: 'left',
+        padding: '8px 14px',
+        background: 'none', border: 'none',
+        fontSize: 'var(--mn-font-size-sm, 0.875rem)',
+        color: danger ? 'var(--mn-color-danger, #EF4444)' : 'var(--mn-text-secondary-dark, #94A3B8)',
+        cursor: 'pointer',
+        fontFamily: 'inherit',
+        transition: 'background-color 100ms',
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+function UserAvatar({ user, size = 28 }) {
+  const initials = (user.name ?? '?').split(' ').slice(0, 2).map(w => w[0]).join('').toUpperCase();
+  return (
+    <div style={{
+      width: size, height: size, borderRadius: '50%',
+      backgroundColor: 'var(--mn-color-accent, #8B5CF6)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      fontSize: size * 0.38, fontWeight: 700, color: '#fff', flexShrink: 0,
+      backgroundImage: user.avatar ? `url(${user.avatar})` : 'none',
+      backgroundSize: 'cover',
+      overflow: 'hidden',
+    }}>
+      {!user.avatar && initials}
+    </div>
+  );
+}
+
+function IconButton({ children, onClick, title }) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      style={{
+        width: 32, height: 32,
+        borderRadius: 'var(--mn-radius-md, 0.5rem)',
+        background: 'rgba(255,255,255,0.04)',
+        border: '1px solid var(--mn-border-dark, rgba(255,255,255,0.07))',
+        cursor: 'pointer',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        color: 'var(--mn-text-secondary-dark, #94A3B8)',
+        fontSize: 14,
+        transition: 'background-color 150ms',
+      }}
+    >
+      {children}
+    </button>
+  );
+}