feishin/src/renderer/layouts/default-layout/left-sidebar.tsx

import { useRef } from 'react';
import styled from 'styled-components';
import { ResizeHandle } from '/@/renderer/features/shared';
import { CollapsedSidebar } from '/@/renderer/features/sidebar/components/collapsed-sidebar';
import { Sidebar } from '/@/renderer/features/sidebar/components/sidebar';
import { useSidebarStore } from '/@/renderer/store';

const SidebarContainer = styled.aside`
    position: relative;
    grid-area: sidebar;
    background: var(--sidebar-bg);
    border-right: var(--sidebar-border);
`;

interface LeftSidebarProps {
    isResizing: boolean;
    startResizing: (direction: 'left' | 'right') => void;
}

export const LeftSidebar = ({ isResizing, startResizing }: LeftSidebarProps) => {
    const sidebarRef = useRef<HTMLDivElement | null>(null);
    const { collapsed } = useSidebarStore();

    return (
        <SidebarContainer id="sidebar">
            <ResizeHandle
                ref={sidebarRef}
                $isResizing={isResizing}
                $placement="right"
                onMouseDown={(e) => {
                    e.preventDefault();
                    startResizing('left');
                }}
            />
            {collapsed ? <CollapsedSidebar /> : <Sidebar />}
        </SidebarContainer>
    );
};