Adds a layout for the app route group

[golddydev]

Make app layout (with responsiveness)

• main header
• sidebar

[golddydev]

Desktop

[mrgrauel]

I receive the following warnings in the console. I would highly recommend that we handle warnings as errors in the development process.

hook.js:608 Image with src "/logos/sokosumi-logo-black.svg" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.
Read more: https://nextjs.org/docs/api-reference/next/image#priority

dashboard:1 The resource http://localhost:3000/_next/static/css/app/layout.css?v=1741330991996 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

[golddydev]

I receive the following warnings in the console. I would highly recommend that we handle warnings as errors in the development process.

hook.js:608 Image with src "/logos/sokosumi-logo-black.svg" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.
Read more: https://nextjs.org/docs/api-reference/next/image#priority

dashboard:1 The resource http://localhost:3000/_next/static/css/app/layout.css?v=1741330991996 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

I am checking this warnings now

[golddydev]

I receive the following warnings in the console. I would highly recommend that we handle warnings as errors in the development process.

hook.js:608 Image with src "/logos/sokosumi-logo-black.svg" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.
Read more: https://nextjs.org/docs/api-reference/next/image#priority

dashboard:1 The resource http://localhost:3000/_next/static/css/app/layout.css?v=1741330991996 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

About preload warning: I just fixed. (caused by image src being "#")

About image priority issue: I am going to fix that in another PR which update logo components

[mrgrauel]

The logo should be in the sidebar according to the design specs.

[schaier-io]

we should componetize this

[golddydev]

Make this component simple using nav-menu and nav-link

[schaier-io]

lets also extract the component here

[golddydev]

I extracted nav-menu from main-nav and mobile-nav

[mrgrauel]

Should we implement a specific mobile design? As I understand it, we are focusing on a responsive design for desktop that should work reasonably well on mobile. However, there should not be an explicit mobile implementation.

[mrgrauel]

I would recommend to name it just header.tsx, because we are already in the (app) folder.

[golddydev]

The reason why I prefixed app before header and sidebar, is that
we have Sidebar (from shadcn), which makes name conflicts

So that is why I named it as app-sidebar

Well do you prefer the say import Sidebar as ShadcnSidebar?

[mrgrauel]

I see the issue with the Sidebar, that makes sense to name the export it as AppSidebar, but I would rename the folder.

Sorry but naming is for me important... I proposed a change how I think it makes it clear to understand even in 6 months.

Rename AppHeader to Header -> 7734386
Rename app-sidebar folder to sidebar -> 57a2704

What do you think? Any opinion about these changes?

[golddydev]

Okay, then Let's stick to that convention.

Never prefix components folder or exported name with parent folder

Then we can use import as and default export Sidebar instead of AppSidebar

[mrgrauel]

Also the folder app-sidebar should just be named sidebar, doesn't it? Same idea as with the app-header.tsx renaming to header.tsx.

[golddydev]

Should we implement a specific mobile design? As I understand it, we are focusing on a responsive design for desktop that should work reasonably well on mobile. However, there should not be an explicit mobile implementation.

I don't implement any specific mobile design.

If you are talking about mobile-nav, that is for responsive.

Main nav is top sticky nav bar,
mobile nav is drawer from right side.