Feat: sidebar collapse test

CAFECA-IO · Sep 26, 2024 · 909e377 · 909e377
1 parent 5b13695
commit 909e377
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.2+20",
+  "version": "0.8.2+21",
   "private": false,
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/voucher/new_voucher_form.tsx b/src/components/voucher/new_voucher_form.tsx
@@ -109,7 +109,7 @@ const NewVoucherForm = () => {
           </p>
           <div
             onClick={typeToggleHandler}
-            className="relative flex items-center justify-between rounded-sm border border-input-stroke-input bg-input-surface-input-background px-12px py-10px hover:cursor-pointer"
+            className="relative flex items-center justify-between rounded-sm border border-input-stroke-input bg-input-surface-input-background px-12px py-10px hover:cursor-pointer hover:border-input-stroke-input-hover"
           >
             <p className="text-base text-input-text-input-filled">{translateType(type)}</p>
             <FaChevronDown size={20} />

diff --git a/src/pages/users/accounting/add_new_voucher.tsx b/src/pages/users/accounting/add_new_voucher.tsx
@@ -33,7 +33,7 @@ const AddNewVoucherPage = () => {
         This is header
       </div>
       <div
-        className={`fixed flex h-screen overflow-hidden ${isSidebarOpen ? 'w-280px' : 'w-0'} z-50 flex-col items-center justify-center bg-surface-neutral-surface-lv2 transition-all duration-300 ease-in-out`}
+        className={`${isSidebarOpen ? 'w-280px' : 'w-0'} fixed z-50 flex h-screen flex-col items-center justify-center overflow-hidden bg-surface-neutral-surface-lv2 transition-all duration-300 ease-in-out`}
       >
         This is sidebar
       </div>

diff --git a/src/pages/users/accounting/voucher_list.tsx b/src/pages/users/accounting/voucher_list.tsx
@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import Head from 'next/head';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
@@ -7,6 +8,8 @@ import VoucherListPageBody from '@/components/voucher/voucher_list_page_body';
 const VoucherListPage = () => {
   const { t } = useTranslation('common');
 
+  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
+
   return (
     <>
       <Head>
@@ -16,16 +19,29 @@ const VoucherListPage = () => {
         <title>{t('journal:VOUCHER.VOUCHER_LIST_PAGE_TITLE')} - iSunFA</title>
       </Head>
 
-      <div className="ml-280px bg-text-neutral-secondary p-20px text-center text-white">
+      <button
+        type="button"
+        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+        className="absolute top-0 bg-rose-300"
+      >
+        Sidebar Toggle
+      </button>
+
+      <div
+        className={`${isSidebarOpen ? 'ml-280px' : 'ml-0'} bg-text-neutral-secondary p-20px text-center text-white transition-all duration-300 ease-in-out`}
+      >
         This is header
       </div>
-
-      <div className="fixed flex h-screen w-280px flex-col items-center justify-center bg-surface-neutral-surface-lv2">
+      <div
+        className={`${isSidebarOpen ? 'w-280px' : 'w-0'} fixed z-50 flex h-screen flex-col items-center justify-center overflow-hidden bg-surface-neutral-surface-lv2 transition-all duration-300 ease-in-out`}
+      >
         This is sidebar
       </div>
 
       {/* Info: (20240920 - Julian) Body */}
-      <main className="flex w-screen flex-col overflow-y-auto bg-surface-neutral-main-background pl-280px font-barlow">
+      <main
+        className={`${isSidebarOpen ? 'pl-280px' : 'pl-0'} flex w-screen flex-col overflow-y-auto bg-surface-neutral-main-background font-barlow transition-all duration-300 ease-in-out`}
+      >
         <VoucherListPageBody />
       </main>
     </>

diff --git a/src/pages/users/asset/index.tsx b/src/pages/users/asset/index.tsx
@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import Head from 'next/head';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
@@ -7,6 +8,8 @@ import AssetListPageBody from '@/components/asset/asset_list_page_body';
 const AssetListPage = () => {
   const { t } = useTranslation('common');
 
+  const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
+
   return (
     <>
       <Head>
@@ -16,16 +19,29 @@ const AssetListPage = () => {
         <title>{t('asset:ASSET.ASSET_LIST_PAGE_TITLE')} - iSunFA</title>
       </Head>
 
-      <div className="ml-280px bg-text-neutral-secondary p-20px text-center text-white">
+      <button
+        type="button"
+        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+        className="absolute top-0 bg-rose-300"
+      >
+        Sidebar Toggle
+      </button>
+
+      <div
+        className={`${isSidebarOpen ? 'ml-280px' : 'ml-0'} bg-text-neutral-secondary p-20px text-center text-white transition-all duration-300 ease-in-out`}
+      >
         This is header
       </div>
-
-      <div className="fixed flex h-screen w-280px flex-col items-center justify-center bg-surface-neutral-surface-lv2">
+      <div
+        className={`${isSidebarOpen ? 'w-280px' : 'w-0'} fixed z-50 flex h-screen flex-col items-center justify-center overflow-hidden bg-surface-neutral-surface-lv2 transition-all duration-300 ease-in-out`}
+      >
         This is sidebar
       </div>
 
       {/* Info: (20240925 - Julian) Body */}
-      <main className="flex w-screen flex-col overflow-y-auto bg-surface-neutral-main-background pl-280px font-barlow">
+      <main
+        className={`${isSidebarOpen ? 'pl-280px' : 'pl-0'} flex flex-col overflow-y-auto bg-surface-neutral-main-background font-barlow transition-all duration-300 ease-in-out`}
+      >
         <AssetListPageBody />
       </main>
     </>