fix(ui): sidebar css fixes (#7843)

Author: avivkeller

packages/ui-components/Containers/Sidebar/SidebarGroup/index.tsx

@@ -11,20 +11,25 @@ type SidebarGroupProps = {
   items: Array<Omit<ComponentProps<typeof SidebarItem>, 'as' | 'pathname'>>;
   as?: LinkLike;
   pathname?: string;
+  className: string;
   showProgressionIcons?: boolean;
 };
 
 const SidebarGroup: FC<SidebarGroupProps> = ({
   groupName,
   items,
   showProgressionIcons,
+  className,
   ...props
 }) => (
   <section
-    className={classNames({
-      [styles.group]: true,
-      [styles.progression]: showProgressionIcons,
-    })}
+    className={classNames(
+      {
+        [styles.group]: true,
+        [styles.progression]: showProgressionIcons,
+      },
+      className
+    )}
   >
     <label className={styles.groupName}>{groupName}</label>
     <ul className={styles.itemList}>

packages/ui-components/Containers/Sidebar/index.module.css

@@ -17,12 +17,12 @@
     dark:border-neutral-900
     dark:bg-neutral-950;
 
-  > section {
+  .navigation {
     @apply hidden
       sm:flex;
   }
 
-  > span {
+  .mobileSelect {
     @apply flex
       w-full
       sm:hidden;

packages/ui-components/Containers/Sidebar/index.tsx

@@ -45,6 +45,7 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
           values={selectItems}
           defaultValue={currentItem?.value}
           onChange={onSelect}
+          className={styles.mobileSelect}
         />
       )}
 
@@ -56,6 +57,7 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
           pathname={pathname}
           as={as}
           showProgressionIcons={showProgressionIcons}
+          className={styles.navigation}
         />
       ))}
     </aside>