WIP

airtai · Apr 16, 2024 · 6569d04 · 6569d04
1 parent 9231ed3
commit 6569d04
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 110 deletions.
diff --git a/app/main.wasp b/app/main.wasp
@@ -129,9 +129,9 @@ page BuildPage {
   component: import BuildPageWithCustomAuth from "@src/client/app/BuildPage"
 }
 
-route ToolsBoxRoute { path: "/build/ToolsBox", to: ToolsBoxPage }
-page ToolsBoxPage {
-  component: import ToolsBoxPage from "@src/client/app/ToolsBoxPage"
+route ToolBoxRoute { path: "/build/toolbox", to: ToolBoxPage }
+page ToolBoxPage {
+  component: import ToolBoxPage from "@src/client/app/toolboxPage"
 }
 
 route ModelsRoute { path: "/build/models", to: ModelsPage }

diff --git a/app/src/client/App.tsx b/app/src/client/App.tsx
@@ -113,6 +113,7 @@ export default function App({ children }: { children: ReactNode }) {
               </>
             ) : (
               <>
+                {shouldDisplayAppNavBar && <AppNavBar />}
                 {children}
                 {/* {isAdminDashboard ? (
                   children

diff --git a/app/src/client/app/ToolsBoxPage.tsx → app/src/client/app/ToolBoxPage.tsx b/app/src/client/app/ToolsBoxPage.tsx → app/src/client/app/ToolBoxPage.tsx
@@ -1,10 +1,10 @@
 import CustomLayout from './layout/CustomLayout';
 import CustomBreadcrumb from '../components/CustomBreadcrumb';
 
-const ToolsBoxPage = () => {
+const ToolBoxPage = () => {
   return (
     <CustomLayout>
-      <CustomBreadcrumb pageName='Toolsbox' />
+      <CustomBreadcrumb pageName='ToolBox' />
       <div className='flex flex-col gap-10'>
         <div className='flex flex-col gap-4'>
           <div className='rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark'>
@@ -21,4 +21,4 @@ const ToolsBoxPage = () => {
   );
 };
 
-export default ToolsBoxPage;
+export default ToolBoxPage;
diff --git a/app/src/client/app/layout/CustomLayout.tsx b/app/src/client/app/layout/CustomLayout.tsx
@@ -1,8 +1,8 @@
 import { useAuth } from 'wasp/client/auth';
 import { useState, ReactNode, FC, useRef, useEffect } from 'react';
-import CustomHeader from '../../components/CustomHeader';
 import { useHistory } from 'react-router-dom';
 import CustomSidebar from '../../components/CustomSidebar';
+import { cn } from '../../../shared/utils';
 
 interface Props {
   children?: ReactNode;
@@ -43,7 +43,9 @@ const CustomLayout: FC<Props> = ({ children }) => {
   // make call to api -> from action file access conversation entity and pass it to openai
   // get response from openai and save it against the conversation
 
-  const wrapperClass = document.body.classList.contains('server-error') ? 'h-[calc(100vh-85px)]' : 'h-screen';
+  const wrapperClass = document.body.classList.contains('server-error')
+    ? 'h-[calc(100vh-165px)]'
+    : 'h-[calc(100vh-80px)]';
 
   return (
     <div className='dark:bg-boxdark-2 dark:text-bodydark bg-captn-light-blue'>
@@ -56,7 +58,71 @@ const CustomLayout: FC<Props> = ({ children }) => {
         {/* <!-- ===== Content Area Start ===== --> */}
         <div className='relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden'>
           {/* <!-- ===== Header Start ===== --> */}
-          <CustomHeader sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} user={user} />
+          <header className='sticky top-0 z-999 flex w-full bg-airt-hero-gradient-start dark:bg-boxdark dark:drop-shadow-none lg:hidden'>
+            <div className='flex flex-grow items-center justify-between sm:justify-end sm:gap-5 px-8 py-5 shadow '>
+              <div className='flex items-center gap-2 sm:gap-4 lg:hidden'>
+                {/* <!-- Hamburger Toggle BTN --> */}
+
+                <button
+                  aria-controls='sidebar'
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setSidebarOpen(!sidebarOpen);
+                  }}
+                  className='z-99999 block rounded-sm border border-stroke border-airt-hero-gradient-start bg-airt-hero-gradient-start p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden'
+                >
+                  <span className='relative block h-5.5 w-5.5 cursor-pointer'>
+                    <span className='du-block absolute right-0 h-full w-full'>
+                      <span
+                        className={cn(
+                          'relative top-0 left-0 my-1 block h-0.5 w-0 rounded-sm bg-white delay-[0] duration-200 ease-in-out dark:bg-white',
+                          {
+                            '!w-full delay-300': !sidebarOpen,
+                          }
+                        )}
+                      ></span>
+                      <span
+                        className={cn(
+                          'relative top-0 left-0 my-1 block h-0.5 w-0 rounded-sm bg-white delay-150 duration-200 ease-in-out dark:bg-white',
+                          {
+                            'delay-400 !w-full': !sidebarOpen,
+                          }
+                        )}
+                      ></span>
+                      <span
+                        className={cn(
+                          'relative top-0 left-0 my-1 block h-0.5 w-0 rounded-sm bg-white delay-200 duration-200 ease-in-out dark:bg-white',
+                          {
+                            '!w-full delay-500': !sidebarOpen,
+                          }
+                        )}
+                      ></span>
+                    </span>
+                    <span className='absolute right-0 h-full w-full rotate-45'>
+                      <span
+                        className={cn(
+                          'absolute left-2.5 top-0 block h-full w-0.5 rounded-sm bg-white delay-300 duration-200 ease-in-out dark:bg-white',
+                          {
+                            '!h-0 !delay-[0]': !sidebarOpen,
+                          }
+                        )}
+                      ></span>
+                      <span
+                        className={cn(
+                          'delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-sm bg-black duration-200 ease-in-out dark:bg-white',
+                          {
+                            '!h-0 !delay-200': !sidebarOpen,
+                          }
+                        )}
+                      ></span>
+                    </span>
+                  </span>
+                </button>
+
+                {/* <!-- Hamburger Toggle BTN --> */}
+              </div>
+            </div>
+          </header>
           {/* <!-- ===== Header End ===== --> */}
 
           {/* <!-- ===== Main Content Start ===== --> */}

