@simplysm/solid 13.0.0-beta.6

package/src/components/layout/sidebar/SidebarMenu.tsx

@@ -0,0 +1,181 @@
+import {
+  type Component,
+  type JSX,
+  For,
+  Show,
+  splitProps,
+  createSignal,
+  createMemo,
+  createEffect,
+  createContext,
+  useContext,
+  type Accessor,
+} from "solid-js";
+import { useLocation, useNavigate } from "@solidjs/router";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import type { IconProps } from "@tabler/icons-solidjs";
+import type { ComponentSize } from "../../../styles/tokens.styles";
+import { Icon } from "../../display/Icon";
+import { List } from "../../data/list/List";
+import { ListItem } from "../../data/list/ListItem";
+
+const headerClass = clsx(
+  "px-4",
+  "py-2",
+  "text-xs",
+  "font-semibold",
+  "text-base-500",
+  "dark:text-base-400",
+  "uppercase",
+  "tracking-wider",
+);
+
+export interface SidebarMenuItem {
+  title: string;
+  href?: string;
+  icon?: Component<IconProps>;
+  children?: SidebarMenuItem[];
+}
+
+export interface SidebarMenuProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+  /**
+   * 메뉴 아이템 배열
+   */
+  menus: SidebarMenuItem[];
+}
+
+// 내부 Context: 초기 펼침 상태 공유
+interface MenuContextValue {
+  initialOpenItems: Accessor<Set<SidebarMenuItem>>;
+}
+
+const MenuContext = createContext<MenuContextValue>();
+
+/**
+ * 사이드바 메뉴 컴포넌트
+ *
+ * @remarks
+ * - "MENU" 헤더 고정 표시
+ * - List/ListItem으로 재귀적 메뉴 렌더링
+ * - pathname 정확 일치로 선택 상태 판단 (query string 무시)
+ * - 선택된 메뉴의 부모들은 초기 렌더링 시 자동 펼침
+ * - 외부 링크(://포함)는 새 탭에서 열기
+ *
+ * @example
+ * ```tsx
+ * <SidebarMenu menus={[
+ *   { title: "대시보드", href: "/dashboard", icon: IconHome },
+ *   {
+ *     title: "설정",
+ *     icon: IconSettings,
+ *     children: [
+ *       { title: "프로필", href: "/settings/profile" },
+ *       { title: "보안", href: "/settings/security" },
+ *     ],
+ *   },
+ * ]} />
+ * ```
+ */
+export const SidebarMenu: Component<SidebarMenuProps> = (props) => {
+  const [local, rest] = splitProps(props, ["menus", "class"]);
+
+  const location = useLocation();
+
+  // 현재 pathname과 일치하는 메뉴의 부모들을 찾아 펼침 상태 계산
+  const findSelectedPath = (
+    menus: SidebarMenuItem[],
+    pathname: string,
+    path: SidebarMenuItem[] = [],
+  ): SidebarMenuItem[] | null => {
+    for (const menu of menus) {
+      const currentPath = [...path, menu];
+      if (menu.href === pathname) {
+        return currentPath;
+      }
+      if (menu.children) {
+        const found = findSelectedPath(menu.children, pathname, currentPath);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+
+  // pathname 변경에 반응하여 펼침 상태 재계산
+  const initialOpenItems = createMemo(() => {
+    const selectedPath = findSelectedPath(local.menus, location.pathname);
+    return selectedPath
+      ? new Set(selectedPath.slice(0, -1)) // 마지막 항목(선택된 메뉴)은 제외하고 부모들만 펼침
+      : new Set<SidebarMenuItem>();
+  });
+
+  const getClassName = () => twMerge("flex-1 overflow-y-auto", local.class);
+
+  return (
+    <MenuContext.Provider value={{ initialOpenItems }}>
+      <div {...rest} data-sidebar-menu class={getClassName()}>
+        <div class={headerClass}>MENU</div>
+        <List inset>
+          <For each={local.menus}>{(menu) => <MenuItem menu={menu} size="lg" />}</For>
+        </List>
+      </div>
+    </MenuContext.Provider>
+  );
+};
+
+interface MenuItemProps {
+  menu: SidebarMenuItem;
+  size?: ComponentSize;
+}
+
+const MenuItem: Component<MenuItemProps> = (props) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const menuContext = useContext(MenuContext)!;
+
+  const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;
+
+  // 외부 링크 여부 확인
+  const isExternalLink = () => props.menu.href?.includes("://") ?? false;
+
+  // 선택 상태
+  const isSelected = () => props.menu.href === location.pathname;
+
+  // 펼침 상태 계산 (object reference로 비교)
+  const shouldBeOpen = () => menuContext.initialOpenItems().has(props.menu);
+
+  const [open, setOpen] = createSignal(false);
+
+  // pathname 변경에 반응하여 펼침 상태 업데이트
+  createEffect(() => {
+    if (shouldBeOpen()) {
+      setOpen(true);
+    }
+  });
+
+  const handleClick = () => {
+    if (hasChildren()) {
+      setOpen((v) => !v);
+    } else if (props.menu.href !== undefined) {
+      if (isExternalLink()) {
+        window.open(props.menu.href, "_blank", "noopener,noreferrer");
+      } else {
+        navigate(props.menu.href);
+      }
+    }
+  };
+
+  return (
+    <ListItem selected={isSelected()} open={open()} onOpenChange={setOpen} onClick={handleClick} size={props.size}>
+      <Show when={props.menu.icon}>
+        <Icon icon={props.menu.icon!} />
+      </Show>
+      <span class="truncate">{props.menu.title}</span>
+      <Show when={hasChildren()}>
+        <ListItem.Children>
+          <For each={props.menu.children}>{(child) => <MenuItem menu={child} />}</For>
+        </ListItem.Children>
+      </Show>
+    </ListItem>
+  );
+};

package/src/components/layout/sidebar/SidebarUser.tsx

@@ -0,0 +1,107 @@
+import { createSignal, For, type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { ripple } from "../../../directives/ripple";
+import { Collapse } from "../../disclosure/Collapse";
+import { List } from "../../data/list/List";
+import { ListItem } from "../../data/list/ListItem";
+
+void ripple;
+
+const containerClass = clsx("m-2 flex flex-col overflow-hidden rounded bg-white dark:bg-base-800");
+
+const headerClass = clsx(
+  "flex",
+  "items-center",
+  "p-2",
+  "text-left",
+  "cursor-pointer",
+  "transition-colors",
+  "hover:bg-base-100",
+  "dark:hover:bg-base-700",
+);
+
+const headerReadonlyClass = clsx("cursor-default hover:bg-transparent dark:hover:bg-transparent");
+
+export interface SidebarUserMenu {
+  title: string;
+  onClick: () => void;
+}
+
+export interface SidebarUserProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onClick"> {
+  /**
+   * 드롭다운 메뉴 (있을 때만 클릭 가능)
+   */
+  menus?: SidebarUserMenu[];
+
+  /**
+   * 사용자 정보 영역 (커스터마이징)
+   */
+  children: JSX.Element;
+}
+
+/**
+ * 사이드바 사용자 정보 컴포넌트
+ *
+ * @remarks
+ * - children으로 사용자 정보 영역 커스터마이징
+ * - menus가 있을 때만 클릭 가능 및 ripple 효과 적용
+ * - 클릭 시 드롭다운 메뉴 펼침/접힘
+ *
+ * @example
+ * ```tsx
+ * <SidebarUser menus={[
+ *   { title: "프로필", onClick: () => navigate("/profile") },
+ *   { title: "로그아웃", onClick: handleLogout },
+ * ]}>
+ *   <Avatar src={user.avatar} />
+ *   <span>{user.name}</span>
+ * </SidebarUser>
+ * ```
+ */
+export const SidebarUser: ParentComponent<SidebarUserProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "menus"]);
+
+  const [open, setOpen] = createSignal(false);
+
+  const hasMenus = () => local.menus !== undefined && local.menus.length > 0;
+
+  const handleClick = () => {
+    if (hasMenus()) {
+      setOpen((v) => !v);
+    }
+  };
+
+  const handleMenuClick = (menu: SidebarUserMenu) => {
+    setOpen(false);
+    menu.onClick();
+  };
+
+  const getHeaderClassName = () =>
+    twMerge(headerClass, !hasMenus() && headerReadonlyClass, open() && "border-b border-b-base-50");
+
+  const getContainerClassName = () => twMerge(containerClass, local.class);
+
+  return (
+    <div {...rest} data-sidebar-user class={getContainerClassName()}>
+      <button
+        type="button"
+        use:ripple={hasMenus()}
+        class={getHeaderClassName()}
+        onClick={handleClick}
+        aria-expanded={hasMenus() ? open() : undefined}
+      >
+        {local.children}
+      </button>
+      <Show when={hasMenus()}>
+        <Collapse open={open()}>
+          <List inset>
+            <For each={local.menus}>
+              {(menu) => <ListItem onClick={() => handleMenuClick(menu)}>{menu.title}</ListItem>}
+            </For>
+          </List>
+        </Collapse>
+      </Show>
+    </div>
+  );
+};

