diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/ChattingHeader.tsx b/app/frontend/src/components/Sidebar/Contents/Chatting/ChattingHeader.tsx
index 2173c9084..2125c8f7a 100644
--- a/app/frontend/src/components/Sidebar/Contents/Chatting/ChattingHeader.tsx
+++ b/app/frontend/src/components/Sidebar/Contents/Chatting/ChattingHeader.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
import { ResponseParticipant } from '@morak/apitype';
import { ReactComponent as People } from '@/assets/icons/people.svg';
@@ -12,24 +14,34 @@ type ChattingHeaderProps = {
};
export function ChattingHeader({ title, participants }: ChattingHeaderProps) {
+ const [participantsShown, setParticipantsShown] = useState(false);
+
return (
-
{title}
-
+
{title}
+
+
);
}
diff --git a/app/frontend/src/components/Sidebar/Contents/Chatting/index.css.ts b/app/frontend/src/components/Sidebar/Contents/Chatting/index.css.ts
index fbeaf47fa..fb49a6093 100644
--- a/app/frontend/src/components/Sidebar/Contents/Chatting/index.css.ts
+++ b/app/frontend/src/components/Sidebar/Contents/Chatting/index.css.ts
@@ -33,7 +33,7 @@ export const header = style({
justifyContent: 'space-between',
alignItems: 'center',
gap: '1.6rem',
- padding: '2.4rem 1.6rem',
+ padding: '1.6rem',
background: vars.color.grayscale50,
});
@@ -50,6 +50,8 @@ export const notParticipated = style([
},
]);
+const shown = style({});
+
export const participants = style([
sansRegular16,
{
@@ -57,20 +59,29 @@ export const participants = style([
alignItems: 'center',
gap: '0.4rem',
height: '100%',
+ padding: '0.8rem',
position: 'relative',
+ selectors: {
+ [` ${shown}&`]: {
+ background: vars.color.grayscale100,
+ borderRadius: '0.8rem',
+ },
+ },
},
]);
export const popover = style({
display: 'none',
- top: '3rem',
+ top: '4rem',
selectors: {
- [`${participants}:hover &, ${participants}:active &`]: {
+ [`${participants}:hover &, ${participants}:active &, ${shown}&`]: {
display: 'flex',
},
},
});
+export { shown };
+
export const submitButton = style({
height: '4.8rem',
});