Add left panel collapser

NtsDK · Jul 1, 2022 · 889349c · 889349c
1 parent 8edddb0
commit 889349c
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 24 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -39,8 +39,8 @@ function App() {
       <div className="app">
         <div className="tw-flex">
           <div 
-            className="tw-flex-grow-0 tw-flex-shrink-0 tw-bg-gray-200"
-            style={{flexBasis: '25rem'}}
+            className="tw-flex-grow-0 tw-flex-shrink-0 tw-bg-gray-200 tw-max-w-sm"
+            // style={{flexBasis: '25rem'}}
           >
             <ControlPanel />
           </div>

diff --git a/src/i18nResources/enTranslation.ts b/src/i18nResources/enTranslation.ts
@@ -35,6 +35,7 @@ export const enTranslation: TranslationInfo = {
     'remove-discipline': 'Remove discipline',
     'add-background': 'Add background',
     'remove-background': 'Remove background',
+    'hide-panel': 'Hide panel'
   },
   'errors': {
     'error-on-file-loading': 'Error on file loading',

diff --git a/src/i18nResources/ruTranslation.ts b/src/i18nResources/ruTranslation.ts
@@ -32,6 +32,7 @@ export const ruTranslation = {
     'remove-discipline': 'Удалить дисциплину',
     'add-background': 'Добавить дополнение',
     'remove-background': 'Удалить дополнение',
+    'hide-panel': 'Спрятать панель'
   },
   'errors': {
     'error-on-file-loading': 'Ошибка при загрузке листа персонажа',

diff --git a/src/tailwind.css b/src/tailwind.css
@@ -487,6 +487,10 @@ Ensure the default browser behavior of the `hidden` attribute.
   right: 2rem;
 }
 
+.tw-bottom-0 {
+  bottom: 0px;
+}
+
 .tw-m-8 {
   margin: 2rem;
 }
@@ -591,6 +595,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   height: fit-content;
 }
 
+.tw-h-screen {
+  height: 100vh;
+}
+
+.tw-h-12 {
+  height: 3rem;
+}
+
+.tw-h-16 {
+  height: 4rem;
+}
+
 .tw-w-full {
   width: 100%;
 }
@@ -651,10 +667,22 @@ Ensure the default browser behavior of the `hidden` attribute.
   align-items: center;
 }
 
+.tw-items-baseline {
+  align-items: baseline;
+}
+
+.tw-justify-end {
+  justify-content: flex-end;
+}
+
 .tw-justify-center {
   justify-content: center;
 }
 
+.tw-justify-between {
+  justify-content: space-between;
+}
+
 .tw-border-2 {
   border-width: 2px;
 }

diff --git a/src/ui/ControlPanel/ControlPanel.tsx b/src/ui/ControlPanel/ControlPanel.tsx
@@ -1,12 +1,18 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './ControlPanel.css';
 
 import Accordion from "react-bootstrap/Accordion";
 import Card from "react-bootstrap/Card";
+import Dropdown from "react-bootstrap/Dropdown";
 
 import { useTranslation } from 'react-i18next';
 import classnames from "classnames";
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faChevronLeft, faChevronRight
+} from '@fortawesome/free-solid-svg-icons';
+
 import { PageNav } from '../PageNav';
 import { ActionList } from '../ActionList';
 import { SettingsSection } from '../SettingsSection';
@@ -17,32 +23,49 @@ interface ControlPanelProps {
 
 export function ControlPanel(props: ControlPanelProps) {
   const { t } = useTranslation();
+  const [showContent, setShowContent] = useState(true);
 
   const { className } = props;
 
   return (
-    <div className={classnames("ControlPanel tw-sticky tw-top-0", className)}>
+    <div className={classnames("ControlPanel tw-sticky tw-top-0 tw-flex tw-flex-col tw-h-screen", className)}>
       {/* <Header /> */}
-      <PageNav className='tw-flex-col tw-mb-8'/>
-
-      <Accordion defaultActiveKey="0">
-        <Card>
-          <Accordion.Toggle as={Card.Header} eventKey="0">
-            {t('header.actionMenu')}
-          </Accordion.Toggle>
-          <Accordion.Collapse eventKey="0">
-            <ActionList />
-          </Accordion.Collapse>
-        </Card>
-        <Card>
-          <Accordion.Toggle as={Card.Header} eventKey="1">
-            {t('charsheet-tab.settings')}
-          </Accordion.Toggle>
-          <Accordion.Collapse eventKey="1">
-            <SettingsSection/>
-          </Accordion.Collapse>
-        </Card>
-      </Accordion>
+      { showContent && <PageNav className='tw-flex-col tw-mb-8'/> }
+
+      { 
+        showContent && <Accordion defaultActiveKey="0">
+          <Card>
+            <Accordion.Toggle as={Card.Header} eventKey="0">
+              {t('header.actionMenu')}
+            </Accordion.Toggle>
+            <Accordion.Collapse eventKey="0">
+              <ActionList />
+            </Accordion.Collapse>
+          </Card>
+          <Card>
+            <Accordion.Toggle as={Card.Header} eventKey="1">
+              {t('charsheet-tab.settings')}
+            </Accordion.Toggle>
+            <Accordion.Collapse eventKey="1">
+              <SettingsSection/>
+            </Accordion.Collapse>
+          </Card>
+        </Accordion>
+      }
+      <div className="tw-flex-1"></div>
+      <Dropdown.Item
+        as="button"
+        type="button"
+        data-original-title=""
+        title={t('header.open-database')}
+        onClick={() => setShowContent((prevState) => !prevState)}
+        className="tw-py-3 tw-text-lg tw-flex tw-justify-end tw-items-center tw-h-16"
+      >
+        { showContent && <span className='tw-mr-4'>{t('buttons.hide-panel')}</span> }
+        <FontAwesomeIcon
+          icon={showContent ? faChevronLeft : faChevronRight}
+        />
+      </Dropdown.Item>
     </div>
   );
 }