From c676f3edbe172174806a79bd2d237e0384171b9b Mon Sep 17 00:00:00 2001
From: Saurabh Daware <saurabh.daware@razorpay.com>
Date: Thu, 9 Jan 2025 15:44:33 +0530
Subject: [PATCH] fix(SideNav): empty padding in banner (#2463)

* fix(SideNav): empty padding in banner

* fix: remove comment

* Create hot-snails-dress.md

* fix: add makeSpace and makeBorderSize
---
 .changeset/hot-snails-dress.md                |  5 +++
 .../src/components/SideNav/SideNav.web.tsx    | 33 +++++++++++--------
 2 files changed, 24 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/hot-snails-dress.md

diff --git a/.changeset/hot-snails-dress.md b/.changeset/hot-snails-dress.md
new file mode 100644
index 00000000000..209e991964f
--- /dev/null
+++ b/.changeset/hot-snails-dress.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(SideNav): empty padding in banner when banner component returns null
diff --git a/packages/blade/src/components/SideNav/SideNav.web.tsx b/packages/blade/src/components/SideNav/SideNav.web.tsx
index 297ca1c5e41..05ef9d233d3 100644
--- a/packages/blade/src/components/SideNav/SideNav.web.tsx
+++ b/packages/blade/src/components/SideNav/SideNav.web.tsx
@@ -13,7 +13,7 @@ import {
   SIDE_NAV_EXPANDED_L1_WIDTH_XL,
 } from './tokens';
 import BaseBox from '~components/Box/BaseBox';
-import { makeMotionTime, makeSize, makeSpace } from '~utils';
+import { makeBorderSize, makeMotionTime, makeSize, makeSpace } from '~utils';
 import { Drawer, DrawerBody, DrawerHeader } from '~components/Drawer';
 import { SkipNavContent, SkipNavLink } from '~components/SkipNav/SkipNav';
 import { useIsMobile } from '~utils/useIsMobile';
@@ -21,6 +21,7 @@ import { getStyledProps } from '~components/Box/styledProps';
 import { metaAttribute, MetaConstants } from '~utils/metaAttribute';
 import type { BladeElementRef } from '~utils/types';
 import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
+import { size as sizeTokens } from '~tokens/global';
 
 const {
   COLLAPSED,
@@ -93,6 +94,22 @@ const getL1MenuClassName = ({
   return '';
 };
 
+const BannerContainer = styled(BaseBox)((props) => {
+  return {
+    '&:not(:empty)': {
+      borderBottom: makeBorderSize(props.theme.border.width.thin),
+      borderBottomStyle: 'solid',
+      borderBottomColor: props.theme.colors.surface.border.gray.muted,
+      borderRight: makeBorderSize(props.theme.border.width.thin),
+      borderRightStyle: 'solid',
+      borderRightColor: props.theme.colors.surface.border.gray.muted,
+      padding: makeSpace(props.theme.spacing[3]),
+      maxHeight: makeSize(sizeTokens['100']),
+      width: '100%',
+    },
+  };
+});
+
 /**
  * ### SideNav component
  *
@@ -253,19 +270,7 @@ const _SideNav = (
           {...getStyledProps(rest)}
           {...makeAnalyticsAttribute(rest)}
         >
-          {banner ? (
-            <BaseBox
-              borderBottom="thin"
-              borderBottomColor="surface.border.gray.muted"
-              borderRight="thin"
-              borderRightColor="surface.border.gray.muted"
-              padding="spacing.3"
-              maxHeight="100px"
-              width="100%"
-            >
-              {banner}
-            </BaseBox>
-          ) : null}
+          {banner ? <BannerContainer>{banner}</BannerContainer> : null}
           <BaseBox position="relative" display="block" flex="1" width="100%">
             <BaseBox
               position="absolute"