Repository: GCTC-NTGC/gc-digital-talent
Pull request #13625: [Debt] Migrate `Sidebar` to tailwind
Author: login: esizer
Created: 2025-05-28T14:55:32Z | Merged: 2025-05-29T18:08:18Z

🤖 Resolves #13572 

## 👋 Introduction

Migrates the `Sidebar` component to use tailwindcss.

## 🕵️ Details

Noticed a dark mode issue with `ToggleSection` and fixed in since it is semi-related :sweat_smile: 

## 🧪 Testing

1. No significant chromatic diff.


Linked issue #13572: ♻️ Migrate Sidebar component
### ♻️ Debt/Refactor

Tailwind component migration: Sidebar

### 🕵️ Details

https://www.chromatic.com/component?appId=61e099a1bb1465003a73d3ce&csfId=ui-src-components-chip--default&buildNumber=11271&k=681e2f8a6d230dad10de2891-dark-interactive-true&h=12&b=-10

### ✅ Acceptance Criteria

- [ ] Sidebar component migrated to Tailwind styling
- [ ] No significant visual or functional changes
- [ ] light and dark mode
- [ ] GCDT and IAP theme
- [ ] No Axe check fails
- [ ] Storybook includes Figma design embedded

### 🛑 Blocking Issues

Blocked by #13549
Linked issue comments: user: login: github-actions[bot]
created_at: 2025-05-23T13:07:16Z
body: # Status: Ready to merge :heavy_check_mark:
### Issues blocking this PR: 
- #13549 :heavy_check_mark:
----
This comment was automatically written by the [Blocking Issues](https://github.com/Levi-Lesches/blocking-issues) bot, and this PR will be monitored for further progress.
author_association: NONE

Diff:
diff --git a/packages/ui/src/components/Sidebar/Content.tsx b/packages/ui/src/components/Sidebar/Content.tsx
index 2491a6fb3b9..f0f18cffea9 100644
--- a/packages/ui/src/components/Sidebar/Content.tsx
+++ b/packages/ui/src/components/Sidebar/Content.tsx
@@ -1,8 +1,8 @@
 import { ReactNode } from "react";
 
 const Content = ({ children, ...rest }: { children?: ReactNode }) => (
-  <div data-h2-flex-item="base(1of1) l-tablet(3of4)" {...rest}>
-    <div>{children}</div>
+  <div className="col-span-3" {...rest}>
+    {children}
   </div>
 );
 
diff --git a/packages/ui/src/components/Sidebar/Sidebar.tsx b/packages/ui/src/components/Sidebar/Sidebar.tsx
index 4bb0c6259e7..8426f357c56 100644
--- a/packages/ui/src/components/Sidebar/Sidebar.tsx
+++ b/packages/ui/src/components/Sidebar/Sidebar.tsx
@@ -1,34 +1,29 @@
 import { HTMLProps, ReactNode } from "react";
+import { tv, VariantProps } from "tailwind-variants";
 
-export interface SidebarProps extends HTMLProps<HTMLElement> {
+const scrollbarWrapper = tv({
+  base: "sticky overflow-auto",
+  variants: {
+    // Temp fix for view pool candidate page
+    scrollbar: {
+      true: "top-0 h-[calc(100vh-var(--spacing)*18)] pt-18 sm:top-18",
+      false: "top-30",
+    },
+  },
+});
+
+type ScrollbarVariants = VariantProps<typeof scrollbarWrapper>;
+
+export interface SidebarProps
+  extends ScrollbarVariants,
+    HTMLProps<HTMLElement> {
   children: ReactNode;
-  scrollbar?: boolean; // Temp fix for view pool candidate page
 }
 
 const Sidebar = ({ children, scrollbar, ...rest }: SidebarProps) => (
-  <aside data-h2-flex-item="base(1of1) l-tablet(1of4)" {...rest}>
-    <div
-      data-h2-height="base(100%)"
-      data-h2-position="base(relative)"
-      data-h2-margin-bottom="base(x1)"
-    >
-      <div
-        data-h2-position="base(sticky)"
-        data-h2-overflow="base(auto)"
-        {...(scrollbar
-          ? {
-              "data-h2-location":
-                "base(0, auto, auto, auto) l-tablet(x3, auto, auto, auto)",
-              "data-h2-height": "l-tablet(calc(100vh - x3))",
-              "data-h2-padding-top": "base(x3)",
-            }
-          : {
-              "data-h2-location": "base(x5, auto, auto, auto)",
-              "data-h2-height": "base(auto)",
-            })}
-      >
-        {children}
-      </div>
+  <aside {...rest}>
+    <div className="relative mb-6 h-full">
+      <div className={scrollbarWrapper({ scrollbar })}>{children}</div>
     </div>
   </aside>
 );
diff --git a/packages/ui/src/components/Sidebar/Wrapper.tsx b/packages/ui/src/components/Sidebar/Wrapper.tsx
index b52ef82458a..97127e7f4f9 100644
--- a/packages/ui/src/components/Sidebar/Wrapper.tsx
+++ b/packages/ui/src/components/Sidebar/Wrapper.tsx
@@ -1,14 +1,15 @@
 import { HTMLProps } from "react";
+import { tv } from "tailwind-variants";
 
 type WrapperProps = HTMLProps<HTMLDivElement>;
 
-const Wrapper = ({ children, ...rest }: WrapperProps) => (
-  <div data-h2-padding="base(0, 0, x3, 0)" {...rest}>
-    <div data-h2-wrapper="base(center, full, 0)">
-      <div data-h2-flex-grid="base(flex-start, x2, 0) l-tablet(stretch, x3)">
-        {children}
-      </div>
-    </div>
+const wrapper = tv({
+  base: "mb-18 flex flex-col gap-y-6 sm:grid sm:grid-cols-4 sm:gap-x-18 sm:gap-y-0",
+});
+
+const Wrapper = ({ children, className, ...rest }: WrapperProps) => (
+  <div className={wrapper({ class: className })} {...rest}>
+    {children}
   </div>
 );
 
diff --git a/packages/ui/src/components/ToggleSection/ToggleSection.tsx b/packages/ui/src/components/ToggleSection/ToggleSection.tsx
index d7742e3dece..6db989ae7f8 100644
--- a/packages/ui/src/components/ToggleSection/ToggleSection.tsx
+++ b/packages/ui/src/components/ToggleSection/ToggleSection.tsx
@@ -122,7 +122,7 @@ const Content = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
       <div
         id={context?.contentId}
         ref={forwardedRef}
-        className="rounded-md bg-white p-6 text-black shadow-lg"
+        className="rounded-md bg-white p-6 text-black shadow-lg dark:bg-gray-600 dark:text-white"
         {...props}
       >
         {children}


Reviews:
user: login: bella77-69
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-29T16:41:51Z
user: login: esizer
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-29T16:56:59Z
user: login: bella77-69
body: LGTM! 😎 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-29T17:58:58Z

Review comments:
diff_hunk: @@ -1,14 +1,15 @@
 import { HTMLProps } from "react";
+import { tv } from "tailwind-variants";
 
 type WrapperProps = HTMLProps<HTMLDivElement>;
 
-const Wrapper = ({ children, ...rest }: WrapperProps) => (
-  <div data-h2-padding="base(0, 0, x3, 0)" {...rest}>
-    <div data-h2-wrapper="base(center, full, 0)">
-      <div data-h2-flex-grid="base(flex-start, x2, 0) l-tablet(stretch, x3)">
-        {children}
-      </div>
-    </div>
+const wrapper = tv({
path: packages/ui/src/components/Sidebar/Wrapper.tsx
user: login: bella77-69
body: I think removing the grid on smaller breakpoints. You could try using flex: base: "mb-18 flex flex-col gap-y-6 sm:grid sm:grid-cols-4 sm:gap-x-18 sm:gap-y-0",
created_at: 2025-05-29T16:41:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -1,14 +1,15 @@
 import { HTMLProps } from "react";
+import { tv } from "tailwind-variants";
 
 type WrapperProps = HTMLProps<HTMLDivElement>;
 
-const Wrapper = ({ children, ...rest }: WrapperProps) => (
-  <div data-h2-padding="base(0, 0, x3, 0)" {...rest}>
-    <div data-h2-wrapper="base(center, full, 0)">
-      <div data-h2-flex-grid="base(flex-start, x2, 0) l-tablet(stretch, x3)">
-        {children}
-      </div>
-    </div>
+const wrapper = tv({
path: packages/ui/src/components/Sidebar/Wrapper.tsx
user: login: esizer
body: Mobile styles should be fixed after [adjust mobile styles](https://github.com/GCTC-NTGC/gc-digital-talent/pull/13625/commits/03734d5283cc7b4428b944848242d23c1ad301bc)
created_at: 2025-05-29T16:56:59Z
author_association: MEMBER

PR comments:
user: login: bella77-69
created_at: 2025-05-29T16:50:07Z
body: Looks good Eric 😊, I did notice a few things. 

![image](https://github.com/user-attachments/assets/0fc97d4b-fdeb-491e-8a2f-9812c45fe755)

![image](https://github.com/user-attachments/assets/c40651a8-0743-4d91-856d-abf3fd6310f9)



https://github.com/user-attachments/assets/f7003d37-1697-47f7-aad3-750670b8335a


author_association: CONTRIBUTOR
user: login: esizer
created_at: 2025-05-29T17:46:22Z
body: > Looks good Eric 😊, I did notice a few things.

I took a look and this is just an oddity for that page :cry: It is our oldest page on the site and has fallen into disrepair and has all the issues you noticed on main said :sob: 
author_association: MEMBER