Skip to content

Commit

Permalink
feat: turn on mobile version (#9)
Browse files Browse the repository at this point in the history
uigywnkiub authored Jul 10, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent cedf566 commit fab7cfe
Showing 11 changed files with 174 additions and 186 deletions.
5 changes: 5 additions & 0 deletions app/globals.css
Original file line number Diff line number Diff line change
@@ -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%;
}
26 changes: 0 additions & 26 deletions app/mobile-temporarily-not-allowed/page.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion app/page.tsx
Original file line number Diff line number Diff line change
@@ -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}
32 changes: 15 additions & 17 deletions app/ui/balance-line.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}

2 changes: 2 additions & 0 deletions app/ui/hoverables.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
'use client'

import { useHover } from 'react-use'

import Link from 'next/link'
6 changes: 3 additions & 3 deletions app/ui/monthly-report.tsx
Original file line number Diff line number Diff line change
@@ -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'>
28 changes: 13 additions & 15 deletions app/ui/search.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
49 changes: 34 additions & 15 deletions app/ui/sidebar/with-sidebar.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
2 changes: 1 addition & 1 deletion app/ui/transaction-form-edit.tsx
Original file line number Diff line number Diff line change
@@ -121,7 +121,7 @@ function TransactionFormEdit({ transaction }: TProps) {
}

return (
<form className='px-2' onSubmit={onSubmit}>
<form onSubmit={onSubmit}>
<Switch
isDisabled={isLoading}
color='success'
200 changes: 99 additions & 101 deletions app/ui/transaction-form.tsx
Original file line number Diff line number Diff line change
@@ -85,109 +85,107 @@ function TransactionForm({ currency }: TProps) {
title: 'text-center hover:opacity-hover',
}}
>
<div className='px-2'>
<Switch
isDisabled={pending}
color='success'
name='isIncome'
value='isIncome'
aria-label='Income Switch'
onValueChange={(isSelected) => setIsSwitchedOn(isSelected)}
>
Income
</Switch>
<Input
isDisabled={pending}
isRequired
type='text'
name='description'
aria-label='Description'
required
size='lg'
color={isSwitchedOn ? 'success' : 'danger'}
placeholder={
isSwitchedOn
? 'Type income transaction...'
: 'Type expense transaction...'
}
classNames={{
input: 'border-none focus:ring-0 placeholder:text-default-500',
inputWrapper: 'h-20 my-2 px-4',
}}
endContent={
<Input
isRequired
type='text'
name='amount'
aria-label='Amount'
value={amount}
onChange={onChangeAmount}
required
maxLength={AMOUNT_LENGTH + 1}
// pattern='\d+'
pattern='[\d\s,]+'
inputMode='decimal'
placeholder='0'
size='lg'
classNames={{
input:
'border-none focus:ring-0 placeholder:text-default-500 text-center',
inputWrapper: 'h-12 w-full px-4',
base: 'w-36',
}}
endContent={
<div className='pointer-events-none flex items-center'>
<span className='text-md text-lg text-default-500'>
{currency?.sign || DEFAULT_CURRENCY_SIGN}
</span>
</div>
}
/>
}
/>
<div className='flex justify-between'>
<div className='flex items-center gap-2'>
<div className='flex w-full flex-wrap gap-4 md:flex-nowrap'>
<Select
isDisabled={pending}
name='category'
label='Select a category'
className='w-56'
items={categories}
defaultSelectedKeys={[DEFAULT_CATEGORY]}
>
{categories.map((category, idx, arr) => (
<SelectSection
key={category.target}
showDivider={idx !== arr.length - 1}
title={category.target}
>
{category.items.map((item) => (
<SelectItem key={item.name}>
{`${item.emoji} ${item.name}`}
</SelectItem>
))}
</SelectSection>
))}
</Select>
</div>
</div>
<div className='flex items-center'>
<p className='text-sm text-default-500'>
Press{' '}
<Button
aria-label='Enter'
type='submit'
isDisabled={!amount || amount === '0' || pending}
className='cursor-pointer bg-background px-0'
size='sm'
>
<Kbd keys={['enter']}>Enter</Kbd>
</Button>{' '}
to Add Transaction
</p>
<Switch
isDisabled={pending}
color='success'
name='isIncome'
value='isIncome'
aria-label='Income Switch'
onValueChange={(isSelected) => setIsSwitchedOn(isSelected)}
>
Income
</Switch>
<Input
isDisabled={pending}
isRequired
type='text'
name='description'
aria-label='Description'
required
size='lg'
color={isSwitchedOn ? 'success' : 'danger'}
placeholder={
isSwitchedOn
? 'Type income transaction...'
: 'Type expense transaction...'
}
classNames={{
input: 'border-none focus:ring-0 placeholder:text-default-500',
inputWrapper: 'h-20 my-2 px-4',
}}
endContent={
<Input
isRequired
type='text'
name='amount'
aria-label='Amount'
value={amount}
onChange={onChangeAmount}
required
maxLength={AMOUNT_LENGTH + 1}
// pattern='\d+'
pattern='[\d\s,]+'
inputMode='decimal'
placeholder='0'
size='lg'
classNames={{
input:
'border-none focus:ring-0 placeholder:text-default-500 text-center',
inputWrapper: 'h-12 w-full px-4',
base: 'w-36',
}}
endContent={
<div className='pointer-events-none flex items-center'>
<span className='text-md text-lg text-default-500'>
{currency?.sign || DEFAULT_CURRENCY_SIGN}
</span>
</div>
}
/>
}
/>
<div className='flex justify-between'>
<div className='flex items-center gap-2'>
<div className='flex w-full flex-wrap gap-4 md:flex-nowrap'>
<Select
isDisabled={pending}
name='category'
label='Select a category'
className='w-56'
items={categories}
defaultSelectedKeys={[DEFAULT_CATEGORY]}
>
{categories.map((category, idx, arr) => (
<SelectSection
key={category.target}
showDivider={idx !== arr.length - 1}
title={category.target}
>
{category.items.map((item) => (
<SelectItem key={item.name}>
{`${item.emoji} ${item.name}`}
</SelectItem>
))}
</SelectSection>
))}
</Select>
</div>
</div>
<div className='flex items-center'>
<p className='text-sm text-default-500'>
Press{' '}
<Button
aria-label='Enter'
type='submit'
isDisabled={!amount || amount === '0' || pending}
className='cursor-pointer bg-background px-0'
size='sm'
>
<Kbd keys={['enter']}>Enter</Kbd>
</Button>{' '}
to Add Transaction
</p>
</div>
</div>
</AccordionItem>
</Accordion>
8 changes: 1 addition & 7 deletions middleware.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { type NextRequest, NextResponse, userAgent } from 'next/server'
import { type NextRequest, NextResponse } from 'next/server'

import { auth } from '@/auth'

@@ -7,12 +7,6 @@ import { ROUTE } from './config/constants/routes'

export default auth((req: NextRequest & { auth: TSession }) => {
const url = req.nextUrl.clone()
const { device } = userAgent(req)

if (device.type === 'mobile') {
url.pathname = ROUTE.MOBILE_TEMPORARILY_NOT_ALLOWED
return NextResponse.rewrite(url)
}

if (!req.auth) {
url.pathname = ROUTE.SIGNIN

0 comments on commit fab7cfe

Please sign in to comment.