From 3cc8d8d08a682894d640d9a8b334da2f9d9fd939 Mon Sep 17 00:00:00 2001
From: ehconitin <nitinkoche03@gmail.com>
Date: Tue, 12 Nov 2024 18:28:05 +0530
Subject: [PATCH] WIP

---
 .../settings/security/SettingsSecurity.tsx    | 71 +++++++++++++++++--
 1 file changed, 65 insertions(+), 6 deletions(-)

diff --git a/packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx b/packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx
index 3e61db0915ac..47b297563cbf 100644
--- a/packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx
+++ b/packages/twenty-front/src/pages/settings/security/SettingsSecurity.tsx
@@ -1,14 +1,54 @@
-import { H2Title, Section, IconLock, Tag } from 'twenty-ui';
+import styled from '@emotion/styled';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useRecoilValue } from 'recoil';
+import {
+  H2Title,
+  IconLock,
+  IconTool,
+  MAIN_COLORS,
+  Section,
+  Tag,
+} from 'twenty-ui';
 
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
+import { useExpandedHeightAnimation } from '@/settings/hooks/useExpandedHeightAnimation';
 import { SettingsSSOIdentitiesProvidersListCard } from '@/settings/security/components/SettingsSSOIdentitiesProvidersListCard';
 import { SettingsSecurityOptionsList } from '@/settings/security/components/SettingsSecurityOptionsList';
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
+
+const StyledIconContainer = styled.div`
+  border-right: 1px solid ${MAIN_COLORS.yellow};
+  display: flex;
+  left: ${({ theme }) => theme.spacing(-6)};
+  position: absolute;
+  height: 100%;
+`;
+
+const StyledIconTool = styled(IconTool)`
+  margin-right: ${({ theme }) => theme.spacing(0.5)};
+`;
+
+const StyledAdvancedContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  position: relative;
+  width: 100%;
+`;
+
+const StyledContainer = styled.div`
+  width: 100%;
+`;
 
 export const SettingsSecurity = () => {
+  const isAdvancedModeEnabled = useRecoilValue(isAdvancedModeEnabledState);
+  const { contentRef, motionAnimationVariants } = useExpandedHeightAnimation(
+    isAdvancedModeEnabled,
+  );
+
   return (
     <SubMenuTopBarContainer
       title="Security"
@@ -38,11 +78,30 @@ export const SettingsSecurity = () => {
           <SettingsSSOIdentitiesProvidersListCard />
         </Section>
         <Section>
-          <H2Title
-            title="Other"
-            description="Customize your workspace security"
-          />
-          <SettingsSecurityOptionsList />
+          <AnimatePresence>
+            {isAdvancedModeEnabled && (
+              <motion.div
+                ref={contentRef}
+                initial="initial"
+                animate="animate"
+                exit="exit"
+                variants={motionAnimationVariants}
+              >
+                <StyledAdvancedContainer>
+                  <StyledIconContainer>
+                    <StyledIconTool size={12} color={MAIN_COLORS.yellow} />
+                  </StyledIconContainer>
+                  <StyledContainer>
+                    <H2Title
+                      title="Other"
+                      description="Customize your workspace security"
+                    />
+                    <SettingsSecurityOptionsList />
+                  </StyledContainer>
+                </StyledAdvancedContainer>
+              </motion.div>
+            )}
+          </AnimatePresence>
         </Section>
       </SettingsPageContainer>
     </SubMenuTopBarContainer>