feat: sidebar

Author: KatoakDR

electron/renderer/components/layout.tsx

@@ -1,6 +1,6 @@
 import { EuiPageTemplate } from '@elastic/eui';
 import type { ReactNode } from 'react';
-import { SidebarContainer } from './sidebar';
+import { Sidebar } from './sidebar';
 
 export interface LayoutProps {
   /**
@@ -22,7 +22,7 @@ export const Layout: React.FC<LayoutProps> = (
   return (
     <EuiPageTemplate grow={true} responsive={[]}>
       <EuiPageTemplate.Sidebar minWidth={50} paddingSize="xs" responsive={[]}>
-        <SidebarContainer />
+        <Sidebar />
       </EuiPageTemplate.Sidebar>
       <EuiPageTemplate.Section paddingSize="none" grow={true}>
         {children}

electron/renderer/components/sidebar/index.ts

@@ -1 +1,2 @@
-export * from './sidebar-container';
+export * from './sidebar';
+export * from './sidebar-item';

electron/renderer/components/sidebar/sidebar-container.tsx

@@ -0,0 +1,83 @@
+import type { EuiButtonIconProps } from '@elastic/eui';
+import { EuiButtonIcon, EuiPopover, EuiToolTip } from '@elastic/eui';
+import type { ReactNode } from 'react';
+import { useCallback, useState } from 'react';
+
+export interface SidebarItemProps {
+  label: EuiButtonIconProps['aria-label'];
+  iconType: EuiButtonIconProps['iconType'];
+  iconColor?: EuiButtonIconProps['color'];
+  iconSize?: EuiButtonIconProps['iconSize'];
+  /**
+   * The content of the popover when the button is clicked.
+   * Ignored if `onClick` is defined.
+   */
+  popoverContent?: ReactNode;
+  /**
+   * Callback to be notified when the button is clicked.
+   * Designed when you don't want to use a popover but
+   * rather take some other custom action, such as routing.
+   * If defined then `popoverContent` is ignored.
+   */
+  onClick?: () => void;
+}
+
+export const SidebarItem: React.FC<SidebarItemProps> = (
+  props: SidebarItemProps
+): ReactNode => {
+  const { label, iconType, iconColor, iconSize, popoverContent } = props;
+
+  const [showTooltip, setShowTooltip] = useState(true);
+  const [showPopover, setShowPopover] = useState(false);
+
+  const onClosePopover = useCallback(() => {
+    setShowTooltip(true);
+    setShowPopover(false);
+  }, []);
+
+  const togglePopoverAndTooltip = useCallback(() => {
+    if (!popoverContent) {
+      return;
+    }
+    setShowTooltip((prev) => !prev);
+    setShowPopover((prev) => !prev);
+  }, [popoverContent]);
+
+  const onClickButton = props.onClick ?? togglePopoverAndTooltip;
+
+  const buttonElmt = (
+    <EuiPopover
+      isOpen={showPopover}
+      closePopover={onClosePopover}
+      button={
+        <EuiButtonIcon
+          aria-label={label}
+          iconType={iconType}
+          color={iconColor}
+          iconSize={iconSize}
+          css={{
+            'min-width': 50,
+            'min-height': 50,
+            'height': 50,
+            'width': 50,
+          }}
+          onClick={onClickButton}
+        />
+      }
+    >
+      {popoverContent}
+    </EuiPopover>
+  );
+
+  if (showTooltip) {
+    return (
+      <EuiToolTip aria-label={label} content={label} position="right">
+        {buttonElmt}
+      </EuiToolTip>
+    );
+  }
+
+  return buttonElmt;
+};
+
+SidebarItem.displayName = 'SidebarItem';

electron/renderer/components/sidebar/sidebar-item.tsx

@@ -0,0 +1,111 @@
+import { EuiFlexGroup, EuiFlexItem, EuiFlyout, EuiPanel } from '@elastic/eui';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import { SidebarItem } from './sidebar-item';
+
+export const Sidebar: React.FC = (): ReactNode => {
+  const [showCharacters, setShowCharacters] = useState(false);
+  const [showAccounts, setShowAccounts] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+
+  return (
+    <>
+      <EuiFlexGroup direction="column" css={{ height: '100%' }}>
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup
+            direction="column"
+            gutterSize="none"
+            alignItems="center"
+          >
+            <EuiFlexItem grow={false}>
+              <SidebarItem
+                label="Characters"
+                iconType="user"
+                iconColor="primary"
+                iconSize="l"
+                onClick={() => setShowCharacters(!showCharacters)}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <SidebarItem
+                label="Accounts"
+                iconType="key"
+                iconColor="primary"
+                iconSize="l"
+                onClick={() => setShowAccounts(!showAccounts)}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem grow={true}>{/* empty space in the middle */}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup
+            direction="column"
+            gutterSize="none"
+            alignItems="center"
+          >
+            <EuiFlexItem grow={false}>
+              <SidebarItem
+                label="Help"
+                iconType="questionInCircle"
+                iconColor="text"
+                iconSize="xl" // https://github.com/elastic/eui/issues/6322
+                popoverContent={<div>Help Center</div>}
+              ></SidebarItem>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <SidebarItem
+                label="Settings"
+                iconType="gear"
+                iconColor="text"
+                iconSize="l"
+                onClick={() => setShowSettings(!showSettings)}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      {showCharacters && (
+        <EuiFlyout
+          side="left"
+          type="overlay"
+          paddingSize="s"
+          size="s"
+          outsideClickCloses={true}
+          onClose={() => setShowCharacters(false)}
+        >
+          <EuiPanel>Characters</EuiPanel>
+        </EuiFlyout>
+      )}
+
+      {showAccounts && (
+        <EuiFlyout
+          side="left"
+          type="overlay"
+          paddingSize="s"
+          size="s"
+          outsideClickCloses={true}
+          onClose={() => setShowAccounts(false)}
+        >
+          <EuiPanel>Accounts</EuiPanel>
+        </EuiFlyout>
+      )}
+
+      {showSettings && (
+        <EuiFlyout
+          side="left"
+          type="overlay"
+          paddingSize="s"
+          size="s"
+          outsideClickCloses={true}
+          onClose={() => setShowSettings(false)}
+        >
+          <EuiPanel>Settings</EuiPanel>
+        </EuiFlyout>
+      )}
+    </>
+  );
+};
+
+Sidebar.displayName = 'Sidebar';