diff --git a/app/src/client/components/CustomBreadcrumb.tsx b/app/src/client/components/CustomBreadcrumb.tsx
@@ -7,14 +7,16 @@ const CustomBreadcrumb = ({ pageName }: BreadcrumbProps) => {
     <div className='mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
       <h2 className='text-title-md2 font-semibold text-airt-font-base dark:text-white'>{pageName}</h2>
 
-      {/* <nav>
+      <nav>
         <ol className='flex items-center gap-2'>
           <li>
-            <Link to='/build'>Build /</Link>
+            <Link className='text-airt-font-base' to='/build'>
+              Build /
+            </Link>
           </li>
-          <li className='text-primary'>{pageName}</li>
+          <li className='text-airt-secondary'>{pageName}</li>
         </ol>
-      </nav> */}
+      </nav>
     </div>
   );
 };

diff --git a/app/src/client/components/CustomHeader.tsx b/app/src/client/components/CustomHeader.tsx
diff --git a/app/src/client/components/CustomSidebar.tsx b/app/src/client/components/CustomSidebar.tsx
@@ -54,15 +54,15 @@ const CustomSidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
     <aside
       ref={sidebar}
       className={cn(
-        'absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-airt-primary duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0',
+        'absolute left-0 top-0 z-9999 flex h-screen w-75 flex-col overflow-y-hidden bg-airt-primary duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0',
         {
           'translate-x-0': sidebarOpen,
           '-translate-x-full': !sidebarOpen,
         }
       )}
     >
       {/* <!-- SIDEBAR HEADER --> */}
-      <div className='flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5'>
+      {/* <div className='flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5'>
         <NavLink to='/'>
           <img src={Logo} alt='Logo' width={50} />
         </NavLink>
@@ -88,7 +88,7 @@ const CustomSidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
             />
           </svg>
         </button>
-      </div>
+      </div> */}
       {/* <!-- SIDEBAR HEADER --> */}
 
       <div className='no-scrollbar flex flex-col overflow-y-auto duration-300 ease-linear'>
@@ -101,8 +101,8 @@ const CustomSidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
             <ul className='mb-6 flex flex-col gap-1.5'>
               {/* <!-- Menu Item Dashboard --> */}
               <NavLink
-                to='/build/toolsbox'
-                isActive={(_match, location) => location.pathname === '/build/toolsbox'}
+                to='/build/toolbox'
+                isActive={(_match, location) => location.pathname === '/build/toolbox'}
                 className={(isActive) =>
                   cn(
                     'group relative flex items-center gap-2.5 rounded-sm py-2 px-4 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-airt-secondary dark:hover:bg-meta-4',
@@ -137,7 +137,7 @@ const CustomSidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                     fill=''
                   />
                 </svg>
-                ToolsBox
+                ToolBox
               </NavLink>
 
               {/* <!-- Menu Item Dashboard --> */}