From 01d66fcf9e5137576c3c76d1c2f60b3c5a662d4d Mon Sep 17 00:00:00 2001
From: Goodnews Sandy <54219127+sandygudie@users.noreply.github.com>
Date: Sun, 24 Dec 2023 09:06:56 +0100
Subject: [PATCH 1/3] updated project empty state

---
 src/components/Board/ActiveBoard.tsx | 15 ++++-----------
 src/components/Board/AddTask.tsx     |  2 +-
 src/components/Board/index.tsx       | 11 ++++++++---
 src/components/Header.tsx            |  4 ++--
 src/components/Popup.tsx             |  8 ++++----
 src/utilis/index.ts                  |  4 ++--
 6 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/components/Board/ActiveBoard.tsx b/src/components/Board/ActiveBoard.tsx
index 5967f0f..57b25fe 100644
--- a/src/components/Board/ActiveBoard.tsx
+++ b/src/components/Board/ActiveBoard.tsx
@@ -19,10 +19,8 @@ import { FcCheckmark } from "react-icons/fc";
 import IconButton from "components/IconButton";
 import { IoCloseOutline } from "react-icons/io5";
 
-interface Props {
-  showSidebar: boolean;
-}
-export default function ActiveBoard({ showSidebar }: Props) {
+
+export default function ActiveBoard() {
   const dispatch = useDispatch();
   const [isAddTask, setAddTask] = useState(false);
   const [isOpenPopup, setOpenPopup] = useState(false);
@@ -86,12 +84,7 @@ export default function ActiveBoard({ showSidebar }: Props) {
     <>
       <DragDropContext onDragEnd={onDragEnd}>
         <div className="h-[90vh]">
-          <div
-            style={{
-              marginLeft: showSidebar ? "clamp(260px, 10vw, 500px)" : "0px",
-            }}
-            className={`z-10 relative h-auto py-4 mb-8 pr-8 pl-8`}
-          >
+         
             <div className="mt-3 z-10 h-full flex gap-x-10 w-full">
               {active.columns?.map((item: IColumn, index: number) => {
                 return (
@@ -243,7 +236,7 @@ export default function ActiveBoard({ showSidebar }: Props) {
               </div>
             </div>
           </div>
-        </div>
+     
       </DragDropContext>
 
       <Modal
diff --git a/src/components/Board/AddTask.tsx b/src/components/Board/AddTask.tsx
index e62ac5f..ef0ab56 100644
--- a/src/components/Board/AddTask.tsx
+++ b/src/components/Board/AddTask.tsx
@@ -181,7 +181,7 @@ export default function AddTask({ handleClose, activeColumn, tasks }: Props) {
                   )}
                 />
               </div>
-              <div className="relative flex items-center my-8 gap-x-8 justify-between ">
+              <div className="relative flex items-center my-6 gap-x-8 justify-between ">
                <div className="w-1/2">
                <TextInput
                   label="Deadline"
diff --git a/src/components/Board/index.tsx b/src/components/Board/index.tsx
index 98705dc..4d63dc4 100644
--- a/src/components/Board/index.tsx
+++ b/src/components/Board/index.tsx
@@ -18,9 +18,14 @@ export default function Index({ showSidebar }: Props) {
 
   return (
     <div className="w-auto h-full">
-      <>
+      <div
+            style={{
+              marginLeft: showSidebar ? "clamp(260px, 10vw, 500px)" : "0px",
+            }}
+            className={`z-10 relative h-auto py-4 mb-8 pr-8 pl-8`}
+          >
         {active ? (
-          <ActiveBoard showSidebar={showSidebar} />
+          <ActiveBoard  />
         ) : (
           <div className=" fixed -translate-y-[50%] -translate-x-[50%] top-1/2 shadow-lg p-4 md:p-8 bg-primary/20 rounded-lg left-[50%] text-center">
             <div className="w-64 md:w-72 mx-auto h-auto">
@@ -55,7 +60,7 @@ export default function Index({ showSidebar }: Props) {
             </button>
           </div>
         )}
-      </>
+      </div>
       <Modal open={isOpenBoard} handleClose={() => setOpenBoard(false)}>
         <AddBoard handleClose={() => setOpenBoard(false)} />
       </Modal>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ec27924..127afe0 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -63,10 +63,10 @@ export default function Header() {
             {isWorkspaceMenu && (
               <Popup
                 description={
-                  <div className="flex gap-x-8 items-center border-b-[1px] border-gray/30 py-4 dark:text-white text-gray font-medium px-6 justify-center ">
+                  <div className="flex gap-x-6 items-center border-b-[1px] border-gray/30 py-4 dark:text-white text-gray font-medium px-8 justify-center ">
                     <img
                       src="./workspace-placeholder.webp"
-                      className="w-10 h-10"
+                      className="w-8 h-8"
                       alt=""
                     />
                     <div>
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index d832360..0c10592 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -32,7 +32,7 @@ function Popup({ items, style, handleOpenMenu, description }: Props) {
       } absolute rounded-md  shadow-3xl dark:shadow-gray/20 shadow-gray/30 
       dark:bg-[#20212c] bg-offwhite text-white w-fit right-0 top-6 `}
     >
-      <div className="w-max">
+      <div className={`${description?"w-auto":"w-max"}`}>
         {description ? description : null}
         <div className="">
           {items.map((list, i) => {
@@ -40,9 +40,9 @@ function Popup({ items, style, handleOpenMenu, description }: Props) {
               <button
                 key={i}
                 onClick={list.handler}
-                className={`dark:text-white text-gray block w-full text-left hover:text-primary font-semiBold text-[0.95rem] ${
-                  description ? "py-3 text-[0.9rem] hover:bg-primary hover:text-white" : "py-2 text-[0.75rem]"
-                } px-6 
+                className={`dark:text-white text-gray block w-full text-left  hover:text-primary font-semiBold text-[0.95rem] ${
+                  description ? "py-3 text-[0.9rem] hover:bg-primary hover:text-white" : "dark:hover:text-primary py-2 text-[0.72rem]"
+                } px-4
                ${i < items.length - 1 && `border-b-[1px] border-gray/20`}`}
               >
                 {list.title}
diff --git a/src/utilis/index.ts b/src/utilis/index.ts
index 3779eb6..c66d3f8 100644
--- a/src/utilis/index.ts
+++ b/src/utilis/index.ts
@@ -9,7 +9,7 @@ export const loadState = () => {
   };
 
   try {
-    const serializedState = localStorage.getItem("boarddata");
+    const serializedState = localStorage.getItem("kanban");
     if (serializedState === null) {
       return initialState;
     }
@@ -22,7 +22,7 @@ export const loadState = () => {
 export const saveState = (state: any) => {
   try {
     const serializesState = JSON.stringify(state);
-    localStorage.setItem("boarddata", serializesState);
+    localStorage.setItem("kanban", serializesState);
   } catch (err) {
     return err;
   }

From 0591244fb551bb66df5901672d54462f59ebc295 Mon Sep 17 00:00:00 2001
From: Goodnews Sandy <54219127+sandygudie@users.noreply.github.com>
Date: Sun, 24 Dec 2023 11:06:11 +0100
Subject: [PATCH 2/3] fixed modal

---
 src/components/Board/index.tsx | 12 +++++----
 src/components/Header.tsx      | 12 +++++----
 src/components/Modal.tsx       |  5 ++--
 src/components/Popup.tsx       |  2 +-
 src/page/dashboard/index.tsx   | 48 ++++++++++++++++++----------------
 5 files changed, 42 insertions(+), 37 deletions(-)

diff --git a/src/components/Board/index.tsx b/src/components/Board/index.tsx
index 4d63dc4..9526c4a 100644
--- a/src/components/Board/index.tsx
+++ b/src/components/Board/index.tsx
@@ -17,23 +17,24 @@ export default function Index({ showSidebar }: Props) {
   const { active } = data;
 
   return (
-    <div className="w-auto h-full">
+    <div className="w-auto h-auto ">
       <div
             style={{
               marginLeft: showSidebar ? "clamp(260px, 10vw, 500px)" : "0px",
             }}
-            className={`z-10 relative h-auto py-4 mb-8 pr-8 pl-8`}
+            className={`relative h-full pt-8 pb-28 mb-8 pr-8 pl-8`}
           >
         {active ? (
           <ActiveBoard  />
         ) : (
-          <div className=" fixed -translate-y-[50%] -translate-x-[50%] top-1/2 shadow-lg p-4 md:p-8 bg-primary/20 rounded-lg left-[50%] text-center">
-            <div className="w-64 md:w-72 mx-auto h-auto">
+          <div className=" h-full flex flex-col items-center justify-center">
+          <div className="shadow-lg p-4 md:p-8 bg-primary/20 rounded-lg w-64 md:w-96 mx-auto text-center">
+            <div className="w-52 md:w-72 mx-auto h-auto">
               <img
                 src="/empty-project.png"
                 alt="start project"
                 loading="eager"
-                className="w-64 md:w-72 mx-auto h-auto"
+                className="w-52 md:w-72 mx-auto h-auto"
               />
             </div>
             <div className="">
@@ -59,6 +60,7 @@ export default function Index({ showSidebar }: Props) {
               </div>
             </button>
           </div>
+          </div>
         )}
       </div>
       <Modal open={isOpenBoard} handleClose={() => setOpenBoard(false)}>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 127afe0..30b0dfa 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -35,7 +35,7 @@ export default function Header() {
 
   return (
     <div>
-      <div className="bg-white h-[65px] z-50 dark:bg-secondary flex items-center fixed w-full border-b-[1px] border-gray/20">
+      <div className="bg-white h-[65px] z-50 dark:bg-secondary flex items-center absolute w-full border-b-[1px] border-gray/20">
         <div
           className={`border-r-[1px] border-gray/20 py-6 px-4 min-w-[14rem] cursor-pointer hidden md:block`}
         >
@@ -53,7 +53,7 @@ export default function Header() {
               onClick={() => {
                 setWorkspaceMenu(!isWorkspaceMenu);
               }}
-              className="flex items-center gap-x-2 relative"
+              className="flex items-center relative"
             >
               <h3 className="font-bold truncate w-[5ch] sm:w-auto sm:text-base md:text-xl">
                 {profile.name}
@@ -63,12 +63,14 @@ export default function Header() {
             {isWorkspaceMenu && (
               <Popup
                 description={
-                  <div className="flex gap-x-6 items-center border-b-[1px] border-gray/30 py-4 dark:text-white text-gray font-medium px-8 justify-center ">
-                    <img
+                  <div className="flex gap-x-6 items-center border-b-[1px] border-gray/30 py-4 dark:text-white text-gray font-medium px-4 justify-center ">
+                   <div  className="w-8 h-8">
+                   <img
                       src="./workspace-placeholder.webp"
-                      className="w-8 h-8"
+                      className="w-8 h-8 object-fit"
                       alt=""
                     />
+                   </div>
                     <div>
                       <h2 className="text-xl font-bold">{profile.name}</h2>
                       <p className="text-xs">{profile.email}</p>
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 52729fa..6b9fff1 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -12,17 +12,16 @@ export default function Modal({
   handleClose,
   showDowndrop,
 }: Props) {
- 
   return (
     <>
       {open && (
         <>
           <button
             onClick={handleClose}
-            className="z-50 bg-black/70 fixed -translate-y-[50%] -translate-x-[50%] top-[50%] left-[50%] w-screen h-screen"
+            className="z-[100] bg-black/70 fixed -translate-y-[50%] -translate-x-[50%] top-[50%] left-[50%] w-screen h-screen"
           />
           <div
-            className={`z-50 rounded-lg overflow-hidden ${
+            className={`z-[100] rounded-lg overflow-hidden ${
               showDowndrop
                 ? "w-[17rem] p-2 top-[13rem]"
                 : `w-[17rem] sm:w-[20rem] p-4 md:w-[33rem] md:p-6 top-[50%]`
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index 0c10592..0dd6659 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -29,7 +29,7 @@ function Popup({ items, style, handleOpenMenu, description }: Props) {
       style={style}
       className={`  ${
         description ? "py-1" : "py-0"
-      } absolute rounded-md  shadow-3xl dark:shadow-gray/20 shadow-gray/30 
+      } z-40 absolute rounded-md  shadow-3xl dark:shadow-gray/20 shadow-gray/30 
       dark:bg-[#20212c] bg-offwhite text-white w-fit right-0 top-6 `}
     >
       <div className={`${description?"w-auto":"w-max"}`}>
diff --git a/src/page/dashboard/index.tsx b/src/page/dashboard/index.tsx
index 4f40d5a..0a1cb7a 100644
--- a/src/page/dashboard/index.tsx
+++ b/src/page/dashboard/index.tsx
@@ -15,40 +15,42 @@ export default function Index() {
   const data: AppState = useSelector(appData);
   const { profile, board } = data;
   const navigate = useNavigate();
+  const isMobile = useMediaQuery({ query: "(min-width: 700px)" });
 
   useEffect(() => {
     if (!profile.id.length) {
       navigate("/workspace");
     }
-  }, [navigate, profile.id.length]);
+    if (isMobile === false && board.length < 1) {
+      console.log("see");
+      setShowSidebar(false);
+    }
+  }, [board.length, isMobile, navigate, profile.id.length]);
 
-  const isMobile = useMediaQuery({ query: "(min-width: 700px)" });
   return (
-    <div className="w-full h-full">
+    <div className="w-full h-full relative">
       <Header />
       <div className="w-full h-screen">
-        <div className={`absolute top-[65px] overflow-auto w-full`}>
+        <div className={`absolute top-[65px] overflow-auto h-[90vh] w-full`}>
           {profile.id.length ? (
-            <div
-              className={`${
-                isMobile === false && board.length < 1 ? "hidden" : "block"
-              }`}
-            >
-              <Collapse in={showSidebar} animateOpacity>
-                <div
-                  className={`h-screen fixed w-56 z-40 ${
-                    showSidebar ? "block " : "hidden"
-                  }`}
-                >
-                  <SideBar setShowSidebar={setShowSidebar} />
-                </div>
-              </Collapse>
-            </div>
-          ) : null}
+            // <div
+            //   className={`${
+            //     isMobile === false && board.length < 1 ? "hidden" : "block"
+            //   }`}
+            // >
+            <Collapse in={showSidebar} animateOpacity>
+              <div
+                className={`h-screen fixed w-56 z-40 ${
+                  showSidebar ? "block " : "hidden"
+                }`}
+              >
+                <SideBar setShowSidebar={setShowSidebar} />
+              </div>
+            </Collapse>
+          ) : // </div>
+          null}
 
-          <div>
-            <Board showSidebar={showSidebar} />
-          </div>
+          <Board showSidebar={showSidebar} />
         </div>
       </div>
 

From 5357d6d549d031a9f2d452182dc1b0de02b3bf9d Mon Sep 17 00:00:00 2001
From: Goodnews Sandy <54219127+sandygudie@users.noreply.github.com>
Date: Sun, 24 Dec 2023 16:30:42 +0100
Subject: [PATCH 3/3] merged

---
 src/components/Board/ActiveBoard.tsx |   2 +-
 src/components/Board/index.tsx       |   6 +-
 src/components/Header.tsx            |   4 +-
 src/components/Modal.tsx             |   8 +-
 src/components/Popup.tsx             |   4 +-
 src/components/SideBar/index.tsx     | 130 ++++++++++++++-------------
 src/page/dashboard/index.tsx         |  29 +++---
 7 files changed, 92 insertions(+), 91 deletions(-)

diff --git a/src/components/Board/ActiveBoard.tsx b/src/components/Board/ActiveBoard.tsx
index 57b25fe..d4fbd9c 100644
--- a/src/components/Board/ActiveBoard.tsx
+++ b/src/components/Board/ActiveBoard.tsx
@@ -165,7 +165,7 @@ export default function ActiveBoard() {
                         >
                           <div>
                             <PiDotsThreeLight
-                              className=" relative font-bold"
+                              className="relative font-bold"
                               size={20}
                             />
                             {isOpenPopup && selectedColumn?.id === item.id ? (
diff --git a/src/components/Board/index.tsx b/src/components/Board/index.tsx
index 9526c4a..327d25f 100644
--- a/src/components/Board/index.tsx
+++ b/src/components/Board/index.tsx
@@ -14,10 +14,10 @@ interface Props {
 export default function Index({ showSidebar }: Props) {
   const [isOpenBoard, setOpenBoard] = useState(false);
   const data: AppState = useSelector(appData);
-  const { active } = data;
+  const { active,board } = data;
 
   return (
-    <div className="w-auto h-auto ">
+    <div className={` ${board.length? "h-auto":"h-full"} w-auto`}>
       <div
             style={{
               marginLeft: showSidebar ? "clamp(260px, 10vw, 500px)" : "0px",
@@ -27,7 +27,7 @@ export default function Index({ showSidebar }: Props) {
         {active ? (
           <ActiveBoard  />
         ) : (
-          <div className=" h-full flex flex-col items-center justify-center">
+          <div className="h-full flex flex-col items-center justify-center">
           <div className="shadow-lg p-4 md:p-8 bg-primary/20 rounded-lg w-64 md:w-96 mx-auto text-center">
             <div className="w-52 md:w-72 mx-auto h-auto">
               <img
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 30b0dfa..1ad0311 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -35,7 +35,7 @@ export default function Header() {
 
   return (
     <div>
-      <div className="bg-white h-[65px] z-50 dark:bg-secondary flex items-center absolute w-full border-b-[1px] border-gray/20">
+      <div className="bg-white h-[65px] z-40 dark:bg-secondary flex items-center absolute w-full border-b-[1px] border-gray/20">
         <div
           className={`border-r-[1px] border-gray/20 py-6 px-4 min-w-[14rem] cursor-pointer hidden md:block`}
         >
@@ -55,7 +55,7 @@ export default function Header() {
               }}
               className="flex items-center relative"
             >
-              <h3 className="font-bold truncate w-[5ch] sm:w-auto sm:text-base md:text-xl">
+              <h3 className="font-bold truncate w-[10ch] md:w-auto sm:text-base md:text-xl">
                 {profile.name}
               </h3>{" "}
               <HiOutlineChevronDown className="mt-1 text-sm" />
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 6b9fff1..01f1cf0 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -15,13 +15,13 @@ export default function Modal({
   return (
     <>
       {open && (
-        <>
+        <div className="z-50">
           <button
             onClick={handleClose}
-            className="z-[100] bg-black/70 fixed -translate-y-[50%] -translate-x-[50%] top-[50%] left-[50%] w-screen h-screen"
+            className="z-50 bg-black/70 fixed -translate-y-[50%] -translate-x-[50%] top-[50%] left-[50%] w-screen h-screen"
           />
           <div
-            className={`z-[100] rounded-lg overflow-hidden ${
+            className={`z-50 rounded-lg overflow-hidden ${
               showDowndrop
                 ? "w-[17rem] p-2 top-[13rem]"
                 : `w-[17rem] sm:w-[20rem] p-4 md:w-[33rem] md:p-6 top-[50%]`
@@ -30,7 +30,7 @@ export default function Modal({
           >
             {children}
           </div>
-        </>
+        </div>
       )}
     </>
   );
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index 0dd6659..65c14b8 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -29,8 +29,8 @@ function Popup({ items, style, handleOpenMenu, description }: Props) {
       style={style}
       className={`  ${
         description ? "py-1" : "py-0"
-      } z-40 absolute rounded-md  shadow-3xl dark:shadow-gray/20 shadow-gray/30 
-      dark:bg-[#20212c] bg-offwhite text-white w-fit right-0 top-6 `}
+      }  absolute rounded-md shadow-3xl dark:shadow-gray/20 shadow-gray/30 
+      dark:bg-[#20212c] bg-offwhite text-white w-fit right-0 top-6`}
     >
       <div className={`${description?"w-auto":"w-max"}`}>
         {description ? description : null}
diff --git a/src/components/SideBar/index.tsx b/src/components/SideBar/index.tsx
index 3c95482..1b4fd5f 100644
--- a/src/components/SideBar/index.tsx
+++ b/src/components/SideBar/index.tsx
@@ -8,7 +8,9 @@ import { appData, activeItem } from "redux/boardSlice";
 import { IoIosAdd } from "react-icons/io";
 import Modal from "components/Modal";
 import AddBoard from "components/Board/AddBoard";
+import { Collapse } from "@chakra-ui/react";
 interface Props {
+  showSidebar: boolean;
   setShowSidebar?: Dispatch<SetStateAction<boolean>>;
   handleClose?: () => void;
   handleaddBoardMobile?: () => void;
@@ -18,6 +20,7 @@ export default function Index({
   handleaddBoardMobile,
   setShowSidebar,
   handleClose,
+  showSidebar,
 }: Props) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const dispatch = useDispatch();
@@ -27,77 +30,82 @@ export default function Index({
 
   return (
     <>
-      <div
-        className={`text-gray bg-white dark:bg-secondary ${
-          isMobile && "pr-2 pb-24 border-r-[1px] border-gray/20"
-        } 
+      <Collapse in={showSidebar} animateOpacity>
+        <div
+          className={`h-screen fixed w-56 ${showSidebar ? "block " : "hidden"}`}
+        >
+          <div
+            className={`z-40 text-gray bg-white dark:bg-secondary ${
+              isMobile && "pr-2 pb-24 border-r-[1px] border-gray/20"
+            } 
      pt-4 flex  
         flex-col justify-between h-full left-0 `}
-      >
-        <div>
-          <p className="pl-4 py-2 text-xs">ALL BOARDS ({board.length})</p>
-          <div>
-            {board && (
-              <>
-                {board.map((options: IBoard) => {
-                  return (
-                    <button
-                      key={options.id}
-                      className={`py-3 w-52 px-4 flex items-center gap-x-2 font-bold cursor-pointer ${`${
-                        active.id === options.id
-                          ? "bg-primary rounded-r-full text-white"
-                          : "hover:bg-primary/20 rounded-r-full"
-                      } `} `}
-                      onClick={() => {
-                        dispatch(activeItem(options));
-                        if (handleClose) {
-                          handleClose();
-                        }
-                      }}
-                    >
-                      <Icon type="board" />
-                      {options.name}
-                    </button>
-                  );
-                })}
-              </>
-            )}
+          >
+            <div>
+              <p className="pl-4 py-2 text-xs">ALL BOARDS ({board.length})</p>
+              <div>
+                {board && (
+                  <>
+                    {board.map((options: IBoard) => {
+                      return (
+                        <button
+                          key={options.id}
+                          className={`py-3 w-52 px-4 flex items-center gap-x-2 font-bold cursor-pointer ${`${
+                            active.id === options.id
+                              ? "bg-primary rounded-r-full text-white"
+                              : "hover:bg-primary/20 rounded-r-full"
+                          } `} `}
+                          onClick={() => {
+                            dispatch(activeItem(options));
+                            if (handleClose) {
+                              handleClose();
+                            }
+                          }}
+                        >
+                          <Icon type="board" />
+                          {options.name}
+                        </button>
+                      );
+                    })}
+                  </>
+                )}
+
+                {profile.id.length ? (
+                  <button
+                    onClick={() => {
+                      handleaddBoardMobile
+                        ? handleaddBoardMobile()
+                        : setIsOpen(true);
+                    }}
+                    className="pl-4 my-8 md:my-4 font-bold cursor-pointer text-primary hover:text-primary/60"
+                  >
+                    <div className="flex items-center ">
+                      {" "}
+                      <span>
+                        {" "}
+                        <IoIosAdd size={20} />{" "}
+                      </span>{" "}
+                      <p> Add New Board</p>
+                    </div>
+                  </button>
+                ) : null}
+              </div>
+            </div>
 
-            {profile.id.length ? (
+            <div className="mx-auto w-4/5 mb-4 absolute bottom-20 right-5 md:mb-0">
               <button
+                aria-label="Hide Sidebar"
                 onClick={() => {
-                  handleaddBoardMobile
-                    ? handleaddBoardMobile()
-                    : setIsOpen(true);
+                  setShowSidebar ? setShowSidebar(false) : null;
                 }}
-                className="pl-4 my-8 md:my-4 font-bold cursor-pointer text-primary hover:text-primary/60"
+                className="cursor-pointer hover:text-primary border-none inline-flex items-center gap-x-2 text-xs my-4"
               >
-                <div className="flex items-center ">
-                  {" "}
-                  <span>
-                    {" "}
-                    <IoIosAdd size={20} />{" "}
-                  </span>{" "}
-                  <p> Add New Board</p>
-                </div>
+                <MdVisibilityOff size={20} /> Hide Sidebar
               </button>
-            ) : null}
+            </div>
           </div>
         </div>
-
-        <div className="mx-auto w-4/5 mb-4 absolute bottom-20 right-5 md:mb-0">
-          <button
-            aria-label="Hide Sidebar"
-            onClick={() => {
-              setShowSidebar ? setShowSidebar(false) : null;
-            }}
-            className="cursor-pointer hover:text-primary border-none inline-flex items-center gap-x-2 text-xs my-4"
-          >
-            <MdVisibilityOff size={20} /> Hide Sidebar
-          </button>
-        </div>
-      </div>
-
+      </Collapse>
       <Modal open={isOpen} handleClose={() => setIsOpen(false)}>
         <AddBoard handleClose={() => setIsOpen(false)} />
       </Modal>
diff --git a/src/page/dashboard/index.tsx b/src/page/dashboard/index.tsx
index 0a1cb7a..12aa78d 100644
--- a/src/page/dashboard/index.tsx
+++ b/src/page/dashboard/index.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import Header from "components/Header";
-import { Collapse } from "@chakra-ui/react";
+
 import { MdVisibilityOff } from "react-icons/md";
 import SideBar from "components/SideBar";
 import Board from "components/Board";
@@ -31,24 +31,17 @@ export default function Index() {
     <div className="w-full h-full relative">
       <Header />
       <div className="w-full h-screen">
-        <div className={`absolute top-[65px] overflow-auto h-[90vh] w-full`}>
+        <div
+          className={`absolute top-[65px] ${
+            board.length ? "h-[90vh] overflow-auto" : "h-full"
+          }  w-full`}
+        >
           {profile.id.length ? (
-            // <div
-            //   className={`${
-            //     isMobile === false && board.length < 1 ? "hidden" : "block"
-            //   }`}
-            // >
-            <Collapse in={showSidebar} animateOpacity>
-              <div
-                className={`h-screen fixed w-56 z-40 ${
-                  showSidebar ? "block " : "hidden"
-                }`}
-              >
-                <SideBar setShowSidebar={setShowSidebar} />
-              </div>
-            </Collapse>
-          ) : // </div>
-          null}
+            <SideBar
+              setShowSidebar={setShowSidebar}
+              showSidebar={showSidebar}
+            />
+          ) : null}
 
           <Board showSidebar={showSidebar} />
         </div>