updata adaptiv

Rodoro · Oct 6, 2024 · e3d0ec0 · e3d0ec0
1 parent 775353f
commit e3d0ec0
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 27 deletions.
diff --git a/src/app/admin/(sections)/batches/create/page.tsx b/src/app/admin/(sections)/batches/create/page.tsx
@@ -201,7 +201,7 @@ const CreateBatches = () => {
                 </tr>
             </tbody>
         </table>
-            <div className='flex flex-row justify-end space-x-3 mt-4'>
+            <div className='flex flex-row justify-end space-x-3 mt-4 block'>
                 <Button onClick={() => router.push("/admin/batches")}>Cancel</Button>
                 <Button3 className='bg-[#7E50FF] text-white shadow-[4px_4px_34px_0_rgba(139,50,252,0.2)] justify-center w-[110px]' onClick={() => handleSubmitAndMain()}>Create</Button3>
                 <Button3 className='bg-[#7E50FF] text-white shadow-[4px_4px_34px_0_rgba(139,50,252,0.2)] justify-center w-[203px]' onClick={handleSubmitAndNew}>Create and Open New</Button3>

diff --git a/src/app/admin/(sections)/loot-cases/page.tsx b/src/app/admin/(sections)/loot-cases/page.tsx
@@ -90,7 +90,7 @@ const columns = [
     return (
         <div style={{ height: loading ? 400 : loots.length === 0 ? 400 : '' }} className="mt-20 mr-8 ml-8 md:ml-60 lg:ml-[270px] max-md:ml-[0px] md:mt-8 mb-8 ">
         <div className = "flex justify-between">
-            <Button2 className="px-2 mb-6 max-md:w-full" onClick={() => router.push("/admin/batches/create")}>+ Create Loot case</Button2>
+            <Button2 className="px-2 mb-6 max-md:w-full" onClick={() => router.push("/admin/loot-cases/create")}>+ Create Loot case</Button2>
             <Button className='max-md:hidden ' onClick={() => { authService.logout(); window.location.reload(); }}>
                 <p className='mr-[10px]'>Exit</p>
                 <FaDoorOpen className=''/>

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
@@ -5,6 +5,7 @@ import React, { useEffect, useState} from 'react'
 import Button from '@/components/interface/Button'
 import { authService } from '@/services/auth/auth.services';
 import { FaDoorOpen } from "react-icons/fa6";
+import { RxCross2 } from "react-icons/rx"
 import { BsListNested } from "react-icons/bs";
 
 export default function DashboardLayout({
@@ -13,15 +14,6 @@ export default function DashboardLayout({
     children: React.ReactNode
 }) {
     const router = useRouter();
-    // const { status: sessionStatus } = useSession();
-
-    // if (sessionStatus === "loading") {
-    //     return <h1 className="flex min-h-screen flex-col items-center mt-6">Загрузка...</h1>
-    // }
-    // if (sessionStatus === "unauthenticated") {
-    //     router.replace("/login");
-    // }
-
     const [isNavVisible, setIsNavVisible] = useState(false); 
     const toggleNavbar = () => setIsNavVisible((prev) => !prev);  
 
@@ -46,23 +38,34 @@ export default function DashboardLayout({
                 <div className='w-[511px] h-[511px] rounded-full bg-[#C51FFF] absolute z-[-1] top-[-114px] left-[-76px] blur-[130px] opacity-25'></div>
             </div>
             <div>
-                <Navbar isVisible={isNavVisible} onClose={toggleNavbar} className = 'max-lg:w-[240px]'/>
+                <div className={`transition-opacity duration-300 ${isNavVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
+                    {isNavVisible && <Navbar isVisible={isNavVisible} onClose={toggleNavbar} className='max-lg:w-[240px] items-end' />}
+                </div>
                 <div>
                     <div className="flex flex-row md:justify-end mt-[40px]">
                         <div className='flex justify-between w-full'>
                             <div className='inline-block md:hidden'>
                                 <img src='/img/interface/nav/logo.png' alt="Логотип" width={'39px'} height={'41px'} />
                             </div>
                             <div className='inline-block'>
-                                <button onClick={toggleNavbar}>
-                                    <BsListNested className='inline-block text-[32px] md:hidden' />
+                                <button onClick={toggleNavbar} className={`transition-transform duration-300`}>
+                                    {isNavVisible ? (
+                                        <RxCross2 className='inline-block text-[32px] md:hidden transform transition-transform duration-300' />
+                                    ) : (
+                                        <BsListNested className='inline-block text-[32px] md:hidden transform transition-transform duration-300' />
+                                    )}
                                 </button>
                             </div>
                         </div>
                     </div>
-                    {children}
+                    <div className='md:hidden'>
+                        {!isNavVisible && children}
+                    </div>
+                    <div className='max-md:hidden'>
+                        {children}
+                    </div>
                 </div>
             </div>
         </section>
-    )
+    );
 }
diff --git a/src/containers/admin/DataGrid.tsx b/src/containers/admin/DataGrid.tsx
@@ -104,7 +104,6 @@ const DataGrid = <T extends DataRow>({ data, columns }: DataGridProps<T>) => {
                 <div className={`h-[60px] flex items-center pl-[12px] mb-[10px] rounded-l-[15px] bg-[#1B1E4F] border-l-[1px] border-[#3A3269] border-b-[1px] border-t-[1px]`}>
                     <Select onChange={handleSelectAll} />
                 </div>
-
                 {columns.map(({ key, label }, colIndex) => (
                     <div
                         key={key.toString()}

diff --git a/src/containers/admin/Navbar.tsx b/src/containers/admin/Navbar.tsx
@@ -46,26 +46,18 @@ const Navbar: React.FC<NavbarProps> = ({ isVisible, onClose, className }) => {
 
     return (
         <div
-            className={`w-[273px] max-md:w-full bg-[#0A0D1D33] z-[2] h-full fixed left-0 top-0 px-[40px] py-[35px] transition-transform duration-300 ${isVisible ? 'translate-x-0' : '-translate-x-full'} ${className}`}
+            className={`w-[273px] max-md:w-full  max-md:h-[90%] max-md:absolute max-md:top-[10%] md:bg-[#0A0D1D33] z-[2] h-full fixed left-0 top-0 px-[40px] py-[35px] transition-transform duration-300 ${isVisible ? 'translate-x-0' : '-translate-x-full'} ${className}`}
         >
             <div className='flex justify-between items-center mb-[40px] max-md:hidden'>
                 <Link href="/">
                     <Image
                         src='/img/interface/nav/logo+text.png'
                         alt="Логотип"
                         width={180}
-                        height={40}
+                        height={60}
                     />
                 </Link>
             </div>
-            <div className='md:hidden flex justify-between mb-[50px]'>
-                <div><Image src='/img/interface/nav/logo.png' alt="Логотип" width={39} height={41}/></div>
-                <div>
-                    <button onClick={onClose}>
-                        <RxCross2 className='text-white text-[32px]' />
-                    </button>
-                </div>
-            </div>
             <div>
                 <div className='mb-[10px]'>
                     <Link href="/admin">