package/src/components/layout/topbar/Topbar.tsx

@@ -0,0 +1,93 @@
+import { type JSX, type ParentComponent, splitProps, Show } from "solid-js";
+import { IconMenu2 } from "@tabler/icons-solidjs";
+import clsx from "clsx";
+import { Icon } from "../../display/Icon";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../../form-control/Button";
+import { useSidebarContextOptional } from "../sidebar/SidebarContext";
+import { TopbarContainer } from "./TopbarContainer";
+import { TopbarMenu } from "./TopbarMenu";
+import { TopbarUser } from "./TopbarUser";
+
+export type { TopbarContainerProps } from "./TopbarContainer";
+export type { TopbarMenuItem, TopbarMenuProps } from "./TopbarMenu";
+export type { TopbarUserMenu, TopbarUserProps } from "./TopbarUser";
+
+const baseClass = clsx(
+  // 레이아웃
+  "flex",
+  "flex-row",
+  "gap-2",
+  "items-center",
+  // 크기
+  "min-h-12",
+  "px-2",
+  // 배경/테두리
+  "bg-white",
+  "dark:bg-base-950",
+  "border-b",
+  "border-base-200",
+  "dark:border-base-700",
+  // 스크롤
+  "overflow-x-auto",
+  "overflow-y-hidden",
+  // 기타
+  "select-none",
+);
+
+export interface TopbarProps extends JSX.HTMLAttributes<HTMLElement> {
+  children: JSX.Element;
+}
+
+/**
+ * 상단바 본체 컴포넌트
+ *
+ * @remarks
+ * - SidebarContext가 있을 경우 사이드바 토글 버튼 자동 표시
+ * - SidebarContainer 내부에서 사용하면 토글 버튼이 나타남
+ * - 단독 사용 시 토글 버튼 없이 순수 Topbar로 동작
+ *
+ * @example
+ * ```tsx
+ * <Topbar>
+ *   <h1 class="text-lg font-bold">앱 이름</h1>
+ *   <Topbar.Menu menus={menuItems} />
+ *   <div class="flex-1" />
+ *   <Topbar.User menus={userMenus}>사용자</Topbar.User>
+ * </Topbar>
+ * ```
+ */
+interface TopbarComponent extends ParentComponent<TopbarProps> {
+  Container: typeof TopbarContainer;
+  Menu: typeof TopbarMenu;
+  User: typeof TopbarUser;
+}
+
+const TopbarBase: ParentComponent<TopbarProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+
+  // SidebarContext 선택적 사용 (Context 없으면 토글 버튼 미표시)
+  const sidebarContext = useSidebarContextOptional();
+
+  const handleToggle = () => {
+    sidebarContext?.setToggle((v) => !v);
+  };
+
+  const getClassName = () => twMerge(baseClass, local.class);
+
+  return (
+    <header {...rest} data-topbar class={getClassName()}>
+      <Show when={sidebarContext}>
+        <Button variant="ghost" onClick={handleToggle} class="p-2" aria-label="사이드바 토글">
+          <Icon icon={IconMenu2} size="1.5em" />
+        </Button>
+      </Show>
+      {local.children}
+    </header>
+  );
+};
+
+export const Topbar = TopbarBase as TopbarComponent;
+Topbar.Container = TopbarContainer;
+Topbar.Menu = TopbarMenu;
+Topbar.User = TopbarUser;

