project setup

store/screen/screenSizeSlice.ts

@@ -0,0 +1,48 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { Dimensions } from "react-native";
+
+import type { RootState } from "../index";
+
+export interface ScreenSizeState {
+  width: number;
+  height: number;
+  isMobile: boolean;
+  sidebarCollapsed: boolean;
+}
+
+const initialDimensions = Dimensions.get("window");
+
+const initialState: ScreenSizeState = {
+  width: initialDimensions.width,
+  height: initialDimensions.height,
+  isMobile: initialDimensions.width < 768,
+  sidebarCollapsed: false,
+};
+
+export const screenSizeSlice = createSlice({
+  name: "screenSize",
+  initialState,
+  reducers: {
+    setScreenSize: (
+      state,
+      action: PayloadAction<{ width: number; height: number }>
+    ) => {
+      state.width = action.payload.width;
+      state.height = action.payload.height;
+      state.isMobile = action.payload.width < 768;
+    },
+    setSidebarCollapsed: (state, action: PayloadAction<boolean>) => {
+      state.sidebarCollapsed = action.payload;
+    },
+  },
+});
+
+export const { setScreenSize, setSidebarCollapsed } = screenSizeSlice.actions;
+
+export const selectScreenSize = (state: RootState) => state.screenSize;
+export const selectIsMobile = (state: RootState) => state.screenSize.isMobile;
+export const selectWidth = (state: RootState) => state.screenSize.width;
+export const selectHeight = (state: RootState) => state.screenSize.height;
+export const selectSidebarCollapsed = (state: RootState) => state.screenSize.sidebarCollapsed;
+
+export default screenSizeSlice.reducer;