Common:Navigation: add click action at root room name

packages/common/components/Navigation/Navigation.js

@@ -143,7 +143,7 @@ const Navigation = ({
       {titleIcon && <ReactSVG className="title-icon" src={titleIcon} />}
       <Text
         title={title}
-        isOpen={false}
+        isOpen={isOpen}
         isRootFolder={isRootFolder}
         onClick={toggleDropBox}
       />
@@ -153,12 +153,22 @@ const Navigation = ({
   const navigationTitleContainerNode = showRootFolderNavigation ? (
     <div className="title-container">
       <Text
+        className="room-title"
         title={
           rootRoomTitle || navigationItems[navigationItems.length - 2].title
         }
-        isOpen={false}
+        isOpen={isOpen}
         isRootFolder={isRootFolder}
         isRootFolderTitle
+        onClick={() => {
+          {
+            onClickFolder(
+              navigationItems[navigationItems.length - 2].id,
+              false
+            );
+            setIsOpen(false);
+          }
+        }}
       />
       {navigationTitleNode}
     </div>
@@ -205,6 +215,7 @@ const Navigation = ({
                 burgerLogo={burgerLogo}
                 titleIcon={titleIcon}
                 currentDeviceType={currentDeviceType}
+                navigationTitleContainerNode={navigationTitleContainerNode}
               />
             </>
           )}

packages/common/components/Navigation/StyledNavigation.js

@@ -116,6 +116,10 @@ const StyledContainer = styled.div`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    .room-title {
+      cursor: pointer;
+    }
   }
 
   .navigation-header-separator {

packages/common/components/Navigation/sub-components/drop-box.js

@@ -121,6 +121,7 @@ const DropBox = React.forwardRef(
       burgerLogo,
       titleIcon,
       currentDeviceType,
+      navigationTitleContainerNode,
     },
     ref
   ) => {
@@ -157,26 +158,6 @@ const DropBox = React.forwardRef(
       );
     }, [sectionHeight, currentDeviceType]);
 
-    const navigationTitleNode = (
-      <div className="title-block">
-        {titleIcon && <ReactSVG className="title-icon" src={titleIcon} />}
-        <Text title={title} isOpen={true} onClick={toggleDropBox} />
-      </div>
-    );
-
-    const navigationTitleContainerNode = showRootFolderNavigation ? (
-      <div className="title-container">
-        <Text
-          title={navigationItems[navigationItems.length - 2].title}
-          isOpen={true}
-          isRootFolderTitle
-        />
-        {navigationTitleNode}
-      </div>
-    ) : (
-      navigationTitleNode
-    );
-
     const isTabletView = currentDeviceType === DeviceType.tablet;
 
     return (