From 667a2a97b8f89202faaa9a21bc36a01720930452 Mon Sep 17 00:00:00 2001 From: allinix Date: Wed, 19 Feb 2025 08:46:05 +0530 Subject: [PATCH] #debug 1 --- next/src/components/drawer/LeftSidebar.tsx | 248 +++++++++++---------- next/src/styles/globals.css | 56 +++-- 2 files changed, 172 insertions(+), 132 deletions(-) diff --git a/next/src/components/drawer/LeftSidebar.tsx b/next/src/components/drawer/LeftSidebar.tsx index 9682f5a..18eae83 100644 --- a/next/src/components/drawer/LeftSidebar.tsx +++ b/next/src/components/drawer/LeftSidebar.tsx @@ -2,7 +2,7 @@ import Image from "next/image"; import { useRouter } from "next/router"; import { useTranslation } from "next-i18next"; import { FaBars } from "react-icons/fa"; - +import { useState, useEffect } from 'react'; import { DrawerItemButton, DrawerItemButtonLoader } from "./DrawerItemButton"; import type { DisplayProps } from "./Sidebar"; import Sidebar from "./Sidebar"; @@ -21,146 +21,156 @@ const LeftSidebar = ({ show, setShow, onReload }: DisplayProps & { onReload?: () const router = useRouter(); const { signIn, status } = useAuth(); const [t] = useTranslation("drawer"); + const [isPageLoading, setIsPageLoading] = useState(false); const { isLoading, data } = api.agent.getAll.useQuery(undefined, { enabled: status === "authenticated", }); const userAgents = data ?? []; + useEffect(() => { + const handleStart = (url: string) => { + if (PAGE_LINKS.some(link => link.href === url)) { + setIsPageLoading(true); + } + }; + + const handleComplete = () => { + setIsPageLoading(false); + }; + + router.events.on('routeChangeStart', handleStart); + router.events.on('routeChangeComplete', handleComplete); + router.events.on('routeChangeError', handleComplete); + + return () => { + router.events.off('routeChangeStart', handleStart); + router.events.off('routeChangeComplete', handleComplete); + router.events.off('routeChangeError', handleComplete); + }; + }, [router]); + const navigateToPage = (href: string) => { if (router.pathname === href) { onReload?.(); return; } - void router.push(href); }; return ( - -
- - Reworkd AI -

Allinix

- + <> + {isPageLoading && ( +
+
+
+
+
+
+
+

Loading...

+
+
+ )} + + +
+ + Reworkd AI +

Allinix

+ - - -
-
- {/* {status === "unauthenticated" && ( -
- void signIn()}> - {t("SIGN_IN")} - {" "} - {t("SIGN_IN_NOTICE")} -
- )} - {status === "authenticated" && !isLoading && userAgents.length === 0 && ( -
- {t("NEED_TO_SIGN_IN_AND_CREATE_AGENT_FIRST")} -
- )} */} - {/* {(status === "loading" || (status === "authenticated" && isLoading)) && ( -
- {Array(13) - .fill(0) - .map((_, index) => ( - + + +
+ +
+

Welcome Back to Allinix

+

Valid member of Allinix since Jan 2025

+ +
    +
      +
      Menu
      + {PAGE_LINKS.map((link, i) => ( + navigateToPage(link.href)} + > + + ))} -
- )} */} + + -

Welcome Back to Allinix

-

Valid member of Allinix since Jan 2025

- - {/* */} +

Conversations

+ {userAgents.map((agent, index) => ( + void router.push(`/agent?id=${agent.id}`)} + /> + ))} +
    -
      -
      Menu
      - {PAGE_LINKS.map((link, i) => ( - navigateToPage(link.href)} - > - - - ))} -
    -
- -

Conversations

- {userAgents.map((agent, index) => ( - void router.push(`/agent?id=${agent.id}`)} - /> - ))} -
- - + { + void router.push(link.href); + }} + > + {link.icon instanceof Object ? ( + + ) : ( + icon + )} + + + ))} + + +
  • +
    + @{new Date().getFullYear()} Allinix.ai | All Rights reserved +
    +
    • + + + ); }; -export default LeftSidebar; +export default LeftSidebar; \ No newline at end of file diff --git a/next/src/styles/globals.css b/next/src/styles/globals.css index 047eaf8..ad14f15 100644 --- a/next/src/styles/globals.css +++ b/next/src/styles/globals.css @@ -17,13 +17,42 @@ img { @keyframes loading { 0% { - transform: translateX(-100%); + transform: translateX(-100%); } + 100% { - transform: translateX(200%); + transform: translateX(200%); } } +@keyframes loadingN { + 0% { + transform: translateX(-100%); + } + + 50% { + transform: translateX(100%); + } + + 100% { + transform: translateX(-100%); + } +} + +/* Optional: Add smooth transitions for loading overlay */ +.fixed { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +/* Optional: Add backdrop blur transition */ +.backdrop-blur-sm { + transition-property: backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + .gradient-text { background: linear-gradient(180deg, #fff 0%, #525252 100%); background-clip: text; @@ -37,34 +66,35 @@ img { box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.5) inset; transition: all 0.2s ease; } + .btn-primary-orange { border: 1px solid rgba(255, 134, 53, 0.1); background: rgba(255, 134, 53, 0.1); box-shadow: 0px 0px 10px 0px rgba(255, 134, 53, 0.5) inset; transition: all 0.2s ease; - } - - .btn-primary-teal { +} + +.btn-primary-teal { border: 1px solid rgba(20, 184, 166, 0.1); background: rgba(20, 184, 166, 0.1); box-shadow: 0px 0px 10px 0px rgba(20, 184, 166, 0.5) inset; transition: all 0.2s ease; - } - - .btn-primary-purple { +} + +.btn-primary-purple { border: 1px solid rgba(168, 85, 247, 0.1); background: rgba(168, 85, 247, 0.1); box-shadow: 0px 0px 10px 0px rgba(168, 85, 247, 0.5) inset; transition: all 0.2s ease; - } - - .btn-primary-red { +} + +.btn-primary-red { border: 1px solid rgba(244, 63, 94, 0.1); background: rgba(244, 63, 94, 0.1); box-shadow: 0px 0px 10px 0px rgba(244, 63, 94, 0.5) inset; transition: all 0.2s ease; - } - +} + .btn-primary:hover { box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 1) inset; }