From 294840a9a0d5c3253e1f91a795018fb3ddaf6d9c Mon Sep 17 00:00:00 2001
From: lalitdeore <lalitdeore12@gmail.com>
Date: Sat, 30 Nov 2024 22:42:19 +0530
Subject: [PATCH] fix left side bar alignment issue

---
 frontend/public/icons/copyIcon.svg       |   5 +
 frontend/public/icons/deleteIcon.svg     |   4 +
 frontend/public/icons/detection.svg      |   4 +
 frontend/public/icons/docker copy.svg    |   5 +
 frontend/public/icons/documentation.svg  |   4 +
 frontend/public/icons/downloadIcon.svg   |   6 +
 frontend/public/icons/editIcon.svg       |   3 +
 frontend/public/icons/expandMoreIcon.svg |   4 +
 frontend/src/App.jsx                     |   5 +-
 frontend/src/components/LeftSideBar.jsx  | 239 +++++++++++++++--------
 frontend/src/views/AngularWorkflow.jsx   |  27 ++-
 frontend/src/views/Docs.jsx              |  10 +-
 frontend/src/views/Search.jsx            |   2 +-
 frontend/src/views/Usecases2.jsx         |   2 +-
 14 files changed, 213 insertions(+), 107 deletions(-)
 create mode 100644 frontend/public/icons/copyIcon.svg
 create mode 100644 frontend/public/icons/deleteIcon.svg
 create mode 100644 frontend/public/icons/detection.svg
 create mode 100644 frontend/public/icons/docker copy.svg
 create mode 100644 frontend/public/icons/documentation.svg
 create mode 100644 frontend/public/icons/downloadIcon.svg
 create mode 100644 frontend/public/icons/editIcon.svg
 create mode 100644 frontend/public/icons/expandMoreIcon.svg

