Add navigation hide btn and improve styling

rsconcept/frontend/src/App.tsx

@@ -25,7 +25,7 @@ function App() {
         pauseOnFocusLoss={false}
         limit={5}
       />
-      <main className='min-h-[calc(100vh-6.8rem)] px-2 h-fit'>
+      <main className='min-h-[calc(100vh-7.5rem)] px-2 h-fit'>
         <Routes>
           <Route path='/' element={ <HomePage/>} />
 

rsconcept/frontend/src/components/Common/SubmitButton.tsx

@@ -5,10 +5,9 @@ interface SubmitButtonProps {
 }
 
 function SubmitButton({text='ОК', disabled, loading=false}: SubmitButtonProps) {
-  const style = 'px-4 py-2 font-bold text-white disabled:cursor-not-allowed bg-blue-500 rounded hover:bg-blue-700 dark:bg-orange-500 dark:hover:bg-orange-300 disabled:bg-gray-400'
   return (
     <button type='submit'
-      className={style + (loading ? ' cursor-progress': '')}
+      className={`px-4 py-2 font-bold text-white disabled:cursor-not-allowed rounded clr-btn-primary ${loading ? ' cursor-progress': ''}`}
       disabled={disabled}
     >
       {text}

rsconcept/frontend/src/components/Footer.tsx

@@ -3,7 +3,7 @@ import { urls } from '../utils/constants';
 
 function Footer() {
   return (
-    <footer className='z-50 px-4 py-4 text-gray-600 bg-white border-t-2 border-gray-400 dark:bg-gray-700 dark:border-gray-300 dark:text-gray-300'>
+    <footer className='z-50 px-4 pt-2 pb-4 text-gray-600 bg-white border-t-2 border-gray-400 dark:bg-gray-700 dark:border-gray-300 dark:text-gray-300'>
       <div className='flex items-stretch justify-center w-full mx-auto'>
         <div className='px-4 underline'>
           <Link to='manuals' tabIndex={-1}>Справка</Link> <br/>

rsconcept/frontend/src/components/Navigation/Navigation.tsx

@@ -6,22 +6,40 @@ import UserMenu from './UserMenu';
 import { useAuth } from '../../context/AuthContext';
 import UserTools from './UserTools';
 import Logo from './Logo';
+import { useState } from 'react';
 
 function Navigation() {
   const {user} = useAuth();
   const navigate = useNavigate();
+  const [isActive, setActive] = useState(true);
 
   const navigateCommon = () => navigate('/rsforms?filter=common');
   const navigateHelp = () => navigate('/manuals');
   
   return (
-    <nav className='bg-white dark:bg-gray-700 border-b-2 border-gray-400 rounded dark:border-gray-300 px-4 py-2.5 sticky top-0 left-0 right-0 z-50 h-[4rem]'>
+    <nav className='sticky top-0 left-0 right-0 z-50'>
-      <div className='flex items-center justify-between '>
+      {isActive && 
+      <button
+        title='Скрыть навигацию'
+        className='absolute top-0 right-0 z-[60] border-b-2 border-l-2 clr-nav w-[1.2rem] h-[4rem] '
+        onClick={() => setActive(!isActive)}
+      >
+        <p>{'>'}</p><p>{'>'}</p>
+      </button>}
+      {!isActive && 
+      <button
+        title='Показать навигацию'
+        className='absolute top-0 right-0 z-[60] border-b-2 border-l-2 clr-nav w-[4rem] h-[1.6rem]'
+        onClick={() => setActive(!isActive)}
+      >
+        {'∨∨∨'}
+      </button>}
+      {isActive && 
+      <div className='border-b-2 clr-nav pr-6 pl-2 py-2.5 h-[4rem] flex items-center justify-between '>
         <div className='flex items-start justify-start '>
           <Logo title='КонцептПортал' />
           <TopSearch placeholder='Поиск схемы...' />
         </div>
-        
         <div className='flex items-center'>
           {user && <UserTools/>}
           <div className='flex items-center pl-2'>
@@ -30,7 +48,7 @@ function Navigation() {
             <UserMenu />
           </div>
         </div>
-      </div>
+      </div>}
     </nav>
   );
 }

rsconcept/frontend/src/index.css

@@ -23,10 +23,18 @@
     @apply text-zinc-200 bg-gray-900
   }
 
+  .clr-nav {
+    @apply border-gray-400 dark:border-gray-300 bg-white dark:bg-gray-700 rounded-none
+  }
+
   .clr-hover {
     @apply hover:bg-gray-50 hover:text-gray-700 dark:hover:text-white dark:hover:bg-gray-500
   }
 
+  .clr-btn-primary {
+    @apply bg-blue-400 hover:bg-blue-600 dark:bg-orange-600 dark:hover:bg-orange-400 disabled:bg-gray-400 dark:disabled:bg-gray-400
+  }
+
   .text-red {
     @apply text-red-400 dark:text-red-600
   }

rsconcept/frontend/src/pages/RSFormPage/ConstituentEditor.tsx

@@ -78,7 +78,7 @@ function ConstituentEditor() {
   return (
     <div className='flex items-start w-full gap-2'>
       <form onSubmit={handleSubmit} className='flex-grow min-w-[50rem] max-w-min px-4 py-2 border'>
-        <div className='flex items-center justify-between gap-1'>
+        <div className='flex items-start justify-between gap-1'>
           <span className='mr-12'>
             <label 
               title='Переименовать конституенту' 
@@ -89,6 +89,9 @@ function ConstituentEditor() {
             </label>
             <b className='ml-2'>{alias}</b>
           </span>
+          <div className='mt-2 h-[1rem]'>
+            <SubmitButton text='Сохранить изменения' disabled={!isEditable} />
+          </div>
           <span>
             <label 
               title='Изменить тип конституенты'
@@ -141,9 +144,7 @@ function ConstituentEditor() {
           onChange={event => setConvention(event.target.value)}
           onFocus={() => setEditMode(EditMode.TEXT)}
         />
-        <div className='flex items-center justify-between gap-1 py-2 mt-2'>
+        
-          <SubmitButton text='Сохранить изменения' disabled={!isEditable} />
-        </div>
       </form>
       <ConstituentsSideList expression={expression}/>
     </div>

rsconcept/frontend/src/pages/RSFormPage/ConstituentsSideList.tsx

@@ -76,7 +76,7 @@ function ConstituentsSideList({expression}: ConstituentsSideListProps) {
 
   return (
     <div className='max-h-[80vh] overflow-y-scroll border flex-grow w-full'>
-      <div className='sticky top-0 left-0 right-0 z-40 flex items-center justify-between w-full gap-1 px-2 py-1 bg-white border-b-2 border-gray-400 rounded dark:bg-gray-700 dark:border-gray-300'>
+      <div className='sticky top-0 left-0 right-0 z-10 flex items-center justify-between w-full gap-1 px-2 py-1 bg-white border-b-2 border-gray-400 rounded dark:bg-gray-700 dark:border-gray-300'>
         <div className='w-full'>
           <input type='text'
             className='w-full px-2 outline-none dark:bg-gray-700 hover:text-clip'

rsconcept/frontend/src/pages/RSFormPage/ConstituentsTable.tsx

@@ -13,7 +13,7 @@ interface ConstituentsTableProps {
 }
 
 function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
-  const { schema, isEditable } = useRSForm();
+  const { schema, isEditable, } = useRSForm();
   const [selectedRows, setSelectedRows] = useState<IConstituenta[]>([]);
   const nothingSelected = useMemo(() => selectedRows.length === 0, [selectedRows]);
 
@@ -25,9 +25,9 @@ function ConstituentsTable({onOpenEdit}: ConstituentsTableProps) {
   const handleRowClicked = useCallback(
     (cst: IConstituenta, event: React.MouseEvent<Element, MouseEvent>) => {
 		if (event.ctrlKey) {
-      console.log('ctrl + click');
+      onOpenEdit(cst);
     }
-	}, []);
+	}, [onOpenEdit]);
 
   const handleDelete = useCallback(() => {
     toast.info('Удаление конституент');

rsconcept/frontend/src/pages/RSFormPage/RSFormTabs.tsx

@@ -43,6 +43,31 @@ function RSFormTabs() {
     }
   }, [setActive, schema, setInit]);
 
+//   const [ locationKeys, setLocationKeys ] = useState([])
+// const history = useHistory()
+
+// useEffect(() => {
+//   return history.listen(location => {
+//     if (history.action === 'PUSH') {
+//       setLocationKeys([ location.key ])
+//     }
+
+//     if (history.action === 'POP') {
+//       if (locationKeys[1] === location.key) {
+//         setLocationKeys(([ _, ...keys ]) => keys)
+
+//         // Handle forward event
+
+//       } else {
+//         setLocationKeys((keys) => [ location.key, ...keys ])
+
+//         // Handle back event
+
+//       }
+//     }
+//   })
+// }, [ locationKeys, ])
+
   useEffect(() => {
     const url = new URL(window.location.href);
     const tabQuery = url.searchParams.get('tab');
@@ -51,14 +76,25 @@ function RSFormTabs() {
 
   useEffect(() => {
     if (init) {
-      let url = new URL(window.location.href);
+      const url = new URL(window.location.href);
+      let currentActive = url.searchParams.get('active');
+      const currentTab = url.searchParams.get('tab');
+      const saveHistory = tabIndex === TabsList.CST_EDIT && currentActive !== String(active?.entityUID);
+      if (currentTab !== String(tabIndex)) {
         url.searchParams.set('tab', String(tabIndex));
+      }
       if (active) {
+        if (currentActive !== String(active.entityUID)) {
           url.searchParams.set('active', String(active.entityUID));
+        }
       } else {
         url.searchParams.delete('active');
       }
+      if (saveHistory) {
         window.history.pushState(null, '', url.toString());
+      } else {
+        window.history.replaceState(null, '', url.toString());
+      }
     }
   }, [tabIndex, active, init]);
 

rsconcept/frontend/src/pages/RSFormPage/TablistTools.tsx

@@ -42,9 +42,9 @@ function TablistTools() {
         <Dropdown>
           <p>клонировать</p>
           <p>поделиться</p>
-          <DropdownButton disabled={isEditable} onClick={handleDelete}>
+          <DropdownButton disabled={!isEditable} onClick={handleDelete}>
             <div className='inline-flex items-center gap-1 justify-normal'>
-              <span className={isOwned ? 'text-red' : ''}><DumpBinIcon size={4} /></span>
+              <span className={isEditable ? 'text-red' : ''}><DumpBinIcon size={4} /></span>
               <p>Удалить схему</p>
             </div>
           </DropdownButton>