layout redesign for the modals

components/Navbar.tsx

@@ -22,6 +22,7 @@ import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Sidebar from "@/components/Sidebar";
 import { useRouter } from "next/router";
 import Search from "@/components/Search";
+import UserSettings from "./Modal/UserSettings";
 
 export default function () {
   const { data: session } = useSession();
@@ -31,6 +32,7 @@ export default function () {
   const user = session?.user;
 
   const [linkModal, setLinkModal] = useState(false);
+  const [settingsModal, setSettingsModal] = useState(false);
   const [sidebar, setSidebar] = useState(false);
 
   const router = useRouter();
@@ -49,6 +51,10 @@ export default function () {
     setLinkModal(!linkModal);
   };
 
+  const toggleSettingsModal = () => {
+    setSettingsModal(!settingsModal);
+  };
+
   return (
     <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-sky-100 border-b">
       <div
@@ -67,12 +73,6 @@ export default function () {
           <FontAwesomeIcon icon={faPlus} className="w-6 h-6" />
         </div>
 
-        {linkModal ? (
-          <Modal toggleModal={toggleLinkModal}>
-            <AddLink toggleLinkModal={toggleLinkModal} />
-          </Modal>
-        ) : null}
-
         <div className="relative">
           <div
             className="flex gap-2 items-center p-1 w-fit bg-white text-gray-600 cursor-pointer border border-sky-100 hover:border-sky-500 rounded-md duration-100"
@@ -96,6 +96,10 @@ export default function () {
                 {
                   name: "Settings",
                   icon: <FontAwesomeIcon icon={faSliders} />,
+                  onClick: () => {
+                    toggleSettingsModal();
+                    setProfileDropdown(!profileDropdown);
+                  },
                 },
                 {
                   name: "Logout",
@@ -114,6 +118,18 @@ export default function () {
             />
           ) : null}
 
+          {linkModal ? (
+            <Modal toggleModal={toggleLinkModal}>
+              <AddLink toggleLinkModal={toggleLinkModal} />
+            </Modal>
+          ) : null}
+
+          {settingsModal ? (
+            <Modal toggleModal={toggleSettingsModal}>
+              <UserSettings toggleSettingsModal={toggleSettingsModal} />
+            </Modal>
+          ) : null}
+
           {sidebar ? (
             <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
               <ClickAwayHandler onClickOutside={toggleSidebar}>