TakahashiNguyen
ae8134fd64
Release package / release (push) Failing after 7m21s
Co-authored-by: TakahashiNg <83152264+TakahashiNguyen@users.noreply.github.com> Reviewed-on: #38
81 lines
3.2 KiB
TypeScript
81 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { SHOP_INFO } from "@/lib/constants";
|
|
import type React from "react";
|
|
|
|
import type { CategorySidebarProps } from "./Navigation.types";
|
|
|
|
/**
|
|
* Left sidebar — always visible, collapsible on all screen sizes.
|
|
*
|
|
* Collapsed → 64 px wide, icon only
|
|
* Expanded → 240 px wide, icon + label
|
|
*
|
|
* Width transition is handled by Tailwind w-16 / w-60 + transition-all.
|
|
* Parent controls open/close state via isOpen + onToggle props.
|
|
*/
|
|
export default function CategorySidebar({
|
|
isOpen,
|
|
onToggle,
|
|
}: CategorySidebarProps) {
|
|
return (
|
|
<aside
|
|
className={`sticky z-20 hidden shrink-0 flex-col overflow-x-hidden overflow-y-auto border-r border-(--color-border) bg-(--color-bg-sidebar) transition-all duration-250 ease-in-out md:flex xl:w-60 ${isOpen ? "w-60" : "w-16"} `}
|
|
style={
|
|
{
|
|
top: "var(--spacing-header-height)",
|
|
height: "calc(100vh - var(--spacing-header-height))",
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
{/* ── Sidebar header: title + toggle button ── */}
|
|
<div
|
|
className={`flex shrink-0 items-center border-b border-(--color-border) xl:justify-between xl:px-4 xl:py-3 ${isOpen ? "justify-between px-4 py-3" : "justify-center px-0 py-3"} `}
|
|
>
|
|
{/* Title — shown when expanded, always shown on xl+ */}
|
|
<span
|
|
className={`text-xs font-bold tracking-widest whitespace-nowrap text-(--color-text-muted) uppercase ${isOpen ? "block" : "hidden"} xl:block`}
|
|
>
|
|
<i className="fa-solid fa-utensils mr-2 text-(--color-primary)"></i>
|
|
Thực Đơn
|
|
</span>
|
|
|
|
{/* Toggle button — hidden on xl+ (sidebar is always expanded there) */}
|
|
<button
|
|
onClick={onToggle}
|
|
title={isOpen ? "Thu gọn menu" : "Mở rộng menu"}
|
|
aria-label={isOpen ? "Thu gọn menu" : "Mở rộng menu"}
|
|
className="flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none bg-transparent text-(--color-text-muted) transition-colors duration-150 hover:bg-(--color-border-light) hover:text-(--color-primary) xl:hidden"
|
|
>
|
|
<i
|
|
className={`fa-solid text-sm transition-transform duration-250 ${
|
|
isOpen ? "fa-chevron-left" : "fa-chevron-right"
|
|
}`}
|
|
></i>
|
|
</button>
|
|
</div>
|
|
|
|
{/* ── Sidebar footer: opening hours ── */}
|
|
<div
|
|
className={`shrink-0 border-t border-(--color-border) py-3 xl:px-4 ${isOpen ? "px-4" : "flex justify-center px-0"} `}
|
|
>
|
|
{/* Text row — shown when expanded, always shown on xl+ */}
|
|
<div
|
|
className={`items-center gap-2 text-xs text-(--color-text-muted) ${isOpen ? "flex" : "hidden"} xl:flex`}
|
|
>
|
|
<i className="fa-solid fa-clock shrink-0 text-(--color-accent)"></i>
|
|
<span>{SHOP_INFO.openHours}</span>
|
|
</div>
|
|
|
|
{/* Icon-only — shown when collapsed, hidden on xl+ */}
|
|
<span className="xl:hidden">
|
|
<i
|
|
className={`fa-solid fa-clock text-sm text-(--color-text-muted) ${isOpen ? "hidden" : "block"}`}
|
|
title={SHOP_INFO.openHours}
|
|
></i>
|
|
</span>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|