Split up main content route component

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

@@ -0,0 +1,38 @@
+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>
+  );
+};