Finished makin new Sidebar

components/AboutProject.js

@@ -0,0 +1,68 @@
+import { useTranslation } from 'next-i18next'
+
+import Feedback from './StartPage/Feedback'
+
+const paragraphs = [
+  {
+    p: 'P1',
+  },
+  {
+    p: 'P2',
+  },
+  {
+    p: 'P3',
+  },
+  {
+    p: 'P4',
+  },
+  {
+    p: 'P5',
+  },
+  {
+    p: 'Ul1',
+    ul: ['Li1', 'Li2', 'Li3'],
+  },
+  {
+    p: 'P6',
+  },
+  {
+    p: 'Ul2',
+    ul: ['Li1', 'Li2'],
+  },
+  {
+    p: 'P7',
+  },
+  {
+    p: 'P8',
+  },
+]
+
+function AboutProject() {
+  const { t } = useTranslation(['start-page', 'about', 'common'])
+
+  return (
+    <>
+      <div>
+        <h2 className="text-th-primary-100 uppercase font-medium">{t('common:About')}</h2>
+        <div className="space-y-2 my-4">
+          {paragraphs.map((item) => {
+            if (!item.ul) {
+              return <p key={item.p}>{t(`about:${item.p}`)}</p>
+            }
+
+            return (
+              <ul key={item.p} className="list-disc ms-4">
+                {item.ul.map((listItem) => (
+                  <li key={listItem}>{t(`about:${item.p}:${listItem}`)}</li>
+                ))}
+              </ul>
+            )
+          })}
+        </div>
+      </div>
+      <Feedback t={t} />
+    </>
+  )
+}
+
+export default AboutProject

components/AboutVersion.js

@@ -16,7 +16,7 @@ import updatesES from '../public/updateVersionInfo/updates_es.md'
 
 import Close from 'public/close.svg'
 
