From 30edcacce500a01e2e9e35537b7936f50431e22b Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Thu, 24 Jul 2025 10:01:08 +0100
Subject: [PATCH] feat(ui): reduce opacity of sidebar pane content when not
 editing

---
 pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css | 6 +++++-
 pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
index 67f7fdfd0..c70ce0508 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css
@@ -10,6 +10,10 @@ div.sidebar-section {
   }
 
   & > div.content {
-    @apply w-full h-full px-1.5 py-3 rounded-md bg-inv-4;
+    @apply w-full h-full px-1.5 py-3 rounded-md bg-inv-4 opacity-60;
+  }
+
+  &.editing > div.content {
+    @apply opacity-100;
   }
 }
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx
index 29d26a330..3e438905a 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx
@@ -3,6 +3,7 @@ import "./SidebarSection.css";
 import { Typography } from "@/src/components/Typography/Typography";
 import { Button as KButton } from "@kobalte/core/button";
 import Icon from "../Icon/Icon";
+import cx from "classnames";
 
 export interface SidebarSectionProps {
   title: string;
@@ -20,7 +21,7 @@ export const SidebarSection = (props: SidebarSectionProps) => {
   };
 
   return (
-    <div class="sidebar-section">
+    <div class={cx("sidebar-section", { editing: editing() })}>
       <div class="header">
         <Typography
           hierarchy="label"