Handle right sidebar

src/renderer/layouts/default-layout.tsx

@@ -1,8 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { Menu, Button } from '@mantine/core';
+import { motion } from 'framer-motion';
 import { Outlet } from 'react-router';
-import { SideQueue } from '@/renderer/features/side-queue/components/SideQueue';
+import { SideQueue } from '@/renderer/features/side-queue/components/side-queue';
 import { Titlebar } from '@/renderer/features/titlebar/components/titlebar';
 import { useAppStore } from '@/renderer/store';
 import {
@@ -51,7 +52,7 @@ const SidebarContainer = styled.div`
   background: var(--sidebar-bg);
 `;
 
-const RightSidebarContainer = styled.div`
+const RightSidebarContainer = styled(motion.div)`
   position: relative;
   grid-area: right-sidebar;
   background: var(--sidebar-bg);
@@ -162,7 +163,13 @@ export const DefaultLayout = () => {
             />
             <Sidebar />
           </SidebarContainer>
-          <RightSidebarContainer>
+          {sidebar.rightExpanded && (
+            <RightSidebarContainer
+              key="sb"
+              animate={{ opacity: 1, scale: 1, x: 0 }}
+              initial={{ opacity: 0, x: 500 }}
+              transition={{ duration: 0.3, ease: 'circOut' }}
+            >
               <ResizeHandle
                 ref={rightSidebarRef}
                 isResizing={isResizingRight}
@@ -172,8 +179,9 @@ export const DefaultLayout = () => {
                   startResizing('right');
                 }}
               />
-            {sidebar.rightExpanded && <SideQueue />}
+              <SideQueue />
             </RightSidebarContainer>
+          )}
           <Outlet />
         </MainContainer>
         <PlayerbarContainer>

src/renderer/utils/constrain-sidebar-width.ts

@@ -9,3 +9,15 @@ export const constrainSidebarWidth = (num: number) => {
 
   return num;
 };
+
+export const constrainRightSidebarWidth = (num: number) => {
+  if (num < 250) {
+    return 250;
+  }
+
+  if (num > 960) {
+    return 960;
+  }
+
+  return num;
+};