-function AboutVersion({ isStartPage = false }) {
+function AboutVersion({ isStartPage = false, collapsed, onClose }) {
   const aboutVersion = {
     en: updatesEN,
     ru: updatesRU,
@@ -83,37 +83,44 @@ function AboutVersion({ isStartPage = false }) {
 
   return (
     <>
-      <div className="hover:opacity-70">
+      <div
+        className={`${collapsed && 'lg:hidden'} ${
+          modalsSidebarState.aboutVersion
+            ? 'text-th-text-primary'
+            : 'text-th-text-primary lg:text-th-secondary-300 group-hover:text-th-text-primary'
+        }`}
+      >
         {t('Version')} {packageJson.version}
       </div>
       {modalsSidebarState.aboutVersion && (
         <div
-          className="absolute flex flex-col right-0 top-0 w-full h-full min-h-full bg-white z-10 md:h-min px-3 sm:px-7 pb-3 sm:pb-7 overflow-auto sm:overflow-visible cursor-default shadow-md bg-th-secondary-10 border-th-secondary-300 sm:border sm:rounded-2xl md:max-h-full md:left-full md:ml-5"
+          className="absolute flex flex-col right-0 top-0 w-full h-full min-h-full bg-white z-10 md:h-min pb-3 sm:pb-7 overflow-auto sm:overflow-visible cursor-default shadow-md bg-th-secondary-10 border-th-secondary-300 sm:border md:max-h-full md:left-full md:ml-5 lg:ml-0 lg:w-[30rem] md:rounded-xl lg:rounded-none md:overflow-hidden"
           onClick={(e) => e.stopPropagation()}
         >
-          <div className="sticky top-0 flex items-center justify-between py-6 bg-th-secondary-10">
-            <p className="text-left text-2xl font-bold">
-              {t('Version')} {packageJson.version}
+          <div className="sticky top-0 flex items-center justify-center py-4 bg-th-secondary-400 px-7">
+            <p className="text-left text-th-secondary-10 text-lg font-medium">
+              {t('Version')}
             </p>
             <button
-              className="text-right"
-              onClick={() =>
+              className="absolute right-4"
+              onClick={() => {
                 setModalsSidebarState((prev) => ({
                   ...prev,
                   aboutVersion: false,
                 }))
-              }
+                onClose(false)
+              }}
             >
-              <Close className="h-8 stroke-th-primary-100" />
+              <Close className="h-8 stroke-th-secondary-10" />
             </button>
           </div>
-          <ReactMarkdown className="flex-grow pb-5 pr-3 whitespace-pre-line leading-5 sm:max-h-full sm:overflow-auto">
+          <ReactMarkdown className="flex-grow py-5 whitespace-pre-line leading-5 sm:max-h-full sm:overflow-auto px-7">
             {showAllUpdates ? fullAboutVersion : currentAboutVersion}
           </ReactMarkdown>
-          <div className="mt-auto flex justify-center pt-5 border-t border-th-secondary-300">
+          <div className="mt-auto flex justify-center pt-5 px-4">
             <button
               onClick={() => setShowAllUpdates((prev) => !prev)}
-              className="btn-primary"
+              className="btn-primary w-full"
             >
               {showAllUpdates ? t('ShowCurrUpdates') : t('ShowAllUpdates')}
             </button>

components/Account.js

@@ -8,12 +8,9 @@ import { Menu, Tab } from '@headlessui/react'
 
 import ProjectCreate from './ProjectCreate'
 import Projects from './Projects'
-import MobileMenu from './Panel/UI/MobileMenu'
 
 import { useCurrentUser } from 'lib/UserContext'
 
-import Plus from 'public/plus.svg'
-
 const sizeTabs = {
   1: 'w-1/6',
   2: 'w-full lg:w-3/6',
@@ -24,9 +21,9 @@ const sizeTabs = {
 }
 
 function Account() {
+  const [selectedTab, setSelectedTab] = useState(0)
   const { user, loading } = useCurrentUser()
   const router = useRouter()
-  const [openInternalMenu, setOpenInternalMenu] = useState(false)
 
   const { t } = useTranslation(['users', 'project-edit'])
 
@@ -35,13 +32,30 @@ function Account() {
       router.push('/')
     }
   }, [router, user, loading])
+
+  useEffect(() => {
+    if (router.query?.tab) {
+      setSelectedTab(parseInt(router.query?.tab))
+    }
+  }, [router])
+
+  useEffect(() => {
+    router.push(`?tab=${selectedTab}`, undefined, { shallow: true })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedTab])
+
   const tabs = ['Account', 'projects:Projects', 'projects:CreateProject']
   return (
     <>
       <div className="mx-auto max-w-7xl">
         {user?.id && (
           <>
-            <Tab.Group as="div" className="block sm:hidden">
+            <Tab.Group
+              as="div"
+              className="block sm:hidden"
+              selectedIndex={selectedTab}
+              onChange={setSelectedTab}
+            >
               <Tab.List className="flex p-1 w-full bg-th-secondary-10 border border-th-secondary-300 rounded-3xl shadow-md">
                 {tabs
                   .filter((el) => el !== 'projects:CreateProject')
@@ -70,7 +84,12 @@ function Account() {
                 </Tab.Panel>
               </Tab.Panels>
             </Tab.Group>
-            <Tab.Group as="div" className="hidden sm:block">
+            <Tab.Group
+              as="div"
+              className="hidden sm:block"
+              selectedIndex={selectedTab}
+              onChange={setSelectedTab}
+            >
               <Tab.List
                 className={`flex px-5 ${
                   sizeTabs[
@@ -115,45 +134,6 @@ function Account() {
           </>
         )}
       </div>
-      {user?.is_admin && (
-        <MobileMenu
-          onClose={() => setOpenInternalMenu(false)}
-          hideCloseButton={openInternalMenu}
-          btnPositionHeight="bottom-[15vh]"
-          mainHeight="h-[15vh]"
-        >
-          <Menu.Items>
-            <Menu.Item as="div" className="flex justify-center items-center h-[15vh]">
-              <Menu>
-                <Menu.Button>
-                  <div
-                    className={`py-2 px-7 text-th-text-secondary-100 cursor-pointer bg-th-primary-100 rounded-3xl ${
-                      openInternalMenu ? 'hidden' : 'block'
-                    }`}
-                    onClick={() => setOpenInternalMenu(true)}
-                  >
-                    {t('project-edit:CreateNewProject')}
-                  </div>
-                </Menu.Button>
-              </Menu>
-            </Menu.Item>
-          </Menu.Items>
-        </MobileMenu>
-      )}
-
-      {openInternalMenu && (
-        <div className="fixed inset-0 px-5 pb-4 mt-14 min-h-screen z-20 overflow-y-scroll bg-th-secondary-10">
-          <div className="flex justify-end -mb-7">
-            <button
-              className="p-4 mt-4 rounded-full shadow-2xl text-th-text-secondary-100 bg-th-primary-100"
-              onClick={() => setOpenInternalMenu(false)}
-            >
-              <Plus className="w-7 h-7 rotate-45" />
-            </button>
-          </div>
-          <ProjectCreate />
-        </div>
-      )}
     </>
   )
 }

components/AppBar.js

@@ -25,9 +25,11 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) {
   const supabase = useSupabaseClient()
   const { user } = useCurrentUser()
   const router = useRouter()
+
   useEffect(() => {
     setIsStepPage(router.pathname === '/translate/[project]/[book]/[chapter]/[step]')
   }, [router.pathname])
+
   useEffect(() => {
     const hasAccess = async () => {
       try {
@@ -44,17 +46,30 @@ export default function AppBar({ setIsOpenSideBar, isOpenSideBar }) {
   }, [supabase, user])
 
   const logoLink = useMemo(() => {
-    return !user?.id ? '/' : access ? '/account' : '/agreements'
+    return !user?.id ? '/' : access ? '/account?tab=0' : '/agreements'
   }, [access, user])
+
   return (
-    <div className={`bg-th-primary-100 ${isOpenSideBar ? 'sticky top-0 z-30' : ''}`}>
+    <div className="bg-th-primary-100 sticky top-0 z-30">
       <div className="appbar" onClick={() => isOpenSideBar && setIsOpenSideBar(false)}>
         <div className="relative md:static flex items-center h-10 md:justify-start md:gap-7">
-          <SideBar setIsOpenSideBar={setIsOpenSideBar} access={access} />
+          {![
+            '/user-agreement',
+            '/confession-steps',
+            '/agreements',
+            '/404',
+            '/privacy-policy',
+          ].includes(router.pathname) && (
+            <SideBar
+              setIsOpenSideBar={setIsOpenSideBar}
+              access={access}
+              isOpenSideBar={isOpenSideBar}
+            />
+          )}
           <div
-            className={`flex justify-center w-full ${
-              access && !isStepPage ? '-ml-10' : ''
-            } md:ml-0 `}
+            className={`flex justify-center w-full  ${
+              access && !isStepPage ? 'lg:ms-4 xl:-ml-2 2xl:-ml-6' : ''
+            }`}
           >
             <Link href={logoLink}>
               <LevelLogo className="h-8 fill-th-text-secondary-100" />

components/Layout.js

@@ -40,15 +40,17 @@ function Layout({ backgroundColor, children }) {
             enter="transition-opacity duration-200"
             leave="transition-opacity duration-200"
           >
-            <div className="absolute flex justify-center items-center top-14 sm:top-16 left-0 bottom-0 right-0 backdrop-brightness-90 backdrop-blur z-20 overflow-y-hidden">
+            <div className="absolute flex justify-center items-center top-14 sm:top-16 left-0 bottom-0 right-0 bg-black bg-opacity-70 z-20 overflow-y-hidden">
               {loadingPage && (
                 <Progress className="progress-custom-colors w-14 animate-spin stroke-th-primary-100" />
               )}
             </div>
           </Transition>
         </div>
         <main>
-          <div className="pt-5 px-5 lg:px-8 mt-14 sm:mt-auto">{children}</div>
+          <div className="pt-5 px-5 lg:px-8 lg:ms-10 2xl:ms-0 mt-14 sm:mt-auto">
+            {children}
+          </div>
         </main>
       </div>
       <Toaster />

components/Modal.js

@@ -30,7 +30,7 @@ function Modal({
         className={classNames.main}
         onClose={() => !handleCloseDisabled && closeHandle()}
       >
-        <div className="inset-0 fixed backdrop-blur" />
+        <div className="inset-0 fixed bg-black bg-opacity-70" />
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"

components/ModalInSideBar.js

@@ -1,27 +1,39 @@
-import { useTranslation } from 'next-i18next'
-
 import Close from 'public/close.svg'
 
-function ModalInSideBar({ isOpen, setIsOpen, children }) {
-  const { t } = useTranslation()
-
+function ModalInSideBar({
+  isOpen,
+  setIsOpen,
+  children,
+  modalTitle,
+  buttonTitle,
+  collapsed,
+}) {
   return (
     <>
-      <div className="cursor-pointer text-th-text-primary hover:opacity-70">
-        {t('personalNotes')}
+      <div
+        className={`overflow-hidden ${
+          collapsed ? 'lg:w-0' : 'lg:w-auto'
+        } cursor-pointer ${
+          isOpen ? 'text-th-text-primary' : 'lg:text-th-secondary-300'
+        } group-hover:text-th-text-primary ${collapsed ? 'lg:hidden' : ''}`}
+      >
+        <span className="whitespace-nowrap">{buttonTitle}</span>
       </div>
 
       {isOpen && (
         <div
-          className="absolute flex flex-col right-0 top-0 w-full h-full min-h-full bg-th-secondary-10 z-10 md:h-min px-3 sm:px-7 pb-3 sm:pb-7 overflow-auto sm:overflow-visible cursor-default shadow-md border-th-secondary-300 sm:border sm:rounded-2xl md:max-h-full md:left-full md:ml-5 overflow-y-auto"
+          className="absolute flex flex-col right-0 top-0 w-full h-[calc(100vh-40px)] min-h-full bg-th-secondary-10 z-10 md:h-min ml-4 lg:ml-0 pb-3 sm:pb-7 overflow-auto sm:overflow-visible cursor-default shadow-md border-th-secondary-300 sm:border md:max-h-full md:left-full lg:w-[30rem] rounded-none md:rounded-xl lg:rounded-none md:overflow-hidden"
           onClick={(e) => e.stopPropagation()}
         >
-          <div className="sticky top-0 flex items-center justify-end py-6 bg-th-secondary-10">
-            <button className="text-right" onClick={() => setIsOpen(false)}>
-              <Close className="h-8 stroke-th-primary-100" />
+          <div className="sticky top-0 flex items-center justify-center py-4 bg-th-secondary-400 lg:px-7">
+            <p className="text-th-text-secondary-100 font-medium text-lg">{modalTitle}</p>
+            <button className="absolute right-4" onClick={() => setIsOpen(false)}>
+              <Close className="h-8 stroke-th-secondary-10" />
             </button>
           </div>
-          <div className="h-full overflow-x-hidden overflow-y-auto p-4">{children}</div>
+          <div className="h-full overflow-x-hidden overflow-y-auto p-4 lg:px-7">
+            {children}
+          </div>
         </div>
       )}
     </>

components/ProjectCreate.js

@@ -198,9 +198,9 @@ function ProjectCreate() {
               resourcesUrl={resourcesUrl}
               setResourcesUrl={setResourcesUrl}
             />
-            <div className="flex w-fit items-center justify-center">
+            <div className="flex items-center justify-center">
               <ButtonLoading
-                className="btn-primary relative"
+                className="btn-primary relative w-full"
                 disabled={isCreating}
                 value={t('CreateProject')}
                 isLoading={isCreating}