diff --git a/frontend/public/icons/copyIcon.svg b/frontend/public/icons/copyIcon.svg
new file mode 100644
index 00000000..3efb3e78
--- /dev/null
+++ b/frontend/public/icons/copyIcon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="#212121" fill-opacity="0.02"/>
+<path d="M14 4H7.6C7.17565 4 6.76869 4.16857 6.46863 4.46863C6.16857 4.76869 6 5.17565 6 5.6V18.4C6 18.8243 6.16857 19.2313 6.46863 19.5314C6.76869 19.8314 7.17565 20 7.6 20H17.2C17.6243 20 18.0313 19.8314 18.3314 19.5314C18.6314 19.2313 18.8 18.8243 18.8 18.4V8.8L14 4Z" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 4V8.8H18.8" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/public/icons/deleteIcon.svg b/frontend/public/icons/deleteIcon.svg
new file mode 100644
index 00000000..41e0cce0
--- /dev/null
+++ b/frontend/public/icons/deleteIcon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 7.20001H6.6H19.4" stroke="#FD4C62" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.7996 7.2V18.4C17.7996 18.8243 17.631 19.2313 17.331 19.5314C17.0309 19.8314 16.624 20 16.1996 20H8.19961C7.77526 20 7.3683 19.8314 7.06824 19.5314C6.76818 19.2313 6.59961 18.8243 6.59961 18.4V7.2M8.99961 7.2V5.6C8.99961 5.17565 9.16818 4.76869 9.46824 4.46863C9.7683 4.16857 10.1753 4 10.5996 4H13.7996C14.224 4 14.6309 4.16857 14.931 4.46863C15.231 4.76869 15.3996 5.17565 15.3996 5.6V7.2" stroke="#FD4C62" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/public/icons/detection.svg b/frontend/public/icons/detection.svg
new file mode 100644
index 00000000..a751f83d
--- /dev/null
+++ b/frontend/public/icons/detection.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99984 6.83329C8.73622 6.83329 9.33317 6.23634 9.33317 5.49996C9.33317 4.76358 8.73622 4.16663 7.99984 4.16663C7.26346 4.16663 6.6665 4.76358 6.6665 5.49996C6.6665 6.23634 7.26346 6.83329 7.99984 6.83329Z" stroke="#C8C8C8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.8269 2.67329C11.1988 3.04478 11.4938 3.48593 11.6951 3.97153C11.8964 4.45712 12 4.97763 12 5.50329C12 6.02895 11.8964 6.54946 11.6951 7.03505C11.4938 7.52064 11.1988 7.9618 10.8269 8.33329M5.17354 8.32662C4.80163 7.95513 4.5066 7.51398 4.3053 7.02838C4.104 6.54279 4.00039 6.02228 4.00039 5.49662C4.00039 4.97096 4.104 4.45045 4.3053 3.96486C4.5066 3.47927 4.80163 3.03811 5.17354 2.66662M12.7135 0.786621C13.9633 2.03681 14.6654 3.73219 14.6654 5.49995C14.6654 7.26772 13.9633 8.9631 12.7135 10.2133M3.28687 10.2133C2.03706 8.9631 1.33496 7.26772 1.33496 5.49995C1.33496 3.73219 2.03706 2.03681 3.28687 0.786621" stroke="#C8C8C8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/public/icons/docker copy.svg b/frontend/public/icons/docker copy.svg
new file mode 100644
index 00000000..297bb83f
--- /dev/null
+++ b/frontend/public/icons/docker copy.svg	
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+   <circle cx="512" cy="512" r="512" style="fill:#0091e2"/>
+   <path d="M827.3 461.5c-1.6-1.3-16.1-12.2-46.7-12.2-8.1 0-16.2.6-24.2 2.1-5.9-40.7-39.5-60.5-41-61.4l-8.2-4.8-5.4 7.8c-6.8 10.5-11.7 22-14.6 34.2-5.5 23.2-2.2 45 9.6 63.6-14.2 7.9-37.1 9.9-41.7 10H277c-9.9 0-17.9 8-17.9 17.9-.4 33.1 5.2 66 16.5 97.1 13 34.2 32.4 59.3 57.6 74.7 28.2 17.3 74.1 27.2 126.2 27.2 23.5.1 47-2.1 70.1-6.4 32.1-5.9 63-17.1 91.4-33.2 23.4-13.6 44.5-30.8 62.4-51.1 29.9-33.9 47.8-71.7 61.1-105.2h5.3c32.8 0 53-13.1 64.1-24.1 7.4-7 13.2-15.5 16.9-25l2.3-6.9-5.7-4.3zM312 489.9h50.7c2.4 0 4.4-2 4.4-4.4v-45.1c0-2.4-2-4.4-4.4-4.5H312c-2.4 0-4.4 2-4.4 4.4v45.2c0 2.5 2 4.4 4.4 4.4m69.9 0h50.7c2.4 0 4.4-2 4.4-4.4v-45.1c0-2.4-2-4.4-4.4-4.5h-50.7c-2.5 0-4.5 2-4.5 4.5v45.1c0 2.5 2 4.4 4.5 4.4m70.8.1h50.7c2.4 0 4.4-2 4.4-4.4v-45.1c0-2.4-2-4.4-4.4-4.5h-50.7c-2.4 0-4.4 2-4.4 4.4v45.2c0 2.4 2 4.3 4.4 4.4m70.1 0h50.7c2.4 0 4.4-2 4.5-4.4v-45.1c0-2.5-2-4.5-4.5-4.5h-50.7c-2.4 0-4.4 2-4.4 4.4v45.2c0 2.4 1.9 4.4 4.4 4.4m-141-65h50.7c2.4 0 4.4-2 4.4-4.5v-45.1c0-2.4-2-4.4-4.4-4.4h-50.7c-2.5 0-4.4 2-4.5 4.4v45.1c.1 2.5 2.1 4.5 4.5 4.5m70.9 0h50.7c2.4 0 4.4-2 4.4-4.5v-45.1c0-2.4-2-4.4-4.4-4.4h-50.7c-2.4 0-4.4 2-4.4 4.4v45.1c0 2.5 2 4.5 4.4 4.5m70.1 0h50.7c2.5 0 4.4-2 4.5-4.5v-45.1c0-2.5-2-4.4-4.5-4.4h-50.7c-2.4 0-4.4 2-4.4 4.4v45.1c0 2.5 1.9 4.5 4.4 4.5m0-64.9h50.7c2.5 0 4.5-2 4.5-4.5v-45.2c0-2.4-2-4.4-4.5-4.4h-50.7c-2.4 0-4.4 2-4.4 4.4v45.2c0 2.5 1.9 4.5 4.4 4.5M593.4 490h50.7c2.4 0 4.4-2 4.4-4.4v-45.1c0-2.5-2-4.4-4.4-4.5h-50.7c-2.4 0-4.4 2-4.4 4.4v45.2c0 2.4 2 4.4 4.4 4.4" style="fill:#fff"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/public/icons/documentation.svg b/frontend/public/icons/documentation.svg
new file mode 100644
index 00000000..28242959
--- /dev/null
+++ b/frontend/public/icons/documentation.svg
@@ -0,0 +1,4 @@
+<svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.75 1H2.5C2.10218 1 1.72064 1.15804 1.43934 1.43934C1.15804 1.72064 1 2.10218 1 2.5V14.5C1 14.8978 1.15804 15.2794 1.43934 15.5607C1.72064 15.842 2.10218 16 2.5 16H11.5C11.8978 16 12.2794 15.842 12.5607 15.5607C12.842 15.2794 13 14.8978 13 14.5V6.25L7.75 1Z" stroke="#C8C8C8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.75 1V6.25H13" stroke="#C8C8C8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/public/icons/downloadIcon.svg b/frontend/public/icons/downloadIcon.svg
new file mode 100644
index 00000000..d9ed0beb
--- /dev/null
+++ b/frontend/public/icons/downloadIcon.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" fill="#212121" fill-opacity="0.02"/>
+<path d="M8.22559 16.4467L11.7788 20L15.3321 16.4467" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.7793 12.0052V20" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.6676 17.415C20.4399 16.8719 21.019 16.0968 21.321 15.2023C21.6229 14.3078 21.632 13.3403 21.3468 12.4403C21.0617 11.5402 20.4971 10.7545 19.7352 10.197C18.9732 9.6396 18.0534 9.33948 17.1092 9.34021H15.99C15.7228 8.299 15.2229 7.33196 14.5279 6.5119C13.8329 5.69184 12.961 5.04013 11.9777 4.60583C10.9944 4.17153 9.92534 3.96596 8.85109 4.00459C7.77684 4.04322 6.72535 4.32505 5.77578 4.82886C4.82621 5.33267 4.00331 6.04534 3.36902 6.9132C2.73474 7.78106 2.30559 8.78151 2.11391 9.83922C1.92222 10.8969 1.97297 11.9844 2.26236 13.0196C2.55174 14.0549 3.07221 15.011 3.78459 15.816" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/public/icons/editIcon.svg b/frontend/public/icons/editIcon.svg
new file mode 100644
index 00000000..e2eb0660
--- /dev/null
+++ b/frontend/public/icons/editIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1038 4.66848C16.3158 4.45654 16.5674 4.28843 16.8443 4.17373C17.1212 4.05903 17.418 4 17.7177 4C18.0174 4 18.3142 4.05903 18.5911 4.17373C18.868 4.28843 19.1196 4.45654 19.3315 4.66848C19.5435 4.88041 19.7116 5.13201 19.8263 5.40891C19.941 5.68582 20 5.9826 20 6.28232C20 6.58204 19.941 6.87882 19.8263 7.15573C19.7116 7.43263 19.5435 7.68423 19.3315 7.89617L8.43807 18.7896L4 20L5.21038 15.5619L16.1038 4.66848Z" stroke="#F1F1F1" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/public/icons/expandMoreIcon.svg b/frontend/public/icons/expandMoreIcon.svg
new file mode 100644
index 00000000..9bef6b01
--- /dev/null
+++ b/frontend/public/icons/expandMoreIcon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="12" transform="matrix(-1 0 0 1 24 0)" fill="#2F2F2F"/>
+<path d="M8 6L14 12L8 18" stroke="#F1F1F1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e2c7a41d..9f6c7655 100755
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -205,7 +205,7 @@ const App = (message, props) => {
 				/>
 		}
 
