style: enhance MainSidebar and PageContainer styles for improved UI

- Added 3D transform styles to PageContainer for better visual effects.
- Updated MainSidebar to use optional chaining for safer property access.
- Removed background color from MainSidebar to support transparency.

src/renderer/src/Routes.tsx

@@ -91,6 +91,9 @@ const PageContainer = styled(motion.div)`
   z-index: 10;
   will-change: transform;
   backface-visibility: hidden;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+  -webkit-font-smoothing: subpixel-antialiased;
 `
 
 const pageTransition = {

src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx

@@ -94,8 +94,8 @@ const MainSidebar: FC = () => {
     ]
     return () => unsubscribe.forEach((unsubscribe) => unsubscribe())
   }, [
-    activeAssistant.id,
-    activeTopic.assistantId,
+    activeAssistant?.id,
+    activeTopic?.assistantId,
     clickAssistantToShowTopic,
     isAppMenuExpanded,
     showAssistants,

src/renderer/src/pages/home/MainSidebar/MainSidebarStyles.tsx

@@ -53,7 +53,6 @@ export const Container = styled.div<{ transparent?: boolean }>`
   max-width: var(--assistants-width);
   border-right: 0.5px solid var(--color-border);
   height: 100vh;
-  background-color: ${({ transparent }) => (transparent ? 'transparent' : 'var(--color-background)')};
 `
 
 export const MainMenu = styled.div`