improved sidebar hide animation and finished dark-mode

Keith-Web3 · Apr 29, 2023 · d0c8f72 · d0c8f72
1 parent 5d2cdd3
commit d0c8f72
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 43 deletions.
diff --git a/src/components/shared/Body.tsx b/src/components/shared/Body.tsx
@@ -15,7 +15,10 @@ const Body: React.FC<{
   setIsSideBarHidden: React.Dispatch<React.SetStateAction<boolean>>
 }> = function ({ setIsSideBarHidden }) {
   const currentBoard = useStore(state => state.currentBoard())
-  const modalType = useStore(state => state.modalType)
+  const [modalType, setModalType] = useStore(state => [
+    state.modalType,
+    state.setModalType,
+  ])
   const colorTheme = useStore(state => state.theme())
 
   return (
@@ -27,7 +30,13 @@ const Body: React.FC<{
             .map(el => (
               <Board key={nanoid()} {...el} />
             ))}
-          <motion.div layout className="body__add-board">
+          <motion.div
+            layout
+            onClick={() =>
+              setModalType({ modalType: 'new-column', showModal: true })
+            }
+            className="body__add-board"
+          >
             <motion.p layout>+ new column</motion.p>
           </motion.div>
         </motion.div>
@@ -36,7 +45,12 @@ const Body: React.FC<{
         <p className="empty__message">
           This board is empty. Create a new column to get started.
         </p>
-        <Button className="btn--one">
+        <Button
+          className="btn--one"
+          onClick={() =>
+            setModalType({ modalType: 'new-column', showModal: true })
+          }
+        >
           <img src={plus} alt="add" />
           Add New Column
         </Button>

diff --git a/src/components/shared/Header.tsx b/src/components/shared/Header.tsx
@@ -51,7 +51,7 @@ const Header: React.FC<{
       className="header"
     >
       <motion.div
-        layout
+        // layout
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         className="header__sidebar-hidden"

diff --git a/src/components/shared/Modal.tsx b/src/components/shared/Modal.tsx
@@ -29,6 +29,14 @@ const Modal: React.FC = function () {
       {modalType.modalType === 'edit-board' && (
         <ModifyBoards editBoard title="edit board" button="save changes" />
       )}
+      {modalType.modalType === 'new-column' && (
+        <ModifyBoards
+          editBoard
+          newColumn
+          title="edit board"
+          button="save changes"
+        />
+      )}
       <motion.div
         key={nanoid()}
         className="backdrop"

diff --git a/src/components/shared/ModifyBoards.tsx b/src/components/shared/ModifyBoards.tsx
@@ -1,4 +1,4 @@
-import React, { useId, useState } from 'react'
+import React, { useEffect, useId, useRef, useState } from 'react'
 import { nanoid } from 'nanoid'
 import { motion, AnimatePresence } from 'framer-motion'
 
@@ -10,28 +10,44 @@ const ModifyBoards: React.FC<{
   title: string
   button: string
   editBoard?: boolean
-}> = function ({ title, button, editBoard = false }) {
+  newColumn?: boolean
+}> = function ({ title, button, editBoard = false, newColumn = false }) {
   const id = useId()
 
   const modalType = useStore(state => state.modalType)
   const currentBoard = useStore(state => state.currentBoard)
   const theme = useStore(state => state.theme())
+  const [createBoard, editBoardHandler] = useStore(state => [
+    state.createBoard,
+    state.editBoard,
+  ])
 
   const [boardName, setBoardName] = useState(
     editBoard ? currentBoard().name : ''
   )
   const [boardColumns, setBoardColumns] = useState<[string, number][]>(
     editBoard
-      ? currentBoard().status.map(el => [el.name, el.id])
+      ? newColumn
+        ? [
+            ...(currentBoard().status.map(el => [el.name, el.id]) as [
+              string,
+              number
+            ][]),
+            ['', Date.now()],
+          ]
+        : currentBoard().status.map(el => [el.name, el.id])
       : [
           ['', Date.now() + 1],
           ['', Date.now() + 1],
         ]
   )
-  const [createBoard, editBoardHandler] = useStore(state => [
-    state.createBoard,
-    state.editBoard,
-  ])
+
+  const addColumnRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (newColumn) addColumnRef.current!.focus()
+  }, [])
+
   return (
     <div className="modify-boards" data-theme={theme}>
       <p className="modify-boards__title">{title}</p>
@@ -70,6 +86,7 @@ const ModifyBoards: React.FC<{
                     return newBoards
                   })
                 }}
+                ref={idx === boardColumns.length - 1 ? addColumnRef : null}
               />
               <img
                 onClick={() =>

diff --git a/src/components/shared/NavBar.tsx b/src/components/shared/NavBar.tsx
@@ -52,14 +52,13 @@ const NavBar: React.FC<{
       variants={navVariant}
       initial="initial"
       animate="animate"
-      // transition={{ type: 'spring', stiffness: 900, damping: 30 }}
       className={`navbar ${isNavOpened ? 'active' : ''}`}
     >
       <div className="navbar__container">
-        <div className="navbar__header">
+        <motion.div layout className="navbar__header">
           <img src={logo} alt="logo" />
           <p>kanban</p>
-        </div>
+        </motion.div>
         <p className="navbar__title">All boards({boards.length})</p>
         <div className="navbar__boards">
           {boards.map((board, idx) => (

diff --git a/src/components/shared/ViewTask.tsx b/src/components/shared/ViewTask.tsx
@@ -94,6 +94,7 @@ const ViewTask: React.FC<{
       transition: {
         when: 'beforeChildren',
         staggerChildren: 0.05,
+        delayChildren: 0.1,
         duration: 0.3,
       },
     },
@@ -140,6 +141,7 @@ const ViewTask: React.FC<{
                 initial={{ y: '-10px', opacity: 0 }}
                 animate={{ y: '0px', opacity: 1 }}
                 exit={{ y: '-10px', opacity: 0 }}
+                transition={{ duration: 0.25 }}
                 className="view-task__dropdown"
               >
                 <p

diff --git a/src/components/store/store.tsx b/src/components/store/store.tsx
@@ -437,7 +437,9 @@ const useStore = create<State & Action>((set, get) => ({
       .tasks.find(task => task.id === taskId)!
     task!.subtasks = subtasks
 
-    set(() => ({ boards: [...otherBoards, currentBoard] }))
+    set(() => ({
+      boards: [...otherBoards, currentBoard].sort((a, b) => a.id - b.id),
+    }))
   },
   setCurrentBoard: function (id) {
     const setter = () => {

diff --git a/src/sass/pages/homepage.scss b/src/sass/pages/homepage.scss
@@ -19,13 +19,22 @@
   }
   .header {
     grid-area: header;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0 auto 0 calc(155px + ($spacer * 2));
+      width: 0px;
+      transition: background-color 200ms linear, width 200ms linear;
+    }
   }
   .body {
     grid-area: body;
   }
   &[data-is_side_bar_hidden='true'] {
     grid-template: auto 1fr / 1fr;
     grid-template-areas: 'header' 'body';
+    background-color: inherit;
 
     nav {
       display: none;
@@ -81,10 +90,10 @@
     }
     .board__task {
       background-color: $dark-200;
-      box-shadow: 0px 4px 6px rgba(54, 78, 126, 0.101545);
+      box-shadow: 0px 4px 6px rgba($dark-400, 0.1);
 
       p:first-child {
-        color: $white;
+        color: rgba($white, 0.85);
       }
       p:last-child {
         color: $gray-200;
@@ -94,24 +103,32 @@
       background-color: $dark-200;
 
       &__title {
-        color: $white;
+        color: rgba($white, 0.85);
       }
       &__sidebar-hidden {
         p {
-          color: $white;
+          color: rgba($white, 0.85);
         }
       }
       &::after {
         background-color: rgba($gray-200, 0.5);
       }
+      &__dropdown {
+        background-color: $dark-300;
+        box-shadow: 0px 3px 3px rgba($dark-400, 0.25);
+
+        p:hover {
+          background-color: $dark-200;
+        }
+      }
     }
     .navbar {
       background-color: $dark-200;
       &__container {
         background-color: $dark-200;
       }
       &__header p {
-        color: $white;
+        color: rgba($white, 0.85);
       }
       &__theme {
         background-color: $dark-300;

diff --git a/src/sass/shared/header.scss b/src/sass/shared/header.scss
@@ -82,21 +82,27 @@
   }
   &__dropdown {
     position: absolute;
-    padding: $spacer;
+    padding: $spacer * 0.5;
     box-shadow: 0px 10px 20px rgba(54, 78, 126, 0.25);
     border-radius: 8px;
     text-transform: capitalize;
-    inset: auto $spacer -100% auto;
+    inset: auto $spacer * 2 -100% auto;
     background-color: $white;
     font-weight: 500;
+    z-index: 2;
 
     p {
       cursor: pointer;
-      padding-right: $spacer * 4;
+      padding: $spacer * 0.5;
+      padding-right: $spacer * 3;
+      border-radius: 3px;
+
+      &:hover {
+        background-color: $gray-100;
+      }
     }
     p:first-child {
       color: $gray-200;
-      margin-bottom: $spacer;
     }
     p:last-child {
       color: $red-200;

diff --git a/src/sass/shared/modify-boards.scss b/src/sass/shared/modify-boards.scss
@@ -106,19 +106,19 @@
     background-color: $dark-200;
 
     .modify-boards__title {
-      color: $white;
+      color: rgba($white, 0.85);
     }
     .columns__header {
-      color: $white;
+      color: rgba($white, 0.85);
     }
     label {
-      color: $white;
+      color: rgba($white, 0.85);
 
       input {
         background-color: $dark-200;
-        color: $white;
+        color: rgba($white, 0.85);
         &::placeholder {
-          color: rgba($white, 0.25);
+          color: rgba($white, 0.75);
         }
       }
     }

diff --git a/src/sass/shared/modify-task.scss b/src/sass/shared/modify-task.scss
@@ -109,24 +109,24 @@
     background-color: $dark-200;
 
     .add-task__header {
-      color: $white;
+      color: rgba($white, 0.85);
     }
     .status__header,
     .status-dropdown p {
-      color: $white;
+      color: rgba($white, 0.85);
     }
     .status-menu {
       background-color: $dark-300;
     }
     label {
-      color: $white;
+      color: rgba($white, 0.85);
 
       input,
       textarea {
         background-color: $dark-200;
-        color: $white;
+        color: rgba($white, 0.85);
         &::placeholder {
-          color: rgba($white, 0.25);
+          color: rgba($white, 0.75);
         }
       }
     }
@@ -184,17 +184,17 @@
     background-color: $dark-200;
 
     .subtasks__header {
-      color: $white;
+      color: rgba($white, 0.85);
     }
     label {
-      color: $white;
+      color: rgba($white, 0.85);
 
       input,
       textarea {
         background-color: $dark-200;
-        color: $white;
+        color: rgba($white, 0.85);
         &::placeholder {
-          color: rgba($white, 0.25);
+          color: rgba($white, 0.75);
         }
       }
     }