refactor: align right sidebar animation mechanism with left sidebar

Replace Box component with MuiDrawer for the right sidebar to match
the left sidebar's implementation. Both sidebars now use identical
patterns: persistent/temporary variants, fixed width, and margin-based
content shifting for open/close transitions.

Author: ulrikandersen

src/features/sidebar/view/internal/secondary/Container.tsx

@@ -47,27 +47,20 @@ interface WrapperStackProps {
 
 const WrapperStack = styled(Stack, {
   shouldForwardProp: (prop) => prop !== "isSidebarOpen" && prop !== "sidebarWidth" && prop !== "diffWidth" && prop !== "isDiffOpen"
-})<WrapperStackProps>(({ theme, sidebarWidth, isSidebarOpen, diffWidth: _diffWidth, isDiffOpen }) => {
- 
-  
+})<WrapperStackProps>(({ theme, sidebarWidth, isSidebarOpen, diffWidth, isDiffOpen }) => {
   return {
     transition: theme.transitions.create(["margin", "width"], {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen
     }),
     marginLeft: isSidebarOpen ? 0 : `-${sidebarWidth}px`,
-    ...(isSidebarOpen && {
+    marginRight: isDiffOpen ? 0 : `-${diffWidth}px`,
+    ...((isSidebarOpen || isDiffOpen) && {
       transition: theme.transitions.create(["margin", "width"], {
         easing: theme.transitions.easing.easeOut,
         duration: theme.transitions.duration.enteringScreen,
       }),
     }),
-    ...(isDiffOpen && {
-      transition: theme.transitions.create(["margin", "width"], {
-        easing: theme.transitions.easing.easeOut,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    })
   };
 })
 

src/features/sidebar/view/internal/tertiary/RightContainer.tsx

@@ -1,37 +1,87 @@
 'use client'
 
-import { Box } from "@mui/material"
-import { useTheme } from "@mui/material/styles" 
+import { SxProps } from "@mui/system"
+import { Drawer as MuiDrawer } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
 
 const RightContainer = ({
   width,
   isOpen,
-  onClose: _onClose,
+  onClose,
   children
 }: {
   width: number
   isOpen: boolean
   onClose?: () => void
   children?: React.ReactNode
+}) => {
+  return (
+    <>
+      <InnerRightContainer
+        variant="temporary"
+        width={width}
+        isOpen={isOpen}
+        onClose={onClose}
+        keepMounted={true}
+        sx={{ display: { xs: "block", sm: "none" } }}
+      >
+        {children}
+      </InnerRightContainer>
+      <InnerRightContainer
+        variant="persistent"
+        width={width}
+        isOpen={isOpen}
+        keepMounted={false}
+        sx={{ display: { xs: "none", sm: "block" } }}
+      >
+        {children}
+      </InnerRightContainer>
+    </>
+  )
+}
+
+export default RightContainer
+
+const InnerRightContainer = ({
+  variant,
+  width,
+  isOpen,
+  onClose,
+  keepMounted,
+  sx,
+  children
+}: {
+  variant: "persistent" | "temporary"
+  width: number
+  isOpen: boolean
+  onClose?: () => void
+  keepMounted?: boolean
+  sx: SxProps
+  children?: React.ReactNode
 }) => {
   const theme = useTheme()
-  
-  if (!isOpen) {
-    return null
-  }
-  
   return (
-    <Box
+    <MuiDrawer
+      variant={variant}
+      anchor="right"
+      open={isOpen}
+      onClose={onClose}
+      ModalProps={{
+        keepMounted: keepMounted || false
+      }}
       sx={{
+        ...sx,
         width: width,
-        height: "100%",
-        backgroundColor: theme.palette.background.default,
         flexShrink: 0,
+        "& .MuiDrawer-paper": {
+          width: width,
+          boxSizing: "border-box",
+          borderLeft: 0,
+          background: theme.palette.background.default
+        }
       }}
     >
       {children}
-    </Box>
+    </MuiDrawer>
   )
-}
-
-export default RightContainer
+}