responsive website nav

[Dev-Zhao]

Created a responsive website nav that supports both light and dark mode.

Features:

• "Sign in/ Register" button which will change to a user profile image button when logged in. Clicking on it will show the user menu dropdown. The user menu dropdown will disappear automatically when some other part of the page is clicked.
• Nav link for current page is automatically highlighted

Most links don't work atm, they are just placeholder, same with the search.

[nathanielfernandes]

move images/assets to /static

[nathanielfernandes]

https://github.com/nathanielfernandes/cps630-project/blob/t2_Charlie/src/routes/%2Blayout.svelte#L50-L75

is just the regular js way of doing things, use svelte to get this done in a cleaner way

ex. https://svelte.dev/repl/af08522f04c74850959f00c978db00f7?version=3.29.0

[nathanielfernandes]

https://github.com/nathanielfernandes/cps630-project/blob/t2_Charlie/src/routes/%2Blayout.svelte#L29-L45

could you explain replace image with bad image is doing, as well as the handle profile image error

[Dev-Zhao]

https://github.com/nathanielfernandes/cps630-project/blob/t2_Charlie/src/routes/%2Blayout.svelte#L50-L75

is just the regular js way of doing things, use svelte to get this done in a cleaner way

ex. https://svelte.dev/repl/af08522f04c74850959f00c978db00f7?version=3.29.0

The point of the function is to hide the menu when something on the page is clicked that's not the menu or the menu trigger button. The method you linked doesn't do that.

[Dev-Zhao]

move images/assets to /static

done

[Dev-Zhao]

https://github.com/nathanielfernandes/cps630-project/blob/t2_Charlie/src/routes/%2Blayout.svelte#L29-L45

could you explain replace image with bad image is doing, as well as the handle profile image error

The point of using on:error is to replace a bad profile image (doesn't load) with the default one. It sometimes doesn't get called for the very first image load: https://github.com/sveltejs/kit/issues/8271

We utilize the use: directive to call the replaceBadImageWithDefault function after the image loads, and we check if the image actually loaded or not (loaded image width/height is 0). If not, we replace the bad image with the default one.

[nathanielfernandes]

• Bonnie Green is hardcoded as the user's name
• we have 2 nav tags being used
• where is /docs/images/people/profile-picture-3.jpg
• add this clickoutside directive instead https://svelte.dev/repl/0ace7a508bd843b798ae599940a91783?version=3.16.7 its more sveltey
• instead of adding and removing classes with js using the element, use the pattern

  <tag class:someclass={boolean_var} />

other than that, looks great

[Dev-Zhao]

• Bonnie Green is hardcoded as the user's name because there is no way to get the user's name atm.
• Two navs are being used because I made the navbar following the design show here: https://flowbite.com/blocks/marketing/header/
• /docs/images/people/profile-picture-3.jpg doesn't exist, it will be replaced with actual user's image when it's possible to get that from database. I have this bad placeholder just to show the functionality of changing bad image to a default image.
• clickoutside directive has been added.
  • Updated code to not add/remove classes with js, it's now using class: directive instead