feat(repo-explorer): added branches dropdown auto-close

Author: niyazm524

src/features/repo-explorer/components/branches-menu/index.tsx

@@ -7,13 +7,14 @@ import "./index.scss";
 type Props = {
     repo: RepoIdentity;
     branches?: Array<BranchIdentity>;
+    onVisibleChange?: (flag: boolean) => void;
 };
 
-const BranchesMenu = ({ repo, branches }: Props) => {
+const BranchesMenu = ({ repo, branches, onVisibleChange }: Props) => {
     return (
-        <Menu className="branches-menu" onClick={() => {}}>
+        <Menu className="branches-menu">
             {branches?.map((branch, index) => (
-                <Menu.Item key={index}>
+                <Menu.Item key={index} onClick={() => onVisibleChange?.(false)}>
                     <Link to={`/${repo.owner}/${repo.name}/tree/${branch.name}`}>
                         {branch.name}
                     </Link>

src/features/repo-explorer/components/toolbar/index.tsx

@@ -1,5 +1,5 @@
 import { Button, Dropdown, Popover } from "antd";
-import React from "react";
+import React, { useState } from "react";
 import { RepoIdentity, BranchIdentity } from "models";
 import BranchesMenu from "../branches-menu";
 import CloneMenu from "./clone-menu";
@@ -12,12 +12,21 @@ type Props = {
 };
 
 const RepoToolbar = ({ repo, branches, activeBranch }: Props) => {
+    const [isBranchDropdownVisible, setBranchDropdownVisible] = useState(false);
     return (
         <div className="flex justify-between">
             <Dropdown
-                overlay={<BranchesMenu branches={branches} repo={repo} />}
+                overlay={
+                    <BranchesMenu
+                        branches={branches}
+                        repo={repo}
+                        onVisibleChange={setBranchDropdownVisible}
+                    />
+                }
                 placement="bottomLeft"
                 arrow
+                visible={isBranchDropdownVisible}
+                onVisibleChange={setBranchDropdownVisible}
                 trigger={["click"]}
             >
                 <Button className="branch-dropdown">{activeBranch}</Button>