Part A on Release0.4

Next.js is another open-source React based front-end development framework. My release0.4 task is writing header component for Telescope via Next.js. Because of the preparation for final exams, release0.4 is postponed to this week.

Like React, to add header for all pages, I design a header component. Next.js simplifies the syntax. We can use HTML elements directly in the rendering.

The hard part is Next.js build-in CSS. In Telescope, we use Gatsby and @material-ui to facilitate the design of user interface. Now, we need to migrate the project front-end to Next.js, I am not sure if we will still use @material-ui. Therefore, I create a file Header.module.css . My Header.js component imports styles from this stylesheet.

The biggest problem of CSS is sometime the issue is not caused by what you write. For example, I spend a lot of time to solve a margin problem as shown. Eventually, I realize that this is a padding setting in it’s parent component Home.module.css.

Now, the desktop header looks like:

I submit this approach as a partial solution of issue#1446. The reason is that I am not sure whether we need to use @material-ui or not. I want to check if the design is in the right way.

For Mobile version header, I am using @media breakpoint to implement the feature. I will talk about it in my next blog.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s