From acb7f105f71ad523e11af4e7c3cf21d4175ec8bb Mon Sep 17 00:00:00 2001
From: nathan hsieh <hsieh.nathan@gmail.com>
Date: Mon, 26 Aug 2024 18:41:42 -0700
Subject: [PATCH] remove console logs, move styles

---
 static/app/components/sidebar/index.tsx       |  3 --
 .../components/sidebar/sidebarAccordion.tsx   |  7 +---
 static/app/components/sidebar/sidebarItem.tsx | 40 ++++++++-----------
 3 files changed, 18 insertions(+), 32 deletions(-)

diff --git a/static/app/components/sidebar/index.tsx b/static/app/components/sidebar/index.tsx
index 3fb3edbb4ef7e9..9f34ef212c7506 100644
--- a/static/app/components/sidebar/index.tsx
+++ b/static/app/components/sidebar/index.tsx
@@ -613,9 +613,6 @@ function Sidebar() {
 
   // Sidebar accordion includes a secondary list of nav items
   // TODO: replace with a secondary panel
-  // Bugs:
-  // - on click highlights the card... but deselect doesn't un-highlight
-  //
   const explore = (
     <SidebarAccordion
       {...sidebarItemProps}
diff --git a/static/app/components/sidebar/sidebarAccordion.tsx b/static/app/components/sidebar/sidebarAccordion.tsx
index bfb639ecf84fd0..32053d6c5d14bc 100644
--- a/static/app/components/sidebar/sidebarAccordion.tsx
+++ b/static/app/components/sidebar/sidebarAccordion.tsx
@@ -90,7 +90,6 @@ function SidebarAccordion({
     if ((!horizontal && !sidebarCollapsed) || !children) {
       setExpandedItemId(null);
       if (!hasMainLink) {
-        console.log('SETTING EXPANDED TO NULL');
         setExpanded(!expanded);
       }
       return;
@@ -98,10 +97,8 @@ function SidebarAccordion({
 
     e.preventDefault();
     if (isOpenInFloatingSidebar) {
-      console.log('SETTING EXPANDED TO NULL');
       setExpandedItemId(null);
     } else {
-      console.log('SETTING EXPANDED TO: ', mainItemId);
       setExpandedItemId(mainItemId);
     }
   };
@@ -118,10 +115,7 @@ function SidebarAccordion({
 
   let isMainItemActive = isActive && !hasActiveChildren;
   if (shouldAccordionFloat) {
-    console.log('ACCORDION SHOULD FLOAT');
-    console.log('IS ACTIVE: ', isActive);
     isMainItemActive = isActive || hasActiveChildren;
-    console.log('IS MAIN ITEM ACTIVE: ', isMainItemActive);
   }
 
   return (
@@ -173,6 +167,7 @@ function SidebarAccordion({
             isMainItem
           />
           {childrenWithProps}
+          <div>IS OPEN AND HORIZONTAL OR COLLAPSED</div>
         </StyledOverlay>
       )}
     </SidebarAccordionWrapper>
diff --git a/static/app/components/sidebar/sidebarItem.tsx b/static/app/components/sidebar/sidebarItem.tsx
index 9c8cd0ea1f2527..933b4f197fb34a 100644
--- a/static/app/components/sidebar/sidebarItem.tsx
+++ b/static/app/components/sidebar/sidebarItem.tsx
@@ -164,9 +164,6 @@ function SidebarItem({
   const isInCollapsedState = (!isInFloatingAccordion && collapsed) || hasNewNav;
 
   const isActive = defined(active) ? active : isActiveRouter;
-  if (isActive) {
-    console.log('SIDEBAR ITEM IS ACTIVE: ', id);
-  }
   const isTop = orientation === 'top' && !isInFloatingAccordion;
   const placement = isTop ? 'bottom' : 'right';
 
@@ -375,9 +372,6 @@ const getActiveStyle = ({
   `;
 };
 
-// height: ${16 * 2 + 40}px;
-// width: 70px;
-
 const StyledSidebarItem = styled(Link, {
   shouldForwardProp: p => typeof p === 'string' && isPropValid(p),
 })`
@@ -386,31 +380,31 @@ const StyledSidebarItem = styled(Link, {
   position: relative;
   cursor: pointer;
   font-size: 15px;
-  height: ${p => (p.isInFloatingAccordion ? '35px' : '30px')};
+  height: ${p =>
+    p.isInFloatingAccordion ? '35px' : p.hasNewNav ? `${16 * 2 + 40}px` : '30px'};
+  width: ${p => (p.isInFloatingAccordion ? '100%' : p.hasNewNav ? '70px' : 'auto')};
   flex-shrink: 0;
   border-radius: ${p => p.theme.borderRadius};
   transition: none;
   ${p => {
-    if (!p.hasNewNav) {
+    if (p.hasNewNav && !p.isInFloatingAccordion) {
       return css`
-        &:before {
-          display: block;
-          content: '';
-          position: absolute;
-          top: 4px;
-          left: calc(-${space(2)} - 1px);
-          bottom: 6px;
-          width: 5px;
-          border-radius: 0 3px 3px 0;
-          background-color: transparent;
-          transition: 0.15s background-color linear;
-        }
+        align-self: center;
       `;
     }
     return css`
-      width: 70px;
-      height: ${16 * 2 + 40}px;
-      align-self: center;
+      &:before {
+        display: block;
+        content: '';
+        position: absolute;
+        top: 4px;
+        left: calc(-${space(2)} - 1px);
+        bottom: 6px;
+        width: 5px;
+        border-radius: 0 3px 3px 0;
+        background-color: transparent;
+        transition: 0.15s background-color linear;
+      }
     `;
   }}