From ae1c84187c8d0dad00044b0404b2ceb7a93bb3a6 Mon Sep 17 00:00:00 2001
From: RodrigoEC <rodrigo.cavalcanti@ccc.ufcg.edu.br>
Date: Thu, 10 Oct 2024 16:52:32 -0300
Subject: [PATCH] Feat: Adds scrolling and finishes grouping visus

---
 src/app/globalStyles.tsx                    |  4 +-
 src/components/MapsMenu/MapsMenu.styles.tsx | 69 +++++++++++++++------
 src/components/MapsMenu/MapsMenu.tsx        | 15 +++--
 src/components/VisuItem/VisuItem.styles.tsx |  2 -
 4 files changed, 61 insertions(+), 29 deletions(-)

diff --git a/src/app/globalStyles.tsx b/src/app/globalStyles.tsx
index 181f5a5..bedcf0e 100644
--- a/src/app/globalStyles.tsx
+++ b/src/app/globalStyles.tsx
@@ -17,13 +17,13 @@ export const GlobalStyles = createGlobalStyle`
 
     ::-webkit-scrollbar {
       height: 0.5rem;
-      width: 0.5rem;
+      width: 0.25rem;
       padding: 10px;
     }
     
     ::-webkit-scrollbar-thumb {
       background: ${({ theme }) => theme.colors.green}75;
-      scroll-padding: 1rem;
+      scroll-padding: 0.2rem;
       background-clip: padding-box;
     }
 
diff --git a/src/components/MapsMenu/MapsMenu.styles.tsx b/src/components/MapsMenu/MapsMenu.styles.tsx
index b81e7c5..fa82342 100644
--- a/src/components/MapsMenu/MapsMenu.styles.tsx
+++ b/src/components/MapsMenu/MapsMenu.styles.tsx
@@ -7,22 +7,17 @@ export const ContentWrapper = styled.div`
   align-items: center;
 `;
 
-export const Title = styled.h3`
-  font-weight: bold;
-  font-size: 1.1rem;
-
-  &::before,
-  &::after {
-    content: " - ";
-  }
-`;
-
 export const Form = styled.form`
   display: flex;
   flex-flow: column;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 1.5rem 0 1rem 0;
+  box-sizing: border-box;
+  width: 20rem;
+  height: 100vh;
+  padding-right: 0.3rem;
+
+  max-height: 24rem;
+  overflow-y: scroll;
+  overflow-x: hidden;
 `;
 
 export const ItemWrapper = styled.div`
@@ -31,6 +26,10 @@ export const ItemWrapper = styled.div`
   align-items: center;
 `;
 
+export const InfoContainer = styled.div`
+  margin-right: 0.45rem;
+`;
+
 export const QuestionMarkImg = styled(Icon)`
   max-width: 1rem;
   height: fit-content;
@@ -74,14 +73,40 @@ export const SubSectionWrapper = styled.div`
   flex-flow: column;
   gap: 0.5rem;
   width: 100%;
-  padding: 1rem 0;
+  transition: 100ms;
+  margin-top: 0;
+`;
+
+export const IconWrapper = styled(Icon)`
+  color: ${({ theme }) => theme.colors.black};
+  transition: 100ms linear;
 `;
 
 export const FieldDetails = styled.details`
+  box-sizing: border-box;
   display: flex;
   gap: 0.5rem;
   width: 100%;
   padding: 0.5rem 0;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.green}40;
+  color: ${({ theme }) => theme.colors.green};
+
+  &:not([open]) ${IconWrapper} {
+    transform: rotate(45deg);
+  }
+
+  &[open] ${SubSectionWrapper} {
+    margin-top: 1rem;
+  }
+
+  &:not([open]) ${SubSectionWrapper} {
+    margin-top: 0rem;
+  }
+`;
+
+export const Title = styled.h3`
+  font-weight: bold;
+  transition: 300ms;
 `;
 
 export const Summary = styled.summary`
