filled menu icons when active

layouts/LayoutDefault.tsx

@@ -196,9 +196,10 @@ function NavLinkChat() {
   const { data: conversations } = useQuery(
     trpc.chat.conversations.fetchAll.queryOptions()
   );
-  const selectedConversationId = useStore(
-    (state) => state.selectedConversationId
-  );
+  // const selectedConversationId = useStore(
+  //   (state) => state.selectedConversationId
+  // );
+  const selectedConversationId = urlPathname.split("/chat/")[1];
 
   async function handleDeleteConversation(conversationIdToDelete: string) {
     await deleteConversation.mutateAsync(
@@ -268,11 +269,19 @@ function NavLinkChat() {
           className="hover-container"
           leftSection={
             <>
-              <IconCircle size={16} stroke={1.5} className="show-by-default" />
+              <IconCircle
+                size={16}
+                stroke={1.5}
+                className={`show-by-default ${
+                  selectedConversationId === conversation.id ? "none" : ""
+                }`}
+              />
               <IconCircleFilled
                 size={16}
                 stroke={1.5}
-                className="show-on-hover"
+                className={`show-on-hover ${
+                  selectedConversationId === conversation.id ? "block" : ""
+                }`}
               />
             </>
           }

layouts/hover.css

@@ -18,3 +18,10 @@
   border: 1px solid var(--mantine-color-gray-9);
   border-radius: var(--mantine-radius-sm);
 }
+
+.hover-container .block {
+  display: block;
+}
+.hover-container .none {
+  display: none;
+}