All files / packages/design-system-2-site/src/components Header.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2x
 
 
 
 
 
 
 
 
 
 
 
8x
8x
 
8x
1x
 
 
8x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import Image from 'next/image';
import Link from 'next/link';
import { Menu } from 'lucide-react';
import { MoonIcon, SunIcon } from './icons';
import { useTheme } from './ThemeProvider';
import { Button } from './ui/Button';
import logo from '@/assets/slds-2-logo.svg';
import logoDark from '@/assets/slds-2-logo-dark.svg';
 
export function Header() {
  const { resolvedTheme, toggleTheme } = useTheme();
  const isDark = resolvedTheme === 'dark';
 
  const toggleSidebar = () => {
    document.dispatchEvent(new CustomEvent('toggle-sidebar'));
  };
 
  return (
    <header className="site-topbar">
      <div className="site-topbar__start">
        <button
          type="button"
          className="site-topbar__sidebar-toggle"
          onClick={toggleSidebar}
          aria-label="Toggle navigation"
        >
          <Menu size={18} aria-hidden="true" />
        </button>
        {/* CSS picks the logo for [data-theme]; avoids a pre-hydration flash. */}
        <Link href="/" className="site-topbar__brand" aria-label="Lightning Design System 2 home">
          <Image src={logo} alt="" className="site-topbar__logo site-topbar__logo--light" priority />
          <Image src={logoDark} alt="" className="site-topbar__logo site-topbar__logo--dark" priority />
        </Link>
      </div>
      <Button
        variant="ghost"
        size="sm"
        iconOnly
        onClick={toggleTheme}
        aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
      >
        {isDark ? <SunIcon /> : <MoonIcon />}
      </Button>
    </header>
  );
}