sorting (#136)

* sorting

add menu
add sort by left to Read
add sort alphabetical
add sort by ID
add Asc/Desc

* woops

* woops

* Camel case

src/components/library/LibraryOptions.tsx

@@ -8,9 +8,12 @@
 
 import React from 'react';
 import FilterListIcon from '@mui/icons-material/FilterList';
+import SortIcon from '@mui/icons-material/Sort';
 import { Drawer, FormControlLabel, IconButton } from '@mui/material';
 import useLibraryOptions from 'util/useLibraryOptions';
 import ThreeStateCheckbox from 'components/util/ThreeStateCheckbox';
+import Switch from '@mui/material/Switch';
+import Radio from '@mui/material/Radio';
 import { Box } from '@mui/system';
 
 function Options() {
@@ -25,8 +28,32 @@ function Options() {
     );
 }
 
+function SortOptions() {
+    const {
+        sorts, setSorts, sortDesc, setSortDesc,
+    } = useLibraryOptions();
+
+    const handleSortChange = (name: string) => (event: { target: { checked: boolean; }; }) => {
+        setSorts(event.target.checked ? name : undefined);
+    };
+
+    const handleOrderChange = () => (event: { target: { checked: boolean; }; }) => {
+        setSortDesc(event.target.checked);
+    };
+
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+            <FormControlLabel control={<Switch name="sortDesc" checked={sortDesc === true} onChange={handleOrderChange()} color="default" />} label="Asc/Desc" />
+            <FormControlLabel control={<Radio name="sortToRead" checked={sorts === 'sortToRead'} onChange={handleSortChange('sortToRead')} />} label="Sort by left to read" />
+            <FormControlLabel control={<Radio name="sortAlph" checked={sorts === 'sortAlph'} onChange={handleSortChange('sortAlph')} />} label="Sort alphbetical" />
+            <FormControlLabel control={<Radio name="sortID" checked={sorts === 'sortID' || sorts === undefined} onChange={handleSortChange('sortID')} />} label="Sort by ID" />
+        </Box>
+    );
+}
+
 export default function LibraryOptions() {
     const [filtersOpen, setFiltersOpen] = React.useState(false);
+    const [sortsOpen, setSortsOpen] = React.useState(false);
     const { active } = useLibraryOptions();
     return (
         <>
@@ -50,6 +77,26 @@ export default function LibraryOptions() {
                 <Options />
             </Drawer>
 
+            <IconButton
+                onClick={() => setSortsOpen(!filtersOpen)}
+                color={active ? 'warning' : 'default'}
+            >
+                <SortIcon />
+            </IconButton>
+
+            <Drawer
+                anchor="bottom"
+                open={sortsOpen}
+                onClose={() => setSortsOpen(false)}
+                PaperProps={{
+                    style: {
+                        maxWidth: 600, padding: '1em', marginLeft: 'auto', marginRight: 'auto',
+                    },
+                }}
+            >
+                <SortOptions />
+            </Drawer>
+
         </>
     );
 }