initially created ManageBucket

src/components/Directory/ManageBucket1.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const ManageBucket1 = ({ closeModal }) => {
+  return (
+    <div className="container">
+      <div className="text-center">
+        <h5 className="fw-semibold">Manage Bucket</h5>
+      </div>
+      <div className="text-start p-0"></div>
+    </div>
+  );
+};
+
+export default ManageBucket1;

src/pages/Directory/DirectoryPage.jsx

@@ -11,6 +11,7 @@ import { useFab } from "../../Context/FabContext";
 import { useBucketList, useBuckets } from "../../hooks/useDirectory";
 import GlobalModel from "../../components/common/GlobalModel";
 import ManageBucket from "../../components/Directory/ManageBucket";
+import ManageBucket1 from "../../components/Directory/ManageBucket1";
 
 const NotesPage = lazy(() => import("./NotesPage"));
 const ContactsPage = lazy(() => import("./ContactsPage"));
@@ -77,9 +78,8 @@ export default function DirectoryPage({ IsPage = true }) {
               { label: "Directory", link: null },
             ]}
           ></Breadcrumb>
-
           <div className="card">
-            <div className="nav-align-top mb-1">
+            <div className="d-flex justify-content-between align-items-center mb-1 px-2">
               <ul className="nav nav-tabs">
                 <li className="nav-item cursor-pointer">
                   <a
@@ -89,7 +89,7 @@ export default function DirectoryPage({ IsPage = true }) {
                     onClick={(e) => handleTabClick("notes", e)}
                   >
                     <i className="bx bx-note bx-sm me-1_5"></i>
-                    <span className="d-none d-md-inline ">Notes</span>
+                    <span className="d-none d-md-inline">Notes</span>
                   </a>
                 </li>
                 <li className="nav-item cursor-pointer">
@@ -104,10 +104,30 @@ export default function DirectoryPage({ IsPage = true }) {
                   </a>
                 </li>
               </ul>
+
+              <div className="btn-group">
+                <button
+                  className="btn btn-sm btn-secondary dropdown-toggle"
+                  type="button"
+                  data-bs-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false"
+                >
+                  <i className="bx bx-download"></i> Export
+                </button>
+                <ul className="dropdown-menu dropdown-menu-end">
+                  <li>
+                    <a className="dropdown-item">Action</a>
+                  </li>
+                  <li>
+                    <a className="dropdown-item">Another action</a>
+                  </li>
+                </ul>
+              </div>
             </div>
 
-            <div className="mb-1">
+            <div className="mb-1 px-2">
-              <div className="d-flex align-items-center justify-content-between px-2">
+              <div className="d-flex align-items-center justify-content-between">
                 <div>
                   {activeTab === "notes" && (
                     <input
@@ -133,29 +153,10 @@ export default function DirectoryPage({ IsPage = true }) {
                     </div>
                   )}
                 </div>
-
-                <div className="btn-group">
-                  <button
-                    className="btn btn-sm btn-secondary dropdown-toggle"
-                    type="button"
-                    data-bs-toggle="dropdown"
-                    aria-haspopup="true"
-                    aria-expanded="false"
-                  >
-                    <i className="bx bx-download"></i> Export
-                  </button>
-                  <ul className="dropdown-menu">
-                    <li>
-                      <a className="dropdown-item">Action</a>
-                    </li>
-                    <li>
-                      <a className="dropdown-item">Another action</a>
-                    </li>
-                  </ul>
-                </div>
               </div>
             </div>
           </div>
+
           <div>
             <Suspense
               fallback={
@@ -177,7 +178,7 @@ export default function DirectoryPage({ IsPage = true }) {
               isOpen={isOpenBucket}
               closeModal={() => setOpenBucket(false)}
             >
-              <ManageBucket closeModal={() => setOpenBucket(false)} />
+              <ManageBucket1 closeModal={() => setOpenBucket(false)} />
             </GlobalModel>
           )}
         </div>