added unload page transition in /me

PPLBandage · Sep 27, 2024 · 649cbd0 · 649cbd0
1 parent b515f1c
commit 649cbd0
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 24 deletions.
diff --git a/src/app/me/aniamtedLink.module.tsx b/src/app/me/aniamtedLink.module.tsx
@@ -0,0 +1,37 @@
+"use client";
+import Link, { LinkProps } from "next/link";
+import React, { ReactNode } from "react";
+import { useRouter } from "next/navigation";
+
+interface AnimatedLinkProps
+    extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href">,
+    LinkProps {
+    children: ReactNode;
+    href: string;
+    delay?: number;
+}
+
+function sleep(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export const TransitionLink: React.FC<AnimatedLinkProps> = ({ children, href, ...props }) => {
+    const router = useRouter();
+    const handleTransition = async (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+        e.preventDefault();
+        const body = document.getElementById("sidebar");
+        if (body) {
+            body.style.transform = 'translateY(50px)';
+            body.style.opacity = '0';
+        }
+
+        await sleep(200);
+        router.push(href);
+    };
+
+    return (
+        <Link {...props} href={href} onClick={handleTransition}>
+            {children}
+        </Link>
+    );
+};
diff --git a/src/app/me/notifications/page.tsx b/src/app/me/notifications/page.tsx
@@ -74,7 +74,7 @@ const Notifications = () => {
         <body>
             <Header />
             <Me>
-                <div className={Style.container} style={notifications != null ? { opacity: "1", transform: "translateY(0)" } : { opacity: "0", transform: "translateY(50px)" }}>
+                <div id="sidebar" className={Style.container} style={notifications != null ? { opacity: "1", transform: "translateY(0)" } : { opacity: "0", transform: "translateY(50px)" }}>
                     {notifications?.data.length > 0 ?
                         <>
                             {notifications?.total_count > 5 && <Paginator total_count={notifications?.total_count} take={5} onChange={(page) => setPage(page || 0)} />}

diff --git a/src/app/me/page.tsx b/src/app/me/page.tsx
@@ -99,7 +99,7 @@ const Main = () => {
             <Header />
             {!isLogged ? <Login /> :
                 <Me>
-                    <div style={elements ? { opacity: "1", transform: "translateY(0)" } : { opacity: "0", transform: "translateY(50px)" }} className={styles.cont}>
+                    <div style={elements ? { opacity: "1", transform: "translateY(0)" } : { opacity: "0", transform: "translateY(50px)" }} className={styles.cont} id="sidebar">
                         <AdaptiveGrid
                             child_width={300}
                             className={styles}

diff --git a/src/app/me/settings/page.tsx b/src/app/me/settings/page.tsx
@@ -72,7 +72,7 @@ const Page = () => {
             <Header />
             {logged &&
                 <Me>
-                    <div className={Style.main} style={loaded ? { opacity: "1", transform: "translateY(0)" } : { opacity: "0", transform: "translateY(50px)" }}>
+                    <div id="sidebar" className={Style.main} style={loaded ? { opacity: "1", transform: "translateY(0)" } : { opacity: "0", transform: "translateY(50px)" }}>
                         {data &&
                             <>
                                 <UserSettings data={data} />

diff --git a/src/app/me/stars/page.tsx b/src/app/me/stars/page.tsx
@@ -81,12 +81,14 @@ const Main = () => {
             <Header />
             {isLogged &&
                 <Me>
-                    {data && data.length != 0 ? <div className={style_sidebar.skins_container_2} style={elements ? { opacity: "1", transform: "translateY(0)" } : { opacity: "0", transform: "translateY(50px)" }}>
-                        <AdaptiveGrid child_width={300}>{elements}</AdaptiveGrid>
-                    </div> :
+                    {data && data.length != 0 ?
+                        <div id="sidebar" className={style_sidebar.skins_container_2} style={elements ? { opacity: "1", transform: "translateY(0)" } : { opacity: "0", transform: "translateY(50px)" }}>
+                            <AdaptiveGrid child_width={300}>{elements}</AdaptiveGrid>
+                        </div> :
                         <div className={style_sidebar.animated} style={elements ? { opacity: "1", transform: "translateY(0)", width: "100%" } : { opacity: "0", transform: "translateY(50px)", width: "100%" }}>
                             <p style={{ display: "flex", alignItems: "center", fontSize: "1.1rem", fontWeight: 500, width: "100%", justifyContent: "center", margin: 0 }}><Image style={{ marginRight: ".5rem" }} src="/static/theres_nothing_here.png" alt="" width={56} height={56} />Похоже, тут ничего нет</p>
-                        </div>}
+                        </div>
+                    }
                 </Me>
             }
         </body>

diff --git a/src/app/modules/components/header.module.tsx b/src/app/modules/components/header.module.tsx
@@ -19,7 +19,8 @@ import {
     IconLogout,
     IconChevronDown,
     IconMenu2,
-    IconUserCog
+    IconUserCog,
+    IconBooks
 } from '@tabler/icons-react';
 import IconCropped from '@/app/resources/icon-cropped.svg';
 
@@ -141,8 +142,9 @@ const LoggedMenu = ({ admin }: { admin: boolean }) => {
             <Link className={Styles.menu_element} href="/workshop/create"><IconPlus />Создать</Link>
             <hr style={{ border: "1px var(--hr-color) solid", margin: "2px" }}></hr>
             <Link className={Styles.menu_element} href="/"><IconSmartHome />Главная</Link>
-            {admin && <Link className={Styles.menu_element} href="/admin"><IconUserCog />Админ панель</Link>}
             <Link className={Styles.menu_element} href="/workshop"><IconStack />Мастерская</Link>
+            <Link className={Styles.menu_element} href="/tutorials"><IconBooks />Туториалы</Link>
+            {admin && <Link className={Styles.menu_element} href="/admin"><IconUserCog />Админ панель</Link>}
             <a className={Styles.menu_element} onClick={() => logout()}><IconLogout />Выйти</a>
         </>
     );
@@ -155,6 +157,7 @@ const UnloggedMenu = () => {
             <hr style={{ border: "1px var(--hr-color) solid", margin: "2px" }}></hr>
             <Link className={Styles.menu_element} href="/"><IconSmartHome />Главная</Link>
             <Link className={Styles.menu_element} href="/workshop"><IconStack />Мастерская</Link>
+            <Link className={Styles.menu_element} href="/tutorials"><IconBooks />Туториалы</Link >
         </>
     );
 }

diff --git a/src/app/modules/components/me.module.tsx b/src/app/modules/components/me.module.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { authApi } from "../utils/api.module";
 import { Query } from "./header.module";
 import style_sidebar from "@/app/styles/me/sidebar.module.css";
@@ -8,12 +8,12 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { timeStamp } from "../utils/time.module";
 import Footer from "./footer.module";
-import { useCookies } from 'next-client-cookies';
 import Menu from "./theme_select.module";
 import { Users } from "@/app/users/[name]/page";
 import { formatDate } from "./card.module";
 
 import { IconSettings, IconBell, IconStar, IconList, IconStarFilled } from '@tabler/icons-react';
+import { TransitionLink } from "@/app/me/aniamtedLink.module";
 
 const Default = ({ data, islogged, color }: { data: Query, islogged: boolean, color?: string }) => {
     return (
@@ -103,15 +103,15 @@ export const Me = ({ children, user_data }: { children: JSX.Element, user_data?:
                                 </div>
                                 {!user_data &&
                                     <div className={style_sidebar.card} style={{ alignItems: "stretch", gap: ".5rem" }}>
-                                        <Link href="/me" className={`${style_sidebar.side_butt} ${path == 'me' && style_sidebar.active}`}>
+                                        <TransitionLink href="/me" className={`${style_sidebar.side_butt} ${path == 'me' && style_sidebar.active}`}>
                                             <IconList width={24} height={24} />
                                             Мои работы
-                                        </Link>
-                                        <Link href="/me/stars" className={`${style_sidebar.side_butt} ${path == 'stars' && style_sidebar.active}`}>
+                                        </TransitionLink>
+                                        <TransitionLink href="/me/stars" className={`${style_sidebar.side_butt} ${path == 'stars' && style_sidebar.active}`}>
                                             <IconStar width={24} height={24} />
                                             Избранное
-                                        </Link>
-                                        <Link href="/me/notifications" className={`${style_sidebar.side_butt} ${path == 'notifications' && style_sidebar.active}`}>
+                                        </TransitionLink>
+                                        <TransitionLink href="/me/notifications" className={`${style_sidebar.side_butt} ${path == 'notifications' && style_sidebar.active}`}>
                                             <IconBell width={24} height={24} />
                                             Уведомления
                                             {(data as Query)?.has_unreaded_notifications &&
@@ -124,19 +124,18 @@ export const Me = ({ children, user_data }: { children: JSX.Element, user_data?:
                                                     borderRadius: '50%'
                                                 }} />
                                             }
-                                        </Link>
-                                        <Link href="/me/settings" className={`${style_sidebar.side_butt} ${path == 'settings' && style_sidebar.active}`}>
+                                        </TransitionLink>
+                                        <TransitionLink href="/me/settings" className={`${style_sidebar.side_butt} ${path == 'settings' && style_sidebar.active}`}>
                                             <IconSettings width={24} height={24} />
                                             Настройки
-                                        </Link>
+                                        </TransitionLink>
                                     </div>
                                 }
                             </>
                         }
                     </div>
                     {children}
                 </div>
-                <Footer />
             </div>
         </div>
     );

diff --git a/src/app/styles/header.module.css b/src/app/styles/header.module.css
@@ -78,7 +78,7 @@
     background-color: var(--main-menu-color);
     box-shadow: none;
     transform: scale(1);
-    transition: background-color 150ms, box-shadow 150ms;
+    transition: background-color 200ms, box-shadow 200ms, transform 200ms;
     cursor: pointer;
 
     color: var(--main-text-color);

diff --git a/src/app/workshop/[id]/client_code.tsx b/src/app/workshop/[id]/client_code.tsx
@@ -507,11 +507,10 @@ const EditElement = ({ bandage, onClose }: { bandage: Interfaces.Bandage, onClos
         return string.charAt(0).toUpperCase() + string.slice(1);
     }
 
-
     const save = () => {
         authApi.put(`workshop/${bandage.external_id}`, {
             title: title,
-            description: description !== "" ? description : null,
+            description: description || null,
             categories: categories,
             access_level: accessLevel
         }).then((response) => {
@@ -546,7 +545,7 @@ const EditElement = ({ bandage, onClose }: { bandage: Interfaces.Bandage, onClos
             className={`react-select-container`}
             classNamePrefix="react-select"
             isSearchable={false}
-            onChange={(n, a) => setAccessLevel(n.value)}
+            onChange={(n, _) => setAccessLevel(n.value)}
         />
         <div className={style.check_notification} style={{
             borderColor: "red",