Svelte routes +page/+layout and src/lib/components

I'm messing around with portfolio ideas and am trying to figure out how to get the damn navbar links to work, so far it's driven me mad for about an hour after googling, chatgpting, svelte docs etc.. https://www.sveltelab.dev/5lyuqf6riwp4az3 What am I after: When you load the site, PageLoad is what appears. Click on about -> routes/about appears. Same thing for contact, and projects. I feel like I need to put the navbar into +layout.svelte, but then the styling in PageLoad.svelte is pointless as it's targetting anything, so I'd need to move that into global.css, then I'd need to add classes/ids because it's basic targeting.. aaaaaand yeah... fml.
SvelteLab
SvelteLab
A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.
130 Replies
ghostmonkey
ghostmonkeyā€¢12mo ago
what's your thinking on making a pageload component, versus just having a +page.svelte in the root src folder? and not using a component to create the navigation?
CDL
CDLā€¢12mo ago
lack of experience, knowledge and brain power šŸ˜„ on my vscode I have changed the component to a route folder/file instead
ghostmonkey
ghostmonkeyā€¢12mo ago
have you read about <slot /> ?
CDL
CDLā€¢12mo ago
yeah it's to render the content right?
ghostmonkey
ghostmonkeyā€¢12mo ago
what I would suggest is, start from scratch with a fresh svelte project. Then setup only the +layout.svetle and +page.svelte and add a title or a color or two, to see the page, and then start from there I usually make a header component, and then inside that I add my navigation or if it's a complex page, I add primary / secondary navigation components etc but think of that initial page.svelte as just the landing page minus header / footer as your mental model then import header and footer in the layout and the slot in between them
CDL
CDLā€¢12mo ago
I feel like I need to go look at a few sveltekit build examples to understand this lol I imagine routes/+page.svelte would be the default page, then +layout.svelte is used for importing props etc..? components, not props* react brain
ghostmonkey
ghostmonkeyā€¢12mo ago
have you installed the svelte demo or only the skeleton version? If you install the demo, you can see how they do the default nav and body content and that is basically what you will end up doing 90% of the time so just see how the demo does it, and use a similar pattern for your portfolio
CDL
CDLā€¢12mo ago
skeleton only, I'll go look at the demo now, thanks ghost
ghostmonkey
ghostmonkeyā€¢12mo ago
yeah, the demo is a great way to see a heder and counter component and it has a few routes on it and you can use that to help setup your portfolio
CDL
CDLā€¢12mo ago
great thanks, checking it out now
ghostmonkey
ghostmonkeyā€¢12mo ago
šŸ‘ also, and I'm sure you've already checked him out, but Joy of Code has a ton of just really great Svelte tutorials on youtube I can't recommend his work enough, it's a fantastic way to learn the framework
ghostmonkey
ghostmonkeyā€¢12mo ago
CDL
CDLā€¢12mo ago
yeah b1 mentions him a fair bit I just haven't sat there and gone through it. Honestly I thought I was doing ok up until the page transitioning hahaha, good to know though, the demo is nice, already helped a bit. I'll check out Joy and give one of his walk-throughs a shot I just get confused over what goes in components, what goes in the routes/+page.svelte, what goes in routes/+layout.svelte, it all feels... sameish,,
ghostmonkey
ghostmonkeyā€¢12mo ago
it took me a bit to make the transition you are making now from vanilla to framework it's just about reshaping your mental model a bit, but it gets more obvious with each project and you will pick it up quicker than you think
CDL
CDLā€¢12mo ago
Yeah I think so. I've got the layout bit sorted (the file structure) thanks to the demo, I just need to work on this nav routing and I'll be happy to move on lol
ghostmonkey
ghostmonkeyā€¢12mo ago
(and then you will make some cool stuff and feel like you are finally understanding it, and then all these damn svelte ninjas' will do stuff you can't even comprehend yet, šŸ˜„ )
CDL
CDLā€¢12mo ago
it seems to just add the +page.svelte i click onto the bottom corner, rather than swapping to it, but I think I can work that out after some reading
ghostmonkey
ghostmonkeyā€¢12mo ago
everytime I feel good about what I know, I realise I don't know anything ehehe
CDL
CDLā€¢12mo ago
Hahaha yeah, for sure I'm there atm at the beginning live and learn! šŸ˜„ in case anyone wants to know what I mean by "the section appears and doesn't replace the page" https://www.sveltelab.dev/5lyuqf6riwp4az3
ghostmonkey
ghostmonkeyā€¢12mo ago
think of it like, in your layout you are calling 2 components, the header and the slot so when you click on about or project, that is affecting the slot but it doesn't affect anything you have in the header since all your pages are blank except for about, it just renders the header but if you click on about, it puts that in the slot underneath the header
CDL
CDLā€¢12mo ago
Oh I see.. so wouldnt I want this Header.svelte to also be in the slot?
ghostmonkey
ghostmonkeyā€¢12mo ago
well typically, if you wanted a top navigation bar, that was always visible on your page
CDL
CDLā€¢12mo ago
I say header.svelte, really it's just the initial loading page. when I click on other tabs the navbar will move to the top like a normal one
ghostmonkey
ghostmonkeyā€¢12mo ago
you would use the header for that then when you clicked about or projects etc, it would update the body but leave the navigation at the top with your current layout, I would say you want to just move all of that into the page.svelte, if you want it to be overwritten by the content in the other sections when people click thelinks my suggestion would be, for the first iteration, to create the actual nav bar that would appear on all the pages (except the landing page) in the header
CDL
CDLā€¢12mo ago
https://www.sveltelab.dev/5lyuqf6riwp4az3 is the reason it's vanishe due to styling?
ghostmonkey
ghostmonkeyā€¢12mo ago
and then move your landing page content into the page.svelte
b1mind
b1mindā€¢12mo ago
You want your nav to be in layout, then pages get swapped inside the slot Layout is like a template for every page, so anything you want to appear for every page you want it there. Like header and footers
dlongodev
dlongodevā€¢12mo ago
Hey I'm working on a Sveltekit project, this helps me a lot! https://sveltebyexample.com/
CDL
CDLā€¢12mo ago
Ah b1 I think I get you? so you have the nav in layout, but when you change page, the layout of that nav changes depending on which page you navigate to, is that right?
b1mind
b1mindā€¢12mo ago
No
CDL
CDLā€¢12mo ago
back to my hole i go
b1mind
b1mindā€¢12mo ago
The nav is one thing It lives and is mounted in layout ( inside a header component or not) Then when you navigate to a new route the slot is only things that updates You can have +layouts in sub routes too, and would be a template for those sub routes (not to complicate but maybe it helps you understand)
dlongodev
dlongodevā€¢12mo ago
When you put a route inside parenthesis and add a layout inside, you're basically creating a separate layout for that route
CDL
CDLā€¢12mo ago
wow I really need to go read the tutorial again, I don't remember any of this šŸ¤£
b1mind
b1mindā€¢12mo ago
He's not doing params You only need to do that if your using the params to load data
dlongodev
dlongodevā€¢12mo ago
No description
dlongodev
dlongodevā€¢12mo ago
oh gotcha
b1mind
b1mindā€¢12mo ago
Oh named layouts
CDL
CDLā€¢12mo ago
thanks all, I'll look into the demo version in more depth and re-read the tut on layouts/routes and get back to this
dlongodev
dlongodevā€¢12mo ago
Joy of Code has a really good tutorial on Layouts they can be really tricky
b1mind
b1mindā€¢12mo ago
Really glad I pushed him to get into Svelte eh šŸ˜‰ >.>;;
CDL
CDLā€¢12mo ago
šŸ˜„
b1mind
b1mindā€¢12mo ago
Svelte be like give me more
dlongodev
dlongodevā€¢12mo ago
Take a look at skeleton UI too
dlongodev
dlongodevā€¢12mo ago
https://github.com/dlongodev/FMK-svelte I'm redoing a React project into Svelte just for fun
GitHub
GitHub - dlongodev/FMK-svelte
Contribute to dlongodev/FMK-svelte development by creating an account on GitHub.
b1mind
b1mindā€¢12mo ago
haha miss me with that but yea CDL's been down that hole Welp I'm back in the weeds of my own issues šŸ‘‹
dlongodev
dlongodevā€¢12mo ago
Me tooo
CDL
CDLā€¢12mo ago
yeah ill avoid skeleton ui for a bit lmao, i need to get comfortable with the basic structure of kit before I look into aaaanything else
dlongodev
dlongodevā€¢12mo ago
Good answer! In my job we're refactoring VisualBasic.net into Svelte, I only worked with React in the past, so I'm excited about Svelte5
b1mind
b1mindā€¢12mo ago
hah love to hear it I mean more that your team is picking Svelte but yea 5 will be some interesting changes, looking forward to playing with the beta now.
CDL
CDLā€¢12mo ago
humms.. so I kinda have it working, but obviously the navbar doesn't change when I click between the pages because it's imported into layout as that giant ass middle of the page navbar I don't think it's possible for me to re-style the navbar in the other pages without re-inputting the nav code into each +page so that I can css target it, so I need to think of the other way of doing this, as there absolutely has to be another way
b1mind
b1mindā€¢12mo ago
Why are you restyling the navbar? but you would have a conditional in it that uses the path which you have access to from SvelteKit stores
CDL
CDLā€¢12mo ago
as in, on the homepage, navbar is in middle. on other pages, navbar moves to the standard top/sidebar ah, stores. lemme check out stores
b1mind
b1mindā€¢12mo ago
So you mean kinda like mine? I just use two different navs xD
CDL
CDLā€¢12mo ago
uhh lemme see oh wtf I thought I was being unique here, have I litreally just copied your page? šŸ¤£ šŸ¤£
b1mind
b1mindā€¢12mo ago
I mean my first nav is my home page then the rest use the normal nav/subnav I guess I did use a conditional on the layout though
CDL
CDLā€¢12mo ago
hmmm ok
b1mind
b1mindā€¢12mo ago
been so long and I did it on stream so its kinda a mess lol https://github.com/b1mind/bfolio/blob/dev/src/routes/%2Blayout.svelte I also had playground pages so I opened it up to allow me to add them so its a little overt you could just use
{#if $page.url.pathname === '/'}
{#if $page.url.pathname === '/'}
or something lol I mean no such thing as a original idea
CDL
CDLā€¢12mo ago
I was dicking around on photoshop and went "actually, this would be dope for the background of my page" lol like the demo app.
<ul>
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
<a href="/">Home</a>
</li>
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
<a href="/about">About</a>
</li>
<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
<a href="/sverdle">Sverdle</a>
</li>
</ul>
<ul>
<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
<a href="/">Home</a>
</li>
<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
<a href="/about">About</a>
</li>
<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
<a href="/sverdle">Sverdle</a>
</li>
</ul>
b1mind
b1mindā€¢12mo ago
Well they are doing it for the current page to style the link but yea
CDL
CDLā€¢12mo ago
the more I look into this the more this navbar doesn't look ideal, but it's just cool, so I kinda wanna make it work lol ah I see how you've done yours.. interesting the difference in code complexity is quite astouding, you're a good 2-3years ahead of me šŸ˜‚ nice reality check
b1mind
b1mindā€¢12mo ago
I'm used to HTML templating away from Svelte too though. But yea I've been using it now for 4 years? gotta remember I've built websites lots of different ways too šŸ˜„ so all that xp adds up. (thank god no React brain here)
CDL
CDLā€¢12mo ago
true, lots of different concepts learned that you can take bits and pieces from and mould etc..
b1mind
b1mindā€¢12mo ago
I mean I started templating back long time ago too My minds always worked in "components" too I don't hold strong wording to things. So I find relationships between things really easy to help me understand. Like even how I write SCSS scoped to a class is basically writting styles for a component xD Also idk if my folio is a great example of good code lol probably closer to production code though, cause I was time limited and did it on stream haha (the reality that codes never prefect first go around) I'd refactor so much of it if I was to work on it today probably xD
CDL
CDLā€¢12mo ago
your site is one of the cleaner ones I've viewed tbh mate just enough animation/transition to not piss me off lol
b1mind
b1mindā€¢12mo ago
thanks! I see it as unfinished, lots of what I wanted I didn't get working yet.
CDL
CDLā€¢12mo ago
I wonder if it's possible for me to put an if statement for this header.. like.. if I navigate to homepage -> show the header + slot, if I navigate anywhere else -> just show slot, hide header
b1mind
b1mindā€¢12mo ago
I just added the faux View Transitions for /projects page cause I was bored but not happy with it really. So my code is exactly this but opposite
CDL
CDLā€¢12mo ago
ah so your header is the actual header, makes sense
b1mind
b1mindā€¢12mo ago
hides Header/Footer on the set paths so only the +page.svelte is there really xD cause its just <slot>
CDL
CDLā€¢12mo ago
if I can figure out how to do that in my code, then I'm sorted, I think
b1mind
b1mindā€¢12mo ago
{#if path === '/'}
<slot/>
{:else}
<Header />
<slot/>
{/if}
{#if path === '/'}
<slot/>
{:else}
<Header />
<slot/>
{/if}
šŸ˜‰
CDL
CDLā€¢12mo ago
I wish it were that simple, page isn't defined, I haven't used stores yet šŸ˜›
b1mind
b1mindā€¢12mo ago
import { page } from '$app/stores' make sure you import the store that one is stupid handy šŸ˜„ but Kit provides the stores for you you don't have to make them
CDL
CDLā€¢12mo ago
weirdly enough, that doesn't work but when I read it, it makes complete sense guess im debugging!
b1mind
b1mindā€¢12mo ago
mmm you might need it reactive $: path = $page.url.pathname then check path ahh I can't save your labs? šŸ¤”
CDL
CDLā€¢12mo ago
I'm trying multiple things here, even chatgpt said the code is right (always a last resort for me)
b1mind
b1mindā€¢12mo ago
ChatGPT knows dick all for Svelte don't ask it its worthless
CDL
CDLā€¢12mo ago
oh I know, I just pinged it in there to see what it spits out and it said "this should work" lmao ill try upload it all to labs again
CDL
CDLā€¢12mo ago
SvelteLab
SvelteLab
A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.
b1mind
b1mindā€¢12mo ago
No description
b1mind
b1mindā€¢12mo ago
you just didn't update the if to use path
CDL
CDLā€¢12mo ago
I mean, it shows the other pages, but the gigantic navbar stays where it is
b1mind
b1mindā€¢12mo ago
cause its in your layout šŸ˜„ Think about it for a sec
CDL
CDLā€¢12mo ago
It's not hold on
b1mind
b1mindā€¢12mo ago
it is in this lab
CDL
CDLā€¢12mo ago
the navbar is only coded in Header.svelte, in +layout it's only mentioned inside the if conditional
b1mind
b1mindā€¢12mo ago
Its working as it should though Just need to clean up how you have it
CDL
CDLā€¢12mo ago
so the way I read this is, if the path is '/' then it only shows <slot />, otherwise it shows <Header /> and <slot /> but it seems to show <Header /> no matter what, or am I being stupid
b1mind
b1mindā€¢12mo ago
I mean it does not help they are styled the same so xD
CDL
CDLā€¢12mo ago
It's only styled in Header.svelte though isnt it? the only styling in layout is for the background which is an svg
b1mind
b1mindā€¢12mo ago
You style it on +page.svelte and Header its the exact same nav
CDL
CDLā€¢12mo ago
+page.svelte is empty on my vscode, still shows Header no matter waht my mind is blown. šŸ¤£
b1mind
b1mindā€¢12mo ago
No description
b1mind
b1mindā€¢12mo ago
I change the Header styles and yea its working as intended
CDL
CDLā€¢12mo ago
wtf
b1mind
b1mindā€¢12mo ago
No description
b1mind
b1mindā€¢12mo ago
root which is only pulling route/+page.svelte
b1mind
b1mindā€¢12mo ago
No description
b1mind
b1mindā€¢12mo ago
and how its showing the {:else}
CDL
CDLā€¢12mo ago
where are you changing the style? in my vsc I only have the header styled in Header.svelte, the pages are all empty with styles
b1mind
b1mindā€¢12mo ago
But that makes no sense to what you are wanting right? Your lab is right xD
CDL
CDLā€¢12mo ago
are you importing the Header into the +page files then styling it?
b1mind
b1mindā€¢12mo ago
All I did was change the styles in Header mate so we could see the change happen Look at the lab you sent not your vscode it works šŸ˜„
CDL
CDLā€¢12mo ago
we have different versions of the lab I think, I must have changed it after I sent it to you
No description
b1mind
b1mindā€¢12mo ago
Same thing šŸ˜„ So look at route/+page.svelte you have a nav and you duplicate the bg you have on layout
CDL
CDLā€¢12mo ago
No description
CDL
CDLā€¢12mo ago
lol you can see my confusion
b1mind
b1mindā€¢12mo ago
No description
b1mind
b1mindā€¢12mo ago
xD
CDL
CDLā€¢12mo ago
what in the fuck is going on
b1mind
b1mindā€¢12mo ago
close any tabs of it you have open maybe?
CDL
CDLā€¢12mo ago
closed and re-opened and yeah, how bizarre, I just saved it like 30x with nothing in +page mmm...
b1mind
b1mindā€¢12mo ago
Also never use margin for position
CDL
CDLā€¢12mo ago
bodge job, forgot how to do it properly
b1mind
b1mindā€¢12mo ago
I'm wincing everytime I look at this you even use grid xD
CDL
CDLā€¢12mo ago
it's called throwing shit at a wall until it sticks šŸ’€
b1mind
b1mindā€¢12mo ago
hahah fair
CDL
CDLā€¢12mo ago
nah tbh I was so focused on this nav that I didn't bother fixing anything else
b1mind
b1mindā€¢12mo ago
I'm just giving you a hard time xD
CDL
CDLā€¢12mo ago
hmm so you cahnged the styles in header.svelte? because uhh.. I have the same issue happening It's midnight so maybe I'm just being an absolute moron
b1mind
b1mindā€¢12mo ago
yea just change header styles cause you are just changing things but with the same styles so yea can't tell xD
CDL
CDLā€¢12mo ago
Ah, I have the new nav on /, but the big nav on /contact /about /projects nvm, it works wow my brain.
b1mind
b1mindā€¢12mo ago
šŸ‘ its just called learning new concepts are some the harder things in coding so You have never done layouts or slots before šŸ˜„
CDL
CDLā€¢12mo ago
It all makes perfect sense now I'm reading it I just need a home button on the new nav so I can get back to my homeland, and I'm fine appreciate the patience b1
b1mind
b1mindā€¢12mo ago
ofc mate! Happy to help a convert šŸ˜‚ Typically a logo/name
CDL
CDLā€¢12mo ago
yeah ill make a little favicon or something margin removed šŸ˜Ž
Want results from more Discord servers?
Add your server