Add navigation element animations

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

src/state/home.ts

@@ -1,9 +1,9 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { HOME_SORT, SORT_DIRECTION, VIEW } from '../types';
+import { MEME_SORT, SORT_DIRECTION, VIEW } from '../types';
 import { MEME_TYPE } from '../database';
 
 interface HomeState {
-  sort: HOME_SORT;
+  sort: MEME_SORT;
   sortDirection: SORT_DIRECTION;
   view: VIEW;
   favoritesOnly: boolean;
@@ -11,7 +11,7 @@ interface HomeState {
 }
 
 const initialState: HomeState = {
-  sort: HOME_SORT.TITLE,
+  sort: MEME_SORT.TITLE,
   sortDirection: SORT_DIRECTION.ASCENDING,
   view: VIEW.MASONRY,
   favoritesOnly: false,
@@ -22,7 +22,7 @@ const homeSlice = createSlice({
   name: 'home',
   initialState,
   reducers: {
-    setHomeSort: (state, action: PayloadAction<HOME_SORT>) => {
+    setHomeSort: (state, action: PayloadAction<MEME_SORT>) => {
       state.sort = action.payload;
     },
     setHomeSortDirection: (state, action: PayloadAction<SORT_DIRECTION>) => {

src/state/index.ts

@@ -13,22 +13,26 @@ import { createRealmPersistStorage } from '@bankify/redux-persist-realm';
 import settingsReducer from './settings';
 import homeReducer from './home';
 import tagsReducer from './tags';
+import navigationReducer from './navigation';
 
 const rootReducer = combineReducers({
   settings: settingsReducer,
   home: homeReducer,
   tags: tagsReducer,
+  navigation: navigationReducer,
 });
 
 interface RootState {
   settings: ReturnType<typeof settingsReducer>;
   home: ReturnType<typeof homeReducer>;
   tags: ReturnType<typeof tagsReducer>;
+  navigation: ReturnType<typeof navigationReducer>;
 }
 
 const persistConfig = {
   key: 'root',
   storage: createRealmPersistStorage({ path: 'redux.realm' }),
+  blacklist: ['navigation'],
 };
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);
@@ -69,3 +73,8 @@ export {
   setTagsSortDirection,
   toggleTagsSortDirection,
 } from './tags';
+export {
+  type NavigationState,
+  setNavVisible,
+  toggleNavVisible,
+} from './navigation';

src/state/navigation.ts

@@ -0,0 +1,31 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface NavigationState {
+  navVisible: boolean;
+}
+
+const initialState: NavigationState = {
+  navVisible: true,
+};
+
+const navigationSlice = createSlice({
+  name: 'navigation',
+  initialState,
+  reducers: {
+    setNavVisible: (state, action: PayloadAction<boolean>) => {
+      state.navVisible = action.payload;
+    },
+    toggleNavVisible: state => {
+      state.navVisible = !state.navVisible;
+    },
+  },
+});
+
+const { setNavVisible, toggleNavVisible } = navigationSlice.actions;
+
+export {
+  type NavigationState,
+  setNavVisible,
+  toggleNavVisible,
+};
+export default navigationSlice.reducer;

src/state/tags.ts

@@ -8,7 +8,7 @@ interface TagsState {
 
 const initialState: TagsState = {
   sort: TAG_SORT.NAME,
-  sortDirection: SORT_DIRECTION.DESCENDING,
+  sortDirection: SORT_DIRECTION.ASCENDING,
 };
 
 const tagsSlice = createSlice({