Adapt website header for tablet version

[FelixMalfait]

We currently have two tools to build our website Twenty.com:

• Framer, which is well suited for beautiful landing pages
• A Next.js website which is used for pages that need dynamic content (e.g. pull github data or markdown files)

Example page managed by Framer: https://twenty.com/
Example page managed by NextJS: https://twenty.com/user-guide (it's ugly! and not launched. Will be redesigned soon!)

We've done a quick v1 for the header which you can see on the NextJS page.
We adapted it on mobile/desktop but not on tablet mode.
You can view how it should look on tablet mode on the framer https://twenty.com/ website.

The goal of this ticket is to copy the behavior of the Framer website on tablet and implement it on the NextJS version.

There is already some duplicated code between the mobile and desktop version. Maybe there's an opportunity to refactor and do something cleaner as we add that third display mode? Would be amazing if we find a way to reduce the amount of duplicated code

Code for NextJS website is in: https://github.com/twentyhq/twenty/tree/main/packages/twenty-website

[ahmadjafari86]

Hi Félix,
I'd like to work on this issue.

[FelixMalfait]

Thanks @ahmadjafari86 ahmadjafari86!

[Kanav-Arora]

Hi @ahmadjafari86

We have a PR down the line in which we are planning to introduce screensize hook in twenty-website. So to avoid any issues I'll be sharing the file path, name and code. Please use that hook to render different pages.

I'll be commit code in this PR #3984

[ahmadjafari86]

Thanks @Kanav-Arora

[Kanav-Arora]

Hi @ahmadjafari86
Check the PR for file useDeviceType file. Please follow same directory structure to avoid any merge conflicts in the future.

[FelixMalfait]

Hey we merged the PR but it turns out useDeviceType isn't a good solution. We should use https://emotion.sh/docs/media-queries#facepaint instead - fix coming soon

[FelixMalfait]

Ok the new method is finally merged - this is the best approach! #4169

[ahmadjafari86]

Ok the new method is finally merged - this is the best approach! #4169

thanks, It's done.