diff --git a/src/page/HomePage/HeaderView.js b/src/page/HomePage/HeaderView.js
index 067b7208ffdf..70e4b73b6b69 100644
--- a/src/page/HomePage/HeaderView.js
+++ b/src/page/HomePage/HeaderView.js
@@ -34,7 +34,7 @@ class HeaderView extends React.Component {
                     </TouchableOpacity>
                     )}
                     {this.state && this.state.reportName && (
-                        <Text style={[styles.navText]}>
+                        <Text numberOfLines={2} style={[styles.navText]}>
                             {this.state.reportName}
                         </Text>
                     )}
diff --git a/src/page/HomePage/HomePage.js b/src/page/HomePage/HomePage.js
index f1bd9c93d7da..4ff64fcd9c00 100644
--- a/src/page/HomePage/HomePage.js
+++ b/src/page/HomePage/HomePage.js
@@ -3,6 +3,8 @@ import {
     StatusBar,
     View,
     Dimensions,
+    Animated,
+    Easing
 } from 'react-native';
 import {SafeAreaInsetsContext, SafeAreaProvider} from 'react-native-safe-area-context';
 import {Route} from '../../lib/Router';
@@ -26,7 +28,8 @@ export default class App extends React.Component {
             // TODO: Set back to windowSize.width > widthBreakPoint once
             //  https://github.com/AndrewGable/ReactNativeChat/pull/132 is merged
             hamburgerShown: true,
-            isHamburgerEnabled: windowSize.width <= widthBreakPoint
+            isHamburgerEnabled: windowSize.width <= widthBreakPoint,
+            animationTranslateX: new Animated.Value(0),
         };
 
         this.toggleHamburger = this.toggleHamburger.bind(this);
@@ -74,8 +77,26 @@ export default class App extends React.Component {
             return;
         }
 
-        const currentValue = this.state.hamburgerShown;
-        this.setState({hamburgerShown: !currentValue});
+        const hamburgerIsShown = this.state.hamburgerShown;
+        const animationFinalValue = hamburgerIsShown ? -300 : 0;
+
+        // If the hamburger currently is not shown, we want to immediately make it visible for the animation
+        if (!hamburgerIsShown) {
+            this.setState({hamburgerShown: !hamburgerIsShown});
+        }
+
+        Animated.timing(this.state.animationTranslateX, {
+            toValue: animationFinalValue,
+            duration: 200,
+            easing: Easing.ease,
+            useNativeDriver: false
+        }).start(({finished}) => {
+            // If the hamburger is currently shown, we want to hide it only after the animation is complete
+            // Otherwise, we can't see the animation
+            if (finished && hamburgerIsShown) {
+                this.setState({hamburgerShown: false});
+            }
+        });
     }
 
     render() {
@@ -98,12 +119,18 @@ export default class App extends React.Component {
                             ]}
                         >
                             <Route path="/:reportID?">
-                                <View style={[hamburgerStyle, visibility]}>
+                                <Animated.View style={[
+                                    hamburgerStyle,
+                                    visibility,
+                                    {
+                                        transform: [{translateX: this.state.animationTranslateX}]
+                                    }]}
+                                >
                                     <Sidebar insets={insets} onLinkClick={this.toggleHamburger} />
-                                </View>
+                                </Animated.View>
                                 <View style={[styles.appContent, appContentStyle, styles.flex1, styles.flexColumn]}>
                                     <Header
-                                        shouldShowHamburgerButton={!this.state.hamburgerShown}
+                                        shouldShowHamburgerButton={this.state.isHamburgerEnabled}
                                         onHamburgerButtonClicked={this.toggleHamburger}
                                     />
                                     <Main />
diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js
index 2594c1d80954..53c8b4c3005d 100644
--- a/src/style/StyleSheet.js
+++ b/src/style/StyleSheet.js
@@ -445,11 +445,18 @@ const styles = {
         top: 0,
         bottom: 0,
         zIndex: 2,
-        width: 300
+        width: 300,
+        shadowColor: '#000000',
+        shadowOffset: {
+            width: 0,
+            height: 0,
+        },
+        shadowOpacity: 0.3,
+        shadowRadius: 20
     },
 
     hamburgerOpen: {
-        width: 300
+        width: 300,
     }
 
 };