refactor: remove && and use ternary

[wit03]

          _:warning: Potential issue_

Prevent 'false' from appearing in className

When state.drawer is false, the expression ${state.drawer && 'bg-gray-50'} can result in the string 'false' being included in the className, which may cause unintended styling issues. To avoid this, use a ternary operator or a conditional class name utility to handle conditional classes correctly.

Apply this diff to fix the issue:

- className={`flex lg:hidden h-10 items-center gap-2 border  rounded-full px-3 py-2 cursor-pointer hover:bg-gray-100 ${
-   state.drawer && 'bg-gray-50'
- }`}
+ className={`flex lg:hidden h-10 items-center gap-2 border rounded-full px-3 py-2 cursor-pointer hover:bg-gray-100 ${
+   state.drawer ? 'bg-gray-50' : ''
+ }`}

Or, consider using the classnames library:

+ import classNames from 'classnames'
...
- className={`flex lg:hidden h-10 items-center gap-2 border  rounded-full px-3 py-2 cursor-pointer hover:bg-gray-100 ${
-   state.drawer && 'bg-gray-50'
- }`}
+ className={classNames(
+   'flex lg:hidden h-10 items-center gap-2 border rounded-full px-3 py-2 cursor-pointer hover:bg-gray-100',
+   { 'bg-gray-50': state.drawer }
+ )}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

              className={`flex lg:hidden h-10 items-center gap-2 border rounded-full px-3 py-2 cursor-pointer hover:bg-gray-100 ${
                state.drawer ? 'bg-gray-50' : ''
              }`}
            >

Originally posted by @coderabbitai[bot] in #46 (comment)