From 1f1846226808862ef784fdbf631d03ee20c360c6 Mon Sep 17 00:00:00 2001
From: adityagarg06 <adityagarg2003@gmail.com>
Date: Tue, 22 Aug 2023 20:28:56 +0530
Subject: [PATCH 1/2] Partially added styled component to Sidebar

---
 client/modules/IDE/components/Sidebar.jsx | 77 +++++++++++++++++++----
 1 file changed, 65 insertions(+), 12 deletions(-)

diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index b28a2fba4d..3c9b21f7ef 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -2,6 +2,7 @@ import React, { useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
+import styled, { css } from 'styled-components';
 import {
   closeProjectOptions,
   newFile,
@@ -11,11 +12,63 @@ import {
 } from '../actions/ide';
 import { selectRootFile } from '../selectors/files';
 import { getAuthenticated, selectCanEditSketch } from '../selectors/users';
-
+import { remSize } from '../../../theme';
 import ConnectedFileNode from './FileNode';
 
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 
+const SidebarHeader = styled.header`
+  padding-right: ${remSize(6)};
+  padding-left: ${remSize(19)};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: ${remSize(29)};
+  min-height: ${remSize(29)};
+  position: relative;
+`;
+
+const SidebarTitle = styled.h3`
+  font-size: ${remSize(12)};
+  display: ${(props) => (props.isExpanded ? 'inline-block' : 'none')};
+  white-space: nowrap;
+  overflow: hidden;
+`;
+
+const SidebarIcons = styled.div`
+  display: flex;
+  align-items: center;
+  height: 100%;
+  ${(props) =>
+    props.cantEdit &&
+    css`
+      display: none;
+    `}
+`;
+
+const SidebarAddButton = styled.button`
+  width: ${remSize(20)};
+  height: ${remSize(20)};
+  & svg {
+    width: ${remSize(10)};
+  }
+  ${(props) =>
+    !props.isExpanded &&
+    css`
+      display: none;
+    `}
+`;
+
+const SidebarProjectOptions = styled.ul`
+  display: none;
+  width: 100%;
+  max-width: ${remSize(180)};
+  ${(props) =>
+    props.open &&
+    css`
+      display: flex;
+    `}
+`;
 // TODO: use a generic Dropdown UI component
 
 export default function SideBar() {
@@ -66,23 +119,23 @@ export default function SideBar() {
 
   return (
     <section className={sidebarClass}>
-      <header className="sidebar__header" onContextMenu={toggleProjectOptions}>
-        <h3 className="sidebar__title">
+      <SidebarHeader onContextMenu={toggleProjectOptions}>
+        <SidebarTitle isExpanded={isExpanded}>
           <span>{t('Sidebar.Title')}</span>
-        </h3>
-        <div className="sidebar__icons">
-          <button
+        </SidebarTitle>
+        <SidebarIcons cantEdit={!canEditProject}>
+          <SidebarAddButton
             aria-label={t('Sidebar.ToggleARIA')}
-            className="sidebar__add"
             tabIndex="0"
             ref={sidebarOptionsRef}
             onClick={toggleProjectOptions}
             onBlur={onBlurComponent}
             onFocus={onFocusComponent}
+            isExpanded={isExpanded}
           >
             <DownArrowIcon focusable="false" aria-hidden="true" />
-          </button>
-          <ul className="sidebar__project-options">
+          </SidebarAddButton>
+          <SidebarProjectOptions open={projectOptionsVisible}>
             <li>
               <button
                 aria-label={t('Sidebar.AddFolderARIA')}
@@ -124,9 +177,9 @@ export default function SideBar() {
                 </button>
               </li>
             )}
-          </ul>
-        </div>
-      </header>
+          </SidebarProjectOptions>
+        </SidebarIcons>
+      </SidebarHeader>
       <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
     </section>
   );

From ec95f63d44ffcc4d2b319908220b230e1989d780 Mon Sep 17 00:00:00 2001
From: adityagarg06 <adityagarg2003@gmail.com>
Date: Thu, 7 Sep 2023 16:51:18 +0530
Subject: [PATCH 2/2] Changed conditional rendering of styled components

---
 client/modules/IDE/components/Sidebar.jsx | 138 ++++++++++------------
 client/styles/components/_sidebar.scss    |   6 -
 2 files changed, 65 insertions(+), 79 deletions(-)

diff --git a/client/modules/IDE/components/Sidebar.jsx b/client/modules/IDE/components/Sidebar.jsx
index 3c9b21f7ef..a576729db2 100644
--- a/client/modules/IDE/components/Sidebar.jsx
+++ b/client/modules/IDE/components/Sidebar.jsx
@@ -2,7 +2,7 @@ import React, { useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import {
   closeProjectOptions,
   newFile,
@@ -30,7 +30,7 @@ const SidebarHeader = styled.header`
 
 const SidebarTitle = styled.h3`
   font-size: ${remSize(12)};
-  display: ${(props) => (props.isExpanded ? 'inline-block' : 'none')};
+  display: inline-block;
   white-space: nowrap;
   overflow: hidden;
 `;
@@ -39,11 +39,6 @@ const SidebarIcons = styled.div`
   display: flex;
   align-items: center;
   height: 100%;
-  ${(props) =>
-    props.cantEdit &&
-    css`
-      display: none;
-    `}
 `;
 
 const SidebarAddButton = styled.button`
@@ -52,22 +47,12 @@ const SidebarAddButton = styled.button`
   & svg {
     width: ${remSize(10)};
   }
-  ${(props) =>
-    !props.isExpanded &&
-    css`
-      display: none;
-    `}
 `;
 
 const SidebarProjectOptions = styled.ul`
-  display: none;
+  display: flex;
   width: 100%;
   max-width: ${remSize(180)};
-  ${(props) =>
-    props.open &&
-    css`
-      display: flex;
-    `}
 `;
 // TODO: use a generic Dropdown UI component
 
@@ -120,65 +105,72 @@ export default function SideBar() {
   return (
     <section className={sidebarClass}>
       <SidebarHeader onContextMenu={toggleProjectOptions}>
-        <SidebarTitle isExpanded={isExpanded}>
-          <span>{t('Sidebar.Title')}</span>
-        </SidebarTitle>
-        <SidebarIcons cantEdit={!canEditProject}>
-          <SidebarAddButton
-            aria-label={t('Sidebar.ToggleARIA')}
-            tabIndex="0"
-            ref={sidebarOptionsRef}
-            onClick={toggleProjectOptions}
-            onBlur={onBlurComponent}
-            onFocus={onFocusComponent}
-            isExpanded={isExpanded}
-          >
-            <DownArrowIcon focusable="false" aria-hidden="true" />
-          </SidebarAddButton>
-          <SidebarProjectOptions open={projectOptionsVisible}>
-            <li>
-              <button
-                aria-label={t('Sidebar.AddFolderARIA')}
-                onClick={() => {
-                  dispatch(newFolder(rootFile.id));
-                  setTimeout(() => dispatch(closeProjectOptions()), 0);
-                }}
+        {isExpanded && (
+          <SidebarTitle>
+            <span>{t('Sidebar.Title')}</span>
+          </SidebarTitle>
+        )}
+        {canEditProject && (
+          <SidebarIcons>
+            {isExpanded && (
+              <SidebarAddButton
+                aria-label={t('Sidebar.ToggleARIA')}
+                tabIndex="0"
+                ref={sidebarOptionsRef}
+                onClick={toggleProjectOptions}
                 onBlur={onBlurComponent}
                 onFocus={onFocusComponent}
               >
-                {t('Sidebar.AddFolder')}
-              </button>
-            </li>
-            <li>
-              <button
-                aria-label={t('Sidebar.AddFileARIA')}
-                onClick={() => {
-                  dispatch(newFile(rootFile.id));
-                  setTimeout(() => dispatch(closeProjectOptions()), 0);
-                }}
-                onBlur={onBlurComponent}
-                onFocus={onFocusComponent}
-              >
-                {t('Sidebar.AddFile')}
-              </button>
-            </li>
-            {isAuthenticated && (
-              <li>
-                <button
-                  aria-label={t('Sidebar.UploadFileARIA')}
-                  onClick={() => {
-                    dispatch(openUploadFileModal(rootFile.id));
-                    setTimeout(() => dispatch(closeProjectOptions()), 0);
-                  }}
-                  onBlur={onBlurComponent}
-                  onFocus={onFocusComponent}
-                >
-                  {t('Sidebar.UploadFile')}
-                </button>
-              </li>
+                <DownArrowIcon focusable="false" aria-hidden="true" />
+              </SidebarAddButton>
+            )}
+            {projectOptionsVisible && (
+              <SidebarProjectOptions className="sidebar__project-options">
+                <li>
+                  <button
+                    aria-label={t('Sidebar.AddFolderARIA')}
+                    onClick={() => {
+                      dispatch(newFolder(rootFile.id));
+                      setTimeout(() => dispatch(closeProjectOptions()), 0);
+                    }}
+                    onBlur={onBlurComponent}
+                    onFocus={onFocusComponent}
+                  >
+                    {t('Sidebar.AddFolder')}
+                  </button>
+                </li>
+                <li>
+                  <button
+                    aria-label={t('Sidebar.AddFileARIA')}
+                    onClick={() => {
+                      dispatch(newFile(rootFile.id));
+                      setTimeout(() => dispatch(closeProjectOptions()), 0);
+                    }}
+                    onBlur={onBlurComponent}
+                    onFocus={onFocusComponent}
+                  >
+                    {t('Sidebar.AddFile')}
+                  </button>
+                </li>
+                {isAuthenticated && (
+                  <li>
+                    <button
+                      aria-label={t('Sidebar.UploadFileARIA')}
+                      onClick={() => {
+                        dispatch(openUploadFileModal(rootFile.id));
+                        setTimeout(() => dispatch(closeProjectOptions()), 0);
+                      }}
+                      onBlur={onBlurComponent}
+                      onFocus={onFocusComponent}
+                    >
+                      {t('Sidebar.UploadFile')}
+                    </button>
+                  </li>
+                )}
+              </SidebarProjectOptions>
             )}
-          </SidebarProjectOptions>
-        </SidebarIcons>
+          </SidebarIcons>
+        )}
       </SidebarHeader>
       <ConnectedFileNode id={rootFile.id} canEdit={canEditProject} />
     </section>
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index e49d13a6aa..4f02420d6f 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -303,10 +303,4 @@
 
 .sidebar__project-options {
   @extend %dropdown-open-right;
-  display: none;
-  width: 100%;
-  max-width: #{180 / $base-font-size}rem;
-  .sidebar--project-options & {
-    display: flex;
-  }
 }