@@ -91,13 +116,17 @@ export const Summary = styled.summary`
   width: 100%;
   font-weight: bold;
   cursor: pointer;
-  color: ${({ theme }) => theme.colors["dark-gray"]};
-`;
+  border-radius: 4px;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  margin-left: 1px;
+  transition: 300ms;
 
-export const IconWrapper = styled(Icon)`
-  color: ${({ theme }) => theme.colors.black};
+  &:hover {
+    background: #cdcdcd20;
+  }
 
-  &.spin {
-    animation: spin 1.5s linear infinite;
+  &:hover ${Title}, &:hover ${IconWrapper} {
+    color: ${({ theme }) => theme.colors.green};
   }
 `;
diff --git a/src/components/MapsMenu/MapsMenu.tsx b/src/components/MapsMenu/MapsMenu.tsx
index 83d7176..e32e8d0 100644
--- a/src/components/MapsMenu/MapsMenu.tsx
+++ b/src/components/MapsMenu/MapsMenu.tsx
@@ -15,6 +15,8 @@ import {
   FieldDetails,
   Summary,
   IconWrapper,
+  InfoContainer,
+  Title,
 } from "./MapsMenu.styles";
 
 const MapsMenu = ({
@@ -38,6 +40,7 @@ const MapsMenu = ({
   const [mapTypes, setMapTypes] = useState<{ [key: string]: IFormItem[] }>({});
   const [currentImagedata, setcurrentImageData] = useState<IImageData>({});
   const [currentName, setCurrentName] = useState<string>("");
+  const [currentCategory, setCurrentCategory] = useState<string>("");
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -65,6 +68,7 @@ const MapsMenu = ({
         if (item.id === newValue) {
           setCurrentName(item.id);
           setcurrentImageData(item.imageData);
+          currentCategory === "" && setCurrentCategory(item.type);
         }
 
         return {
@@ -92,6 +96,7 @@ const MapsMenu = ({
 
   useEffect(() => {
     onItemChange(initialValues.name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialValues]);
 
   return (
@@ -108,10 +113,10 @@ const MapsMenu = ({
             {Object.keys(mapTypes)
               .sort((a, b) => b.localeCompare(a))
               .map((type) => (
-                <FieldDetails key={type}>
+                <FieldDetails key={type} open={currentCategory === type}>
                   <Summary>
-                    <h4>{type}</h4>
-                    <IconWrapper id="close" size={16} stroke-width={3} />
+                    <Title>{type}</Title>
+                    <IconWrapper id="close" size={16} stroke-width={2} />
                   </Summary>
                   <SubSectionWrapper>
                     {mapTypes[type]
@@ -127,7 +132,7 @@ const MapsMenu = ({
                               onClick={onQuestionSelect}
                               onChange={onItemChange}
                             />
-                            <div
+                            <InfoContainer
                               onClick={() => onQuestionSelect(item.id)}
                               title={`Sobre ${item.name}`}
                             >
@@ -136,7 +141,7 @@ const MapsMenu = ({
                                 height={20}
                                 width={20}
                               />
-                            </div>
+                            </InfoContainer>
                           </ItemWrapper>
                         );
                       })}
diff --git a/src/components/VisuItem/VisuItem.styles.tsx b/src/components/VisuItem/VisuItem.styles.tsx
index 9e56026..ad1ce80 100644
--- a/src/components/VisuItem/VisuItem.styles.tsx
+++ b/src/components/VisuItem/VisuItem.styles.tsx
@@ -14,8 +14,6 @@ export const ItemWrapper = styled.div`
   gap: 0.5rem;
   width: 100%;
   padding: 0.5rem 1rem 0.5rem 0.5rem;
-  background-color: ${({ theme }) => theme.colors.white};
-  box-shadow: 0px 0px 2px #e0e0e0;
   border-radius: 4px;
 `;