Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions components/SneakPeek.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,17 @@ export default function SneakPeek() {
&nbsp;&nbsp;&nbsp;&nbsp;<span className='text-gray-500'>{'//'} Your business logic here</span>
</div>
<div>
&nbsp;&nbsp;&nbsp;&nbsp;<span className='text-yellow-200'>console</span>{'.'}<span className='text-yellow-300'>log</span>{'('}<span className='text-teal-200'>{`\`Processing signup for \${message.displayName}\``}</span>{')'}{';'}
&nbsp;&nbsp;&nbsp;&nbsp;<span className='text-yellow-200'>console</span>
{'.'}
<span className='text-yellow-300'>log</span>
{'('}
<span className='text-teal-200'>
{'`Processing signup for '}
{'${'}message.displayName{'}'}
{'`'}
</span>
{')'}
{';'}
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
</div>
<div>&nbsp;&nbsp;{'}'}</div>
<div>{'}'}</div>
Expand Down Expand Up @@ -212,7 +222,10 @@ export default function SneakPeek() {
<div className='text-sm font-medium text-gray-700'>email</div>
<div>
<div className='font-bold text-green-500 text-sm'>
String{' '}<span className='ml-2 rounded bg-yellow-300 px-1.5 py-0.5 text-xs text-black font-normal'>email</span>
String{' '}
<span className='ml-2 rounded bg-yellow-300 px-1.5 py-0.5 text-xs text-black font-normal'>
email
</span>
</div>
<div className='text-xs text-gray-600 mt-1'>Email of the user</div>
</div>
Expand Down
35 changes: 17 additions & 18 deletions components/navigation/MobileNavMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,15 @@ export default function MobileNavMenu({
}

const { langMap } = i18nextConfig;
const sectionToggleButtonClass =
'inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400';
const otherLinkClass =
'mb-3 block rounded-lg px-3 py-2 text-base font-medium leading-6 text-gray-700 dark:text-gray-300';
const otherLinkHoverClass =
'transition-all duration-150 ease-in-out hover:bg-gray-100/60 dark:hover:bg-gray-700/40 hover:translate-x-1';
const languageButtonClass =
'mb-3 ml-2 block w-full rounded-lg px-3 py-2 text-start text-sm font-medium leading-6 transition-all duration-150';
const languageButtonHoverClass = 'ease-in-out hover:bg-gray-100/60 dark:hover:bg-gray-700/40 hover:translate-x-1';

return (
<div className='fixed inset-x-0 top-0 z-60 max-h-full origin-top-right overflow-y-auto py-2 transition lg:hidden animate-in fade-in slide-in-from-top-5 duration-300'>
Expand Down Expand Up @@ -104,9 +113,7 @@ export default function MobileNavMenu({
aria-expanded={open === 'learning'}
aria-label='Toggle Docs menu'
onClick={() => showMenu('learning')}
className={`inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400 ${
open === 'learning' ? 'rotate-180' : ''
}`}
className={`${sectionToggleButtonClass} ${open === 'learning' ? 'rotate-180' : ''}`}
>
<NavItemDropdown />
</button>
Expand All @@ -130,9 +137,7 @@ export default function MobileNavMenu({
aria-expanded={open === 'tooling'}
aria-label='Toggle Tools menu'
onClick={() => showMenu('tooling')}
className={`inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400 ${
open === 'tooling' ? 'rotate-180' : ''
}`}
className={`${sectionToggleButtonClass} ${open === 'tooling' ? 'rotate-180' : ''}`}
>
<NavItemDropdown />
</button>
Expand All @@ -156,9 +161,7 @@ export default function MobileNavMenu({
aria-expanded={open === 'community'}
aria-label='Toggle Community menu'
onClick={() => showMenu('community')}
className={`inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400 ${
open === 'community' ? 'rotate-180' : ''
}`}
className={`${sectionToggleButtonClass} ${open === 'community' ? 'rotate-180' : ''}`}
>
<NavItemDropdown />
</button>
Expand All @@ -179,22 +182,20 @@ export default function MobileNavMenu({
aria-expanded={open === 'others'}
aria-label='Toggle Others menu'
onClick={() => showMenu('others')}
className={`inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400 ${
open === 'others' ? 'rotate-180' : ''
}`}
className={`${sectionToggleButtonClass} ${open === 'others' ? 'rotate-180' : ''}`}
>
<NavItemDropdown />
</button>
</h4>
{open === 'others' && (
<div className='animate-in fade-in slide-in-from-top-2 duration-200'>
{otherItems.map((item: MenuItem, index: number) => (
{otherItems.map((item: MenuItem) => (
<Link
href={item.href}
key={item.href}
target={item.target || '_self'}
rel='noopener noreferrer'
className='mb-3 block rounded-lg px-3 py-2 text-base font-medium leading-6 text-gray-700 dark:text-gray-300 transition-all duration-150 ease-in-out hover:bg-gray-100/60 dark:hover:bg-gray-700/40 hover:translate-x-1'
className={`${otherLinkClass} ${otherLinkHoverClass}`}
data-testid='MobileNav-others'
>
{item.text}
Expand All @@ -217,9 +218,7 @@ export default function MobileNavMenu({
aria-expanded={open === 'language'}
aria-label='Toggle Language menu'
onClick={() => showMenu('language')}
className={`inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400 ${
open === 'language' ? 'rotate-180' : ''
}`}
className={`${sectionToggleButtonClass} ${open === 'language' ? 'rotate-180' : ''}`}
>
<NavItemDropdown />
</button>
Expand All @@ -230,7 +229,7 @@ export default function MobileNavMenu({
<button
key={lang.key}
onClick={() => changeLanguage(lang.value.toLowerCase(), true)}
className={`mb-3 ml-2 block w-full rounded-lg px-3 py-2 text-start text-sm font-medium leading-6 transition-all duration-150 ease-in-out hover:bg-gray-100/60 dark:hover:bg-gray-700/40 hover:translate-x-1 ${
className={`${languageButtonClass} ${languageButtonHoverClass} ${
currentLanguage.toLowerCase() === lang.text.toLowerCase()
? 'text-secondary-600 dark:text-secondary-400 bg-secondary-100/70 dark:bg-gray-700/50'
: 'text-gray-700 dark:text-gray-300'
Expand Down
Loading