package/src/components/layout/topbar/TopbarContainer.tsx

@@ -0,0 +1,40 @@
+import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+const containerClass = clsx("flex h-full flex-col");
+
+export interface TopbarContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  children: JSX.Element;
+}
+
+/**
+ * Topbar + 콘텐츠 영역을 감싸는 레이아웃 컨테이너
+ *
+ * @remarks
+ * - `flex flex-col h-full` 구조로 Topbar와 콘텐츠를 수직 배치
+ * - Context 없이 순수 레이아웃 역할만 수행
+ * - 부모 요소에 높이가 지정되어야 함
+ *
+ * @example
+ * ```tsx
+ * <TopbarContainer>
+ *   <Topbar>
+ *     <h1>앱 이름</h1>
+ *     <TopbarMenu menus={menuItems} />
+ *   </Topbar>
+ *   <main class="flex-1 overflow-auto">콘텐츠</main>
+ * </TopbarContainer>
+ * ```
+ */
+export const TopbarContainer: ParentComponent<TopbarContainerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+
+  const getClassName = () => twMerge(containerClass, local.class);
+
+  return (
+    <div {...rest} data-topbar-container class={getClassName()}>
+      {local.children}
+    </div>
+  );
+};

package/src/components/layout/topbar/TopbarMenu.tsx

