feat: turn on mobile version

uigywnkiub · Jul 10, 2024 · d5d5abf · d5d5abf
1 parent cedf566
commit d5d5abf
Show file tree

Hide file tree

Showing 11 changed files with 174 additions and 186 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -37,3 +37,8 @@ input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
+#sidebar-toggle:checked ~ .flex > .fixed-no-scroll {
+  display: block;
+  width: 100%;
+}
diff --git a/app/mobile-temporarily-not-allowed/page.tsx b/app/mobile-temporarily-not-allowed/page.tsx
diff --git a/app/page.tsx b/app/page.tsx
@@ -140,7 +140,7 @@ export default async function Home({
           'flex items-center gap-1 text-default-300 hover:text-foreground'
 
         return (
-          <div key={date} className='mx-auto max-w-2xl px-2'>
+          <div key={date} className='mx-auto max-w-2xl'>
             <div className='flex items-center justify-between p-2 text-default-500'>
               <p className='text-sm text-default-300 hover:cursor-none hover:text-foreground'>
                 {date}

diff --git a/app/ui/balance-line.tsx b/app/ui/balance-line.tsx
@@ -24,23 +24,21 @@ function BalanceLine({ balance, currency, user }: TProps) {
   }
 
   return (
-    <div className='px-2'>
-      <Card className='p-2' shadow='none'>
-        <CardHeader className='flex items-center justify-between px-4'>
-          <p className='text-xs font-bold'>Hey {user?.name} 👋🏼</p>
-          <small
-            className='cursor-pointer select-none text-default-300'
-            onClick={onQuoteCopy}
-          >
-            <q ref={quoteRef}>{peaceOfMindQuotes[0]}</q>
-          </small>
-          <h4 className='text-lg font-bold'>
-            {getFormattedCurrency(balance)}{' '}
-            {currency?.code || DEFAULT_CURRENCY_CODE}
-          </h4>
-        </CardHeader>
-      </Card>
-    </div>
+    <Card className='p-2' shadow='none'>
+      <CardHeader className='flex items-center justify-between px-4'>
+        <p className='text-xs font-bold'>Hey {user?.name} 👋🏼</p>
+        <small
+          className='hidden cursor-pointer select-none text-default-300 md:block'
+          onClick={onQuoteCopy}
+        >
+          <q ref={quoteRef}>{peaceOfMindQuotes[0]}</q>
+        </small>
+        <h4 className='text-lg font-bold'>
+          {getFormattedCurrency(balance)}{' '}
+          {currency?.code || DEFAULT_CURRENCY_CODE}
+        </h4>
+      </CardHeader>
+    </Card>
   )
 }
 

diff --git a/app/ui/hoverables.tsx b/app/ui/hoverables.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useHover } from 'react-use'
 
 import Link from 'next/link'

diff --git a/app/ui/monthly-report.tsx b/app/ui/monthly-report.tsx
@@ -56,7 +56,7 @@ function MonthlyReport({ transactions, currency }: TProps) {
 
   if (filteredTransactions.length === 0) {
     return (
-      <div className='mx-auto max-w-3xl rounded-medium bg-content1 p-8'>
+      <div className='mx-auto max-w-3xl rounded-medium bg-content1 p-4 md:p-8'>
         <MonthPicker
           selectedDate={selectedDate}
           onDateSelection={onDateSelection}
@@ -73,14 +73,14 @@ function MonthlyReport({ transactions, currency }: TProps) {
     calculateMonthlyReportData(income, expense)
 
   return (
-    <div className='mx-auto max-w-3xl rounded-medium bg-content1 p-8'>
+    <div className='mx-auto max-w-3xl rounded-medium bg-content1 p-4 md:p-8'>
       <MonthPicker
         selectedDate={selectedDate}
         onDateSelection={onDateSelection}
       />
       <div className='mb-6 flex items-end justify-between'>
         <p className='text-2xl text-default-500'>{formattedDateRange}</p>
-        <div className='flex gap-8'>
+        <div className='flex gap-4 md:gap-8'>
           <div>
             <p className='text-sm text-default-500'>Total Income</p>
             <p className='flex items-center gap-1 text-2xl font-semibold'>

diff --git a/app/ui/search.tsx b/app/ui/search.tsx
@@ -101,21 +101,19 @@ export default function Search({
             title: 'text-center hover:opacity-hover',
           }}
         >
-          <div className='px-2'>
-            <Input
-              size='lg'
-              color='primary'
-              isClearable
-              placeholder={placeholder}
-              onClear={() => [onSearchChange(''), setSearchTerm('')]}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              defaultValue={searchTerm}
-              classNames={{
-                input: 'border-none focus:ring-0 placeholder:text-default-500',
-                inputWrapper: 'h-20 my-2 px-4',
-              }}
-            />
-          </div>
+          <Input
+            size='lg'
+            color='primary'
+            isClearable
+            placeholder={placeholder}
+            onClear={() => [onSearchChange(''), setSearchTerm('')]}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            defaultValue={searchTerm}
+            classNames={{
+              input: 'border-none focus:ring-0 placeholder:text-default-500',
+              inputWrapper: 'h-20 my-2 px-4',
+            }}
+          />
         </AccordionItem>
       </Accordion>
     </>

diff --git a/app/ui/sidebar/with-sidebar.tsx b/app/ui/sidebar/with-sidebar.tsx
@@ -1,34 +1,53 @@
+import { PiHamburger, PiHamburgerFill } from 'react-icons/pi'
+
+import { NAV_ICON_SIZE } from '@/config/constants/navigation'
+
+import { HoverableElement } from '../hoverables'
 import Navbar from './navbar'
 import User from './user'
 
+// const enum BURGER_SIZE {
+//   DEFAULT = '16px',
+//   MD = '32px',
+// }
+
 export default function WithSidebar({
   contentNearby,
 }: Readonly<{
   contentNearby: React.ReactNode
 }>) {
-  const linkWrapper = 'item-center flex w-56 flex-col items-start gap-4'
-  const contentWrapper = 'flex-1 overflow-auto p-8'
+  const linkWrapper =
+    'item-center flex flex-col items-start gap-4 w-full md:w-56'
+  const contentWrapper = 'flex-1 overflow-auto p-4 md:p-8'
 
   return (
     <div className='h-screen overflow-hidden'>
+      <input type='checkbox' id='sidebar-toggle' className='hidden' />
       <div className='flex h-full'>
-        <div className='fixed-no-scroll h-full w-64 flex-none'>
-          <div className='flex h-screen flex-col items-start justify-between p-6'>
-            <div className='flex flex-col gap-4 rounded-medium'>
-              <nav className={linkWrapper}>
-                <Navbar linksGroup='top' withLogo />
-              </nav>
-            </div>
-            <div>
-              <nav className={linkWrapper}>
-                <Navbar linksGroup='bottom' />
-                <User />
-              </nav>
-            </div>
+        <div className='fixed-no-scroll hidden h-full w-64 flex-none md:flex'>
+          <div className='flex h-screen flex-col items-start justify-between p-4 md:p-8'>
+            <nav className={linkWrapper}>
+              <Navbar linksGroup='top' withLogo />
+            </nav>
+            <nav className={linkWrapper}>
+              <Navbar linksGroup='bottom' />
+              <User />
+            </nav>
           </div>
         </div>
         <div className={contentWrapper}>{contentNearby}</div>
       </div>
+      <label
+        htmlFor='sidebar-toggle'
+        className='fixed right-[16px] top-[16px] z-10 cursor-pointer rounded-medium bg-background md:right-[32px] md:top-[32px] md:hidden'
+        // className={`fixed right-[${BURGER_SIZE.DEFAULT}] top-[${BURGER_SIZE.DEFAULT}] z-10 bg-background rounded-medium cursor-pointer md:right-[${BURGER_SIZE.MD}] md:top-[${BURGER_SIZE.MD}] md:hidden`}
+      >
+        <HoverableElement
+          element={<PiHamburger size={NAV_ICON_SIZE} />}
+          hoveredElement={<PiHamburgerFill size={NAV_ICON_SIZE} />}
+          withShift={false}
+        />
+      </label>
     </div>
   )
 }
diff --git a/app/ui/transaction-form-edit.tsx b/app/ui/transaction-form-edit.tsx
@@ -121,7 +121,7 @@ function TransactionFormEdit({ transaction }: TProps) {
   }
 
   return (
-    <form className='px-2' onSubmit={onSubmit}>
+    <form onSubmit={onSubmit}>
       <Switch
         isDisabled={isLoading}
         color='success'