-		<div style={{ minHeight: 68, maxHeight: 68, }}>
+		
 			{curpath.includes("/workflows") && curpath.includes("/run") ? 
 				<div style={{ height: 60, }} />
 				:
@@ -214,6 +214,7 @@ const App = (message, props) => {
 						<LeftSideBar userdata={userdata} globalUrl={globalUrl} serverside={false} notifications={notifications} />
 					</div>
 				:
+				<div style={{ minHeight: 68, maxHeight: 68, }}>
 				<Header
 					billingInfo={{}}
 
@@ -234,8 +235,8 @@ const App = (message, props) => {
 
 					{...props}
 				/>
+			</div> 
 			}
-		</div>
 		
 				{/*
         <div style={{ height: 60 }} />
diff --git a/frontend/src/components/LeftSideBar.jsx b/frontend/src/components/LeftSideBar.jsx
index 1d0de5d5..72ec534c 100644
--- a/frontend/src/components/LeftSideBar.jsx
+++ b/frontend/src/components/LeftSideBar.jsx
@@ -795,7 +795,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
           </Button>
         </Box>
       </Box>
-      <Box sx={{ display: "flex", flexDirection: "column", width:"100%", height: "100%", overflowY: "auto", overflowX: "hidden",transition: 'display 0.3s ease' }} onMouseOver={()=>{!leftSideBarOpenByClick && setExpandLeftNav(true);}} onMouseLeave={()=>{!leftSideBarOpenByClick && setExpandLeftNav(false);setOpenAutocomplete(false);}}>
+      <Box sx={{ display: "flex", flexDirection: "column", width:"100%", height: "100%", overflowY: "auto", overflowX: "hidden",transition: 'display 0.3s ease',paddingTop: 0.5 }} onMouseOver={()=>{!leftSideBarOpenByClick && setExpandLeftNav(true);}} onMouseLeave={()=>{!leftSideBarOpenByClick && setExpandLeftNav(false);setOpenAutocomplete(false);}}>
       <Box
             sx={{
               display: "flex",
@@ -1053,9 +1053,17 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
               marginTop: 2.5,
             }}
           >
-	  		<Link to="/dashboards/security" style={hrefStyle}>
+	  		<span style={{ display: "inline-block", width: "100%" }}> 
+          <Link
+            to={userdata?.support ? "/dashboards/security" : "#"} 
+            style={{
+              ...hrefStyle,
+              pointerEvents: userdata?.support ? "auto" : "none",
+            }}
+          >
             <Button
               onClick={(event) => {
+                if (!userdata?.support) return;
                 setOpenSecurityTab(true);
                 setOpenautomateTab(false);
                 setCurrentOpenTab("security");
@@ -1063,24 +1071,43 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
               }}
               sx={{
                 ...ButtonStyle,
-                backgroundColor: ((currentOpenTab === "security" && currentPath.includes("/security")) || ((!expandLeftNav) && (currentPath.includes("detections") || currentPath.includes("response")))) ? "#2f2f2f": "transparent",
-                "&:hover": { backgroundColor: "#2f2f2f" },
+                backgroundColor:
+                  ((currentOpenTab === "security" && currentPath.includes("/security")) ||
+                  (!expandLeftNav &&
+                    (currentPath.includes("detections") || currentPath.includes("response"))))
+                    ? "#2f2f2f"
+                    : "transparent",
+                "&:hover": {
+                  backgroundColor: userdata?.support ? "#2f2f2f" : "transparent", 
+                },
+                cursor: userdata?.support ? "pointer" : "not-allowed",
               }}
+              disabled={!userdata?.support}
             >
               <ShieldOutlinedIcon
-                style={{ width: 16, height: 16, marginRight: expandLeftNav ? 10 : 0 }}
+                style={{
+                  width: 16,
+                  height: 16,
+                  marginRight: expandLeftNav ? 10 : 0,
+                  color: userdata?.support ? "inherit" : "#6F6F6F",
+                }}
               />
               <span
                 style={{
                   display: expandLeftNav ? "inline" : "none",
                   marginRight: "auto",
-                  color: currentOpenTab === "security" && currentPath.includes("/security") ? "#F1F1F1" : "#C8C8C8",
+                  color: userdata?.support
+                    ? currentOpenTab === "security" && currentPath.includes("/security")
+                      ? "#F1F1F1"
+                      : "#C8C8C8"
+                    : "#6F6F6F", 
                 }}
               >
                 Security
               </span>
             </Button>
-	  		</Link> 
+          </Link>
+        </span>
             <IconButton
               onClick={() => {
                 setOpenSecurityTab((prev) => !prev);
@@ -1106,82 +1133,126 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
             </IconButton>
           </Box>
           <Collapse in={openSecurityTab} timeout="auto" unmountOnExit>
-          <Box
-            style={{
-              maxHeight: openSecurityTab && expandLeftNav ? 100 : 0,
-              overflow: "hidden",
-              transition: "max-height 0.3s ease, opacity 0.3s ease",
-              display: "flex",
-              flexDirection: "column",
-              paddingLeft: 16,
-              gap: 4,
-              marginTop: expandLeftNav ? 16 : 0,
-            }}
-            disableRipple={expandLeftNav ? false : true}
-          >
-	  		<Link to="/detections" style={hrefStyle}>
-            <Button
-              onClick={(event) => {
-                setCurrentOpenTab("detection");
-                localStorage.setItem("lastTabOpenByUser", "detection");
-              }}
-              sx={{
-                width: "100%",
-                height: 35,
-                color: "#C8C8C8",
-                justifyContent: "flex-start",
-                textTransform: "none",
-                backgroundColor: currentOpenTab === "detection" && currentPath.includes("/detection")? "#2f2f2f": "transparent",
-                "&:hover": { backgroundColor: "#2f2f2f" },
-              }}
-              disableRipple={expandLeftNav ? false : true}
-            >
-              <span style={{position: 'relative', left: !expandLeftNav ? 10: 0, marginRight: 10, fontSize: 16 }}>•</span>
-              <span
+              <Box
                 style={{
-                  display: expandLeftNav ? "inline" : "none",
-                  opacity: expandLeftNav ? 1 : 0,
-                  transition: "opacity 0.3s ease",
-                  color:
-                    currentOpenTab === "detection" && currentPath.includes("/detection") ? "#F1F1F1" : "#C8C8C8",
+                  maxHeight: openSecurityTab && expandLeftNav ? 100 : 0,
+                  overflow: "hidden",
+                  transition: "max-height 0.3s ease, opacity 0.3s ease",
+                  display: "flex",
+                  flexDirection: "column",
+                  paddingLeft: 16,
+                  gap: 4,
+                  marginTop: expandLeftNav ? 16 : 0,
                 }}
+                disableRipple={expandLeftNav ? false : true}
               >
-                Detection
-              </span>
-            </Button>
-	  		</Link> 
-	  		<Link to="/response" style={hrefStyle}>
-            <Button
-              onClick={(event) => {
-                setCurrentOpenTab("response");
-                localStorage.setItem("lastTabOpenByUser", "response");
-              }}
-              sx={{
-                width: "100%",
-                height: 35,
-                color: "#C8C8C8",
-                justifyContent: "flex-start",
-                textTransform: "none",
-                backgroundColor: currentOpenTab === "response" && currentPath.includes("/response") ? "#2f2f2f": "transparent",
-                "&:hover": { backgroundColor: "#2f2f2f" },
-              }}
-              disableRipple={expandLeftNav ? false : true}
-            >
-              <span style={{position: 'relative', left: !expandLeftNav ? 10: 0, marginRight: 10, fontSize: 16 }}>•</span>
-              <span
-                style={{
-                  display: expandLeftNav ? "inline" : "none",
-                  opacity: expandLeftNav ? 1 : 0,
-                  transition: "opacity 0.3s ease",
-                  color: currentOpenTab === "response" && currentPath.includes("/response")? "#F1F1F1" : "#C8C8C8",
-                }}
-              >
-                Response
-              </span>
-            </Button>
-	  		</Link> 
-          </Box>
-          </Collapse>
+                <span style={{ display: "inline-block", width: "100%" }}>
+                  <Link
+                    to={userdata?.support ? "/detections" : "#"}
+                    style={{
+                      ...hrefStyle,
+                      pointerEvents: userdata?.support ? "auto" : "none",
+                    }}
+                  >
+                    <Button
+                      onClick={(event) => {
+                        if (!userdata?.support) return;
+                        setCurrentOpenTab("detection");
+                        localStorage.setItem("lastTabOpenByUser", "detection");
+                      }}
+                      sx={{
+                        width: "100%",
+                        height: 35,
+                        color: userdata?.support ? "#C8C8C8" : "#6F6F6F",
+                        justifyContent: "flex-start",
+                        textTransform: "none",
+                        backgroundColor:
+                          currentOpenTab === "detection" && currentPath.includes("/detection")
+                            ? "#2f2f2f"
+                            : "transparent",
+                        "&:hover": {
+                          backgroundColor: userdata?.support ? "#2f2f2f" : "transparent",
+                        },
+                        cursor: userdata?.support ? "pointer" : "not-allowed",
+                      }}
+                      disabled={!userdata?.support}
+                    >
+                      <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 16 }}>
+                        •
+                      </span>
+                      <span
+                        style={{
+                          display: expandLeftNav ? "inline" : "none",
+                          opacity: expandLeftNav ? 1 : 0,
+                          transition: "opacity 0.3s ease",
+                          color:
+                            userdata?.support && currentOpenTab === "detection" && currentPath.includes("/detection")
+                              ? "#F1F1F1"
+                              : userdata?.support
+                              ? "#C8C8C8"
+                              : "#6F6F6F",
+                        }}
+                      >
+                        Detection
+                      </span>
+                    </Button>
+                  </Link>
+                </span>
+                <span style={{ display: "inline-block", width: "100%" }}>
+                  <Link
+                    to={userdata?.support ? "/response" : "#"}
+                    style={{
+                      ...hrefStyle,
+                      pointerEvents: userdata?.support ? "auto" : "none",
+                    }}
+                  >
+                    <Button
+                      onClick={(event) => {
+                        if (!userdata?.support) return;
+                        setCurrentOpenTab("response");
+                        localStorage.setItem("lastTabOpenByUser", "response");
+                      }}
+                      sx={{
+                        width: "100%",
+                        height: 35,
+                        color: userdata?.support ? "#C8C8C8" : "#6F6F6F",
+                        justifyContent: "flex-start",
+                        textTransform: "none",
+                        backgroundColor:
+                          currentOpenTab === "response" && currentPath.includes("/response")
+                            ? "#2f2f2f"
+                            : "transparent",
+                        "&:hover": {
+                          backgroundColor: userdata?.support ? "#2f2f2f" : "transparent",
+                        },
+                        cursor: userdata?.support ? "pointer" : "not-allowed",
+                      }}
+                      disabled={!userdata?.support}
+                    >
+                      <span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 16 }}>
+                        •
+                      </span>
+                      <span
+                        style={{
+                          display: expandLeftNav ? "inline" : "none",
+                          opacity: expandLeftNav ? 1 : 0,
+                          transition: "opacity 0.3s ease",
+                          color:
+                            userdata?.support && currentOpenTab === "response" && currentPath.includes("/response")
+                              ? "#F1F1F1"
+                              : userdata?.support
+                              ? "#C8C8C8"
+                              : "#6F6F6F",
+                        }}
+                      >
+                        Response
+                      </span>
+                    </Button>
+                  </Link>
+                </span>
+              </Box>
+            </Collapse>
+
 
 	  	  <Link to="/docs" style={hrefStyle}>
           <Button
@@ -1280,6 +1351,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                 style={{
                   display: "flex",
                   alignItems: "center",
+                  minWidth: "250px",
                   justifyContent:
                     option.id === "add_suborg" ? "center" : "flex-start",
                   backgroundColor:
@@ -1308,7 +1380,9 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                     setOpenAutocomplete(false);
                 }}
               >
-                    <span
+                    {
+                      isCloud ? (
+                        <span
                       style={{
                         color: "#bbb",
                         fontSize: "16px",
@@ -1316,7 +1390,8 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
                       }}
                     >
                       {option.region_url}
-                    </span>
+                    </span>) : null
+                    }
                     <img
                       src={option.image ? option.image : "/images/no_image.png"}
                       alt={option.name}
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index a88e4deb..0b713135 100755
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -9025,7 +9025,7 @@ const releaseToConnectLabel = "Release to Connect"
       });
   };
 
-  const parsedHeight = isMobile ? bodyHeight - appBarSize * 4 : userdata?.support ? bodyHeight - 80 : bodyHeight - appBarSize - 50 
+  const parsedHeight = isMobile ? bodyHeight - appBarSize * 4 :  bodyHeight - 65; 
   const appViewStyle = {
     marginLeft: 5,
     marginRight: 5,
@@ -9365,7 +9365,6 @@ const releaseToConnectLabel = "Release to Connect"
             minHeight: parsedHeight,
             maxHeight: parsedHeight,
             overflow: "hidden",
-            paddingTop: userdata?.support ? 10 : 0,
           }}
         >
           {thisview}
@@ -11081,9 +11080,9 @@ const releaseToConnectLabel = "Release to Connect"
   const minSize = 370
   var rightsidebarStyle = {
     position: "fixed",
-    top: userdata?.support ? appBarSize - 35 : appBarSize + 25,
+    top: appBarSize - 35,
     right: 25,
-    height: userdata?.support ? "90vh": "80vh",
+    height:  "90vh",
     width: isMobile ? "100%" : minSize,
     minWidth: minSize,
     maxWidth: 600,
@@ -15993,30 +15992,26 @@ const releaseToConnectLabel = "Release to Connect"
   const bottomBarStyle = {
     position: "fixed",
     transition: "all 0.3s ease",
-    minWidth: userdata?.support && windowWidth < 1600 && leftSideBarOpenByClick ? 800 : cytoscapeViewWidths,
-    maxWidth: userdata?.support && windowWidth < 1600 && leftSideBarOpenByClick ? 800 : cytoscapeViewWidths,
+    minWidth: windowWidth < 1600 && leftSideBarOpenByClick ? 800 : cytoscapeViewWidths,
+    maxWidth: windowWidth < 1600 && leftSideBarOpenByClick ? 800 : cytoscapeViewWidths,
     marginLeft: 20,
     marginBottom: 30,
     zIndex: 10,
     transform: isMobile 
         ? `translateX(20px)`
-        : `translateX(${userdata?.support 
-            ? leftSideBarOpenByClick ? 340 : 330 
-            : leftBarSize}px)`,
+        : `translateX(${leftSideBarOpenByClick ? 340 : 330}px)`,
     top: isMobile ? appBarSize + 55 : undefined, 
     bottom: isMobile ? undefined : 0,
 };
 
   const topBarStyle = {
     position: "fixed",
-    top: isMobile ? 30 : userdata?.support ? appBarSize - 20 : appBarSize + 20,
+    top: isMobile ? 30 :  appBarSize - 20,
     pointerEvents: "none",
     transition: "transform 0.3s ease",
     transform: isMobile
         ? `translateX(20px)`
-        : userdata?.support
-        ? `translateX(${leftSideBarOpenByClick ? 340 : 330}px)`
-        : `translateX(${leftBarSize + 20}px)`,
+        : `translateX(${leftSideBarOpenByClick ? 340 : 330}px)`
 };
 
 
@@ -16767,7 +16762,7 @@ const releaseToConnectLabel = "Release to Connect"
 			border: "1px solid rgba(255,255,255,0.1)",
   			position: "absolute",
   			bottom: 140,
-  			left: userdata?.support ? leftSideBarOpenByClick ? 620 : 435 : leftBarSize + 20,
+  			left: leftSideBarOpenByClick ? 620 : 435,
 			color: "white",
 			padding: 10, 
 			borderRadius: theme.palette?.borderRadius,
@@ -20354,7 +20349,7 @@ const releaseToConnectLabel = "Release to Connect"
   );
 
   const newView = (
-    <div style={{ color: "white", marginLeft: userdata?.support ? leftSideBarOpenByClick ? 280 : 100 : 0, transition: "margin-left 0.3s ease", }}>
+    <div style={{ color: "white", marginLeft:   leftSideBarOpenByClick ? 280 : 100, transition: "margin-left 0.3s ease", }}>
       <div
         style={{ display: "flex", borderTop: "1px solid rgba(91, 96, 100, 1)" }}
       >
@@ -20391,7 +20386,7 @@ const releaseToConnectLabel = "Release to Connect"
               wheelSensitivity={0.25}
               style={{
                 width: cytoscapeWidth,
-                height: userdata?.support ? bodyHeight - 20 : bodyHeight - appBarSize - 5,
+                height: bodyHeight - 20,
                 backgroundColor: theme.palette.surfaceColor,
               }}
               stylesheet={cystyle}
diff --git a/frontend/src/views/Docs.jsx b/frontend/src/views/Docs.jsx
index 8062408f..39a89d95 100755
--- a/frontend/src/views/Docs.jsx
+++ b/frontend/src/views/Docs.jsx
@@ -1294,11 +1294,11 @@ const DocsWrapper = memo(({userdata, children })=>{
     return (
         <div style={{
             minHeight: 1000, zIndex: 1, 
-            maxWidth: Math.min(!userdata?.support ? 1920 : leftSideBarOpenByClick ? windowWidth - 300 : windowWidth - 200, 1920), 
-            minWidth: isMobile ? null : userdata?.support ? leftSideBarOpenByClick ? 800 : 900 : null, margin: "auto", 
-            position: userdata?.support && leftSideBarOpenByClick ? "relative" : "static", 
-            left: userdata?.support && leftSideBarOpenByClick ? 120 : userdata?.support && !leftSideBarOpenByClick ? 80 : 0, 
-            marginLeft: windowWidth < 1920 ? leftSideBarOpenByClick && userdata?.support ? 160 : userdata?.support && !leftSideBarOpenByClick ? 80 : 0 : "auto", width: "100%", 
+            maxWidth: Math.min(leftSideBarOpenByClick ? windowWidth - 300 : windowWidth - 200, 1920), 
+            minWidth: isMobile ? null : leftSideBarOpenByClick ? 800 : 900, margin: "auto", 
+            position: leftSideBarOpenByClick ? "relative" : "static", 
+            left: leftSideBarOpenByClick ? 120 :  !leftSideBarOpenByClick ? 80 : 0, 
+            marginLeft: windowWidth < 1920 ? leftSideBarOpenByClick ? 160 : !leftSideBarOpenByClick ? 80 : 0 : "auto", width: "100%", 
             transition: "left 0.3s ease-in-out, min-width 0.3s ease-in-out, max-width 0.3s ease-in-out, position 0.3s ease-in-out, margin 0.3s ease-in-out, margin-left 0.3s ease"
             }}>
             {children}
diff --git a/frontend/src/views/Search.jsx b/frontend/src/views/Search.jsx
index 9ebd79db..5bcf01bc 100644
--- a/frontend/src/views/Search.jsx
+++ b/frontend/src/views/Search.jsx
@@ -130,7 +130,7 @@ const Search = (props) => {
     flexDirection: "column",
     overflowX: "hidden",
     minHeight: 400,
-    paddingLeft: leftSideBarOpenByClick ? 250 : 0,
+    paddingLeft: leftSideBarOpenByClick ? 270 : 80,
     transition: "padding-left 0.3s ease",
   };
 
diff --git a/frontend/src/views/Usecases2.jsx b/frontend/src/views/Usecases2.jsx
index 696e7573..5312e505 100644
--- a/frontend/src/views/Usecases2.jsx
+++ b/frontend/src/views/Usecases2.jsx
@@ -1220,7 +1220,7 @@ const Usecases2 = (props) => {
     ) : null
 
   const data = 
-    <div className="content" style={{width: isMobile ? "100%": 1000, margin: "auto", paddingBottom: 200, textAlign: "center", paddingLeft: leftSideBarOpenByClick ? 200 : 0, transition: "padding-left 0.3s ease"}}>
+    <div className="content" style={{width: isMobile ? "100%": leftSideBarOpenByClick ? 1200: 1000, margin: "auto", paddingBottom: 200, textAlign: "center", paddingLeft: leftSideBarOpenByClick ? 200 : 0, transition: "padding-left 0.3s ease, width 0.3s ease"}}>
 
 			<UsecaseListComponent 
 	  			userdata={userdata}