@@ -0,0 +1,206 @@
+import { type Component, type JSX, For, Show, splitProps, createSignal, createMemo } from "solid-js";
+import { useLocation, useNavigate } from "@solidjs/router";
+import { IconChevronDown, IconDotsVertical, type IconProps } from "@tabler/icons-solidjs";
+import { Icon } from "../../display/Icon";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../../form-control/Button";
+import { Dropdown } from "../../disclosure/Dropdown";
+import { List } from "../../data/list/List";
+import { ListItem } from "../../data/list/ListItem";
+
+const desktopNavBaseClass = clsx("hidden sm:flex", "flex-row gap-1", "items-center");
+const mobileWrapperClass = clsx("flex sm:hidden");
+const menuButtonContentClass = clsx("flex items-center", "gap-1");
+
+export interface TopbarMenuItem {
+  title: string;
+  href?: string;
+  icon?: Component<IconProps>;
+  children?: TopbarMenuItem[];
+}
+
+export interface TopbarMenuProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "children"> {
+  /**
+   * 메뉴 아이템 배열
+   */
+  menus: TopbarMenuItem[];
+}
+
+/**
+ * Topbar 드롭다운 메뉴 컴포넌트
+ *
+ * @remarks
+ * - children이 있는 항목: 클릭 시 드롭다운 표시
+ * - children이 없는 항목: 클릭 시 바로 네비게이션
+ * - 외부 링크(://포함)는 새 탭에서 열기
+ * - pathname 정확 일치로 선택 상태 판단
+ * - 하위 메뉴는 List/ListItem으로 렌더링 (모든 계층 펼침)
+ *
+ * @example
+ * ```tsx
+ * <TopbarMenu menus={[
+ *   { title: "대시보드", href: "/dashboard", icon: IconHome },
+ *   {
+ *     title: "메뉴1",
+ *     icon: IconFolder,
+ *     children: [
+ *       { title: "서브메뉴1", href: "/menu1/sub1" },
+ *       { title: "서브메뉴2", href: "/menu1/sub2" },
+ *     ],
+ *   },
+ * ]} />
+ * ```
+ */
+export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
+  const [local, rest] = splitProps(props, ["menus", "class"]);
+  const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);
+  let mobileButtonRef: HTMLButtonElement | undefined;
+
+  return (
+    <>
+      {/* 데스크탑 메뉴 (640px 이상에서만 표시) */}
+      <nav {...rest} data-topbar-menu class={twMerge(desktopNavBaseClass, local.class)}>
+        <For each={local.menus}>{(menu) => <TopbarMenuButton menu={menu} />}</For>
+      </nav>
+
+      {/* 모바일 햄버거 (640px 미만에서만 표시) */}
+      <div class={mobileWrapperClass}>
+        <Button
+          ref={mobileButtonRef}
+          variant="ghost"
+          onClick={() => setMobileMenuOpen((v) => !v)}
+          aria-label="메뉴"
+          aria-haspopup="menu"
+          aria-expanded={mobileMenuOpen()}
+        >
+          <Icon icon={IconDotsVertical} size="1.25em" />
+        </Button>
+        <Dropdown triggerRef={() => mobileButtonRef} open={mobileMenuOpen()} onOpenChange={setMobileMenuOpen}>
+          <List inset>
+            <For each={local.menus}>
+              {(menu) => <TopbarMenuDropdownItem menu={menu} onClose={() => setMobileMenuOpen(false)} />}
+            </For>
+          </List>
+        </Dropdown>
+      </div>
+    </>
+  );
+};
+
+interface TopbarMenuButtonProps {
+  menu: TopbarMenuItem;
+}
+
+const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const [open, setOpen] = createSignal(false);
+  let buttonRef: HTMLButtonElement | undefined;
+
+  const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;
+  const isExternalLink = () => props.menu.href?.includes("://") ?? false;
+
+  const isAnyChildSelected = (items: TopbarMenuItem[]): boolean => {
+    for (const item of items) {
+      if (item.href === location.pathname) return true;
+      if (item.children && isAnyChildSelected(item.children)) return true;
+    }
+    return false;
+  };
+
+  // 현재 메뉴 또는 하위 메뉴가 선택되었는지 확인 (createMemo로 캐싱)
+  const isSelected = createMemo(() => {
+    if (props.menu.href === location.pathname) return true;
+    if (props.menu.children) {
+      return isAnyChildSelected(props.menu.children);
+    }
+    return false;
+  });
+
+  const handleClick = () => {
+    if (hasChildren()) {
+      setOpen((v) => !v);
+    } else if (props.menu.href !== undefined) {
+      if (isExternalLink()) {
+        window.open(props.menu.href, "_blank", "noopener,noreferrer");
+      } else {
+        navigate(props.menu.href);
+      }
+    }
+  };
+
+  return (
+    <>
+      <Button
+        ref={buttonRef}
+        variant={isSelected() ? "solid" : "ghost"}
+        theme={isSelected() ? "primary" : "base"}
+        onClick={handleClick}
+        class={menuButtonContentClass}
+        aria-haspopup={hasChildren() ? "menu" : undefined}
+        aria-expanded={hasChildren() ? open() : undefined}
+      >
+        <Show when={props.menu.icon}>
+          <Icon icon={props.menu.icon!} />
+        </Show>
+        <span>{props.menu.title}</span>
+        <Show when={hasChildren()}>
+          <Icon icon={IconChevronDown} size="1em" class={clsx("transition-transform", open() && "rotate-180")} />
+        </Show>
+      </Button>
+      <Show when={hasChildren()}>
+        <Dropdown triggerRef={() => buttonRef} open={open()} onOpenChange={setOpen}>
+          <List inset>
+            <For each={props.menu.children}>
+              {(child) => <TopbarMenuDropdownItem menu={child} onClose={() => setOpen(false)} />}
+            </For>
+          </List>
+        </Dropdown>
+      </Show>
+    </>
+  );
+};
+
+interface TopbarMenuDropdownItemProps {
+  menu: TopbarMenuItem;
+  onClose: () => void;
+}
+
+const TopbarMenuDropdownItem: Component<TopbarMenuDropdownItemProps> = (props) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;
+  const isExternalLink = () => props.menu.href?.includes("://") ?? false;
+  const isSelected = () => props.menu.href === location.pathname;
+
+  const handleClick = () => {
+    if (props.menu.href !== undefined) {
+      if (isExternalLink()) {
+        window.open(props.menu.href, "_blank", "noopener,noreferrer");
+      } else {
+        navigate(props.menu.href);
+      }
+      props.onClose();
+    }
+    // href가 없고 children만 있는 경우 클릭해도 닫히지 않음
+  };
+
+  return (
+    <ListItem selected={isSelected()} readonly={props.menu.href === undefined && hasChildren()} onClick={handleClick}>
+      <Show when={props.menu.icon}>
+        <Icon icon={props.menu.icon!} />
+      </Show>
+      <span class="truncate">{props.menu.title}</span>
+      <Show when={hasChildren()}>
+        <ListItem.Children>
+          <For each={props.menu.children}>
+            {(child) => <TopbarMenuDropdownItem menu={child} onClose={props.onClose} />}
+          </For>
+        </ListItem.Children>
+      </Show>
+    </ListItem>
+  );
+};