fix: update alignment styles in NavigationDrawerHeader

- Adjusted `align-items` in `StyledContainer` to conditionally set to 'center' or 'flex-start' based on the `isExpanded` state. - Modified `align-self` in `StyledRightActions` to change between 'auto' and 'flex-end' depending on the `isExpanded` state, improving layout responsiveness.
feat: add styled container for workspace dropdown in navigation drawer header
2026-03-03 03:40:28 +05:30 · 2026-03-03 03:36:22 +05:30
1 changed files with 12 additions and 2 deletions
@@ -12,7 +12,7 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
 import { NavigationDrawerCollapseButton } from './NavigationDrawerCollapseButton';

 const StyledContainer = styled.div<{ isExpanded: boolean }>`
-  align-items: center;
+  align-items: ${({ isExpanded }) => (isExpanded ? 'center' : 'flex-start')};
  display: flex;
  flex-direction: ${({ isExpanded }) => (isExpanded ? 'row' : 'column')};
  gap: ${({ theme, isExpanded }) => (isExpanded ? 0 : theme.spacing(4))};
@@ -24,6 +24,7 @@ const StyledContainer = styled.div<{ isExpanded: boolean }>`

 const StyledRightActions = styled.div<{ isExpanded: boolean }>`
  align-items: center;
+  align-self: ${({ isExpanded }) => (isExpanded ? 'auto' : 'flex-end')};
  display: flex;
  flex-direction: ${({ isExpanded }) => (isExpanded ? 'row' : 'column')};
  gap: ${({ theme, isExpanded }) => (isExpanded ? 0 : theme.spacing(1))};
@@ -39,6 +40,13 @@ const StyledNavigationDrawerCollapseButton = styled(
  width: ${({ theme }) => theme.spacing(6)};
 `;

+const StyledWorkspaceDropdownContainer = styled.div`
+  min-height: ${({ theme }) => theme.spacing(8)};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 type NavigationDrawerHeaderProps = {
  showCollapseButton: boolean;
 };
@@ -54,7 +62,9 @@ export const NavigationDrawerHeader = ({

  return (
    <StyledContainer isExpanded={isNavigationDrawerExpanded}>
-      <MultiWorkspaceDropdownButton />
+      <StyledWorkspaceDropdownContainer>
+        <MultiWorkspaceDropdownButton />
+      </StyledWorkspaceDropdownContainer>
      {!isMobile && (
        <StyledRightActions isExpanded={isNavigationDrawerExpanded}>
          <LightIconButton