Adds TrailingToolbar component

src/features/projects/view/client/ProjectsPage.tsx

@@ -65,7 +65,7 @@ export default function ProjectsPage({
           onSelectProject={handleProjectSelected}
         />
       }
-      toolbarTrailing={
+      trailingToolbar={
         <ProjectsPageTrailingToolbarItem
           stateContainer={stateContainer}
           onSelectVersion={(versionId: string) => {

src/features/sidebar/view/client/SidebarContainer.tsx

@@ -2,47 +2,38 @@
 
 import dynamic from "next/dynamic"
 import { ReactNode } from "react"
-import { Box } from "@mui/material"
-import { useTheme } from "@mui/material/styles"
 import { useSessionStorage } from "usehooks-ts"
 import ResponsiveSidebarContainer from "../base/responsive/SidebarContainer"
 import Sidebar from "../Sidebar"
 import SidebarHeader from "../SidebarHeader"
+import TrailingToolbar from "./TrailingToolbar"
 
 const SidebarContainer = ({
   sidebar,
   children,
-  toolbarTrailing
+  trailingToolbar
 }: {
   sidebar?: ReactNode
   children?: ReactNode
-  toolbarTrailing?: ReactNode
+  trailingToolbar?: ReactNode
 }) => {
   const [open, setOpen] = useSessionStorage("isDrawerOpen", true)
-  const theme = useTheme()
   return (
     <ResponsiveSidebarContainer
       isDrawerOpen={open}
       onToggleDrawerOpen={setOpen}
-      primaryHeader={<SidebarHeader/>}
+      primaryHeader={
+        <SidebarHeader/>
+      }
       primary={
         <Sidebar>
           {sidebar}
         </Sidebar>
       }
-      secondaryHeader={
-        <>
-          {toolbarTrailing != undefined && 
-            <Box sx={{ 
-              display: "flex",
-              width: "100%",
-              justifyContent: "right",
-              color: theme.palette.text.primary
-            }}>
-              {toolbarTrailing}
-            </Box>
-          }
-        </>
+      secondaryHeader={trailingToolbar &&
+        <TrailingToolbar>
+          {trailingToolbar}
+        </TrailingToolbar>
       }
       secondary={children}
     />

src/features/sidebar/view/client/TrailingToolbar.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { ReactNode } from "react"
+import { Box } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+
+export default function TrailingToolbar({
+  children
+}: {
+  children?: ReactNode
+}) {
+  const theme = useTheme()
+  return (
+    <Box sx={{ 
+      display: "flex",
+      width: "100%",
+      justifyContent: "right",
+      color: theme.palette.text.primary
+    }}>
+      {children}
+    </Box>
+  )
+}