Skip to content

AppsHeader Component

Description

The AppsHeader component provides a standard header with multiple actions such as: - Opening a menu drawer - Toggling dark mode - Opening user settings - Opening chat - Signing out

Props

Prop Type Description
onToggleMenusDrawer () => void Callback for opening the menu drawer
onToggleDarkMode () => void Callback for toggling dark mode
onToggleUserSettings () => void Callback for user settings
onToggleChat () => void Callback for opening chat
onSignout () => void Callback for signing out

Example Usage

 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
import { AppsHeader } from "@nomana-it/liberty-core"

export const AppHeaderExample = () => {
  const onToggleMenusDrawer = () => {
    alert("Open Menu");
  };

  const onToggleDarkMode = () => {
    alert("Toggle Dark Mode");
  };

  const onToggleUserSettings = () => {
    alert("Open User Settings");
  };

  const onToggleChat = () => {
    alert("Open Chat");
  };

  const onSignout = () => {
    alert("Signout");
  };

  return (
    <AppsHeader
      onToggleMenusDrawer={onToggleMenusDrawer}
      onToggleDarkMode={onToggleDarkMode}
      onToggleChat={onToggleChat}
      onToggleUserSettings={onToggleUserSettings}
      onSignout={onSignout}
    />
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core