Redesign library navigation in experimental layout

2024-09-16 14:16:34 -04:00
parent dbb0941fef
commit c5da93c30f
26 changed files with 598 additions and 311 deletions
@@ -0,0 +1,51 @@
+import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
+import ListItemIcon from '@mui/material/ListItemIcon/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText/ListItemText';
+import Menu, { type MenuProps } from '@mui/material/Menu/Menu';
+import MenuItem from '@mui/material/MenuItem/MenuItem';
+import React, { FC } from 'react';
+import { Link } from 'react-router-dom';
+
+import LibraryIcon from 'apps/experimental/components/LibraryIcon';
+import { appRouter } from 'components/router/appRouter';
+
+interface UserViewsMenuProps extends MenuProps {
+    userViews: BaseItemDto[]
+    selectedId?: string
+    includeGlobalViews?: boolean
+    onMenuClose: () => void
+}
+
+const UserViewsMenu: FC<UserViewsMenuProps> = ({
+    userViews,
+    selectedId,
+    onMenuClose,
+    ...props
+}) => {
+    return (
+        <Menu
+            {...props}
+            keepMounted
+            onClose={onMenuClose}
+        >
+            {userViews.map(view => (
+                <MenuItem
+                    key={view.Id}
+                    component={Link}
+                    to={appRouter.getRouteUrl(view, { context: view.CollectionType }).substring(1)}
+                    onClick={onMenuClose}
+                    selected={view.Id === selectedId}
+                >
+                    <ListItemIcon>
+                        <LibraryIcon item={view} />
+                    </ListItemIcon>
+                    <ListItemText>
+                        {view.Name}
+                    </ListItemText>
+                </MenuItem>
+            ))}
+        </Menu>
+    );
+};
+
+export default UserViewsMenu;