NavigationBar Component

[Th1nkK1D]

View Figma file

Scope of work

• You don't need to add a link to each menu yet.
• The search function doesn't need to work yet. Only focus on the UI.
• Blue/Purple announcement banner is not a part of this issue

Starting point

• Create a new component with yarn gen:component
• Can develop the component in Histoire with yarn story:dev
• Logo is in /static/images/logo
• Don't start from scratch, take a look at Carbon's UI Shell

[kodaicoder]

Can I do tis one ? but may be will take some time on it first time using Carbon and as a contributor 😉

[Th1nkK1D]

Can I do tis one ? but may be will take some time on it first time using Carbon and as a contributor 😉

Sure! Take your time and feel free to ask if you have any questions 🙌

[kodaicoder]

Is I need to build a component on light theme too ? (white background , black text)

[kodaicoder]

It has so many buggy thing in UI Shell of Carbon component for Svelte

• alignment of magnify icon and closing icon is not on a vertical center

• even you setting a sidebar of header to 'false' it still showing (this wired bug is still showing on official demo site too )

• No Typedefs

• support only dark mode (for now)

may be I will considered to build it from scratch.

[Th1nkK1D]

Hmmm that worse than I expected 🥹

may be I will considered to build it from scratch.

That might be the best way to go but I think this issue will be too big. How much have you already done? Tomorrow I'll take a look again and try to split into several smaller issues. Then you can pick one part of it that will not be too big.

[kodaicoder]

I Just only implement main header with logo, side menu button and side navigation (doesn't completed yet)

17 here my pull request

[kodaicoder]

Side nav is 80% completed got stuck on where to put <hr> to act as divider in menu and have small movement issue occur on SideLinkMenu component while open/close a side nav , I will find a way to fixing it

[Th1nkK1D]

That's awesome! Don't hesitate to let me know if you struck somewhere.

One suggestion, can you put [WIP] in front of the PR title, meaning that it is still a work in progress? So that when you remove the WIP, I will know that I can review the PR. ;)

[kodaicoder]

I has created new PR already (#18) , side menu is finish but may be have some rough edged on code , please review on that again next I will try build a menu on desktop size.

[kodaicoder]

I fixed header nav and side menu to always shown if body is scrolled and adding feature to hide a header nav and side menu while user scrolling down and showing after user scrolling up, that mean even if user opening side menu and try scrolling down it will made deactivate side menu , if user want to open side menu again user need to scrolling up and press a side menu button again. PR ( #19 )

[Th1nkK1D]

Hi! your progress looks very promising. However, can you use only one PR for this issue? Because I'm not sure how to review separated PRs on the same component. Right now we have #17 and #18 which both refer to this issue. 🙏

[Th1nkK1D]

Is I need to build a component on a light theme too? (white background, black text)

Sorry, I missed this comment. You don't need to implement the theme. We won't change the theme on this project.

[kodaicoder]

Hi! your progress looks very promising. However, can you use only one PR for this issue? Because I'm not sure how to review separated PRs on the same component. Right now we have #17 and #18 which both refer to this issue. 🙏

sorry about duplicated PR on same component , at first I forget to create a new branch of component in my forked project (this is PR #17) and after that I has created a branch for the component (PR #19 (I cancel PR for #18 already))

I need to close PR #17 then ? So sorry it my first time doing co-project like this 🙏

[kodaicoder]

I don't sure is this allow I need to adding some config in vite.config.ts the config is to adding static folder to allow list using this code after plugin section

server: {
    fs: {
          allow: ['./static']
        }
} 

because if I don't do this while I using import logoLong from '/static/images/logo/pw-long-white.png'; this will return as a http error code 403 Restricted as image below

[Th1nkK1D]

because if I don't do this while I using import logoLong from '/static/images/logo/pw-long-white.png'; this will return as a http error code 403 Restricted as image below

I think it's because of the path. When the path starts with / it will look at the root of your computer, not the root of our project. Try to use the relative path that starts with the folder name or use ../ to go up from the current directory.

I guess that the file you are working in is in the folder src/components/NavigationBar to address the logo in the relative path you might want to use ../../../static/images/logo/pw-long-white.png

[Th1nkK1D]

I guess that the file you are working in is in the folder src/components/NavigationBar to address the logo in the relative path you might want to use ../../../static/images/logo/pw-long-white.png

My bad regarding the image issue. SvelteKit serves everything in the static folder at the root / when you run the dev server or build, but that is not the case with Histoire. In the commit 0573301789b01fb71ae3e1363534224ea3f3d0ee of the main branch, I config histoire to serve files in the static folder as well. So now you don't need to use import, you just set src="/images/logo/pw-long-white.png" and it's gonna work both in SveltKit and Histoire.

You can just add this line in your branch, cherry-pick, or merge from the main branch to get this function to work.

[kodaicoder]

Component is complete 🥳🥳🥳 please review it in PR

Thank you.

[Th1nkK1D]

Merged #19 🎉