resizeable tree (#1084)

commafeed-client/src/app/constants.ts

@@ -88,7 +88,6 @@ export const Constants = {
     layout: {
         mobileBreakpoint: DEFAULT_THEME.breakpoints.md,
         headerHeight: 60,
-        sidebarWidth: 350,
         entryMaxWidth: 650,
         isTopVisible: (div: HTMLElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight,
         isBottomVisible: (div: HTMLElement) => div.getBoundingClientRect().bottom <= window.innerHeight,

commafeed-client/src/app/slices/tree.ts

@@ -9,10 +9,12 @@ import { redirectTo } from "./redirect"
 interface TreeState {
     rootCategory?: Category
     mobileMenuOpen: boolean
+    sidebarWidth: number
 }
 
 const initialState: TreeState = {
     mobileMenuOpen: false,
+    sidebarWidth: 350,
 }
 
 export const reloadTree = createAsyncThunk("tree/reload", () => client.category.getRoot().then(r => r.data))
@@ -27,6 +29,9 @@ export const treeSlice = createSlice({
         setMobileMenuOpen: (state, action: PayloadAction<boolean>) => {
             state.mobileMenuOpen = action.payload
         },
+        setSidebarWidth: (state, action: PayloadAction<number>) => {
+            state.sidebarWidth = action.payload
+        },
     },
     extraReducers: builder => {
         builder.addCase(reloadTree.fulfilled, (state, action) => {
@@ -54,5 +59,5 @@ export const treeSlice = createSlice({
     },
 })
 
-export const { setMobileMenuOpen } = treeSlice.actions
+export const { setMobileMenuOpen, setSidebarWidth } = treeSlice.actions
 export default treeSlice.reducer