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
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?
lack of experience, knowledge and brain power
š
on my vscode I have changed the component to a route folder/file instead
have you read about <slot /> ?
yeah it's to render the content right?
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
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
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
skeleton only, I'll go look at the demo now, thanks ghost
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
great thanks, checking it out now
š
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
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,,
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
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
(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, š )
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
everytime I feel good about what I know, I realise I don't know anything ehehe
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
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
Oh I see.. so wouldnt I want this Header.svelte to also be in the slot?
well typically, if you wanted a top navigation bar, that was always visible on your page
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
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
https://www.sveltelab.dev/5lyuqf6riwp4az3 is the reason it's vanishe due to styling?
and then move your landing page content into the page.svelte
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
Hey I'm working on a Sveltekit project, this helps me a lot! https://sveltebyexample.com/
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?
No
back to my hole i go
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)
When you put a route inside parenthesis and add a layout inside, you're basically creating a separate layout for that route
wow I really need to go read the tutorial again, I don't remember any of this š¤£
He's not doing params
You only need to do that if your using the params to load data
oh gotcha
Oh named layouts
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
Joy of Code has a really good tutorial on Layouts
they can be really tricky
Really glad I pushed him to get into Svelte eh š
>.>;;
š
Svelte be like give me more
Take a look at skeleton UI too
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.
haha miss me with that but yea CDL's been down that hole
Welp I'm back in the weeds of my own issues š
Me tooo
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
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
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.
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
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
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
So you mean kinda like mine?
I just use two different navs xD
uhh lemme see
oh wtf I thought I was being unique here, have I litreally just copied your page? š¤£ š¤£
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
hmmm ok
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 or something
lol I mean no such thing as a original idea
I was dicking around on photoshop and went "actually, this would be dope for the background of my page"
lol
like the demo app.
Well they are doing it for the current page to style the link but yea
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
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)
true, lots of different concepts learned that you can take bits and pieces from and mould etc..
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
your site is one of the cleaner ones I've viewed tbh mate
just enough animation/transition to not piss me off lol
thanks! I see it as unfinished, lots of what I wanted I didn't get working yet.
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
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
ah so your header is the actual header, makes sense
hides Header/Footer on the set paths
so only the +page.svelte is there really xD
cause its just <slot>
if I can figure out how to do that in my code, then I'm sorted, I think
š
I wish it were that simple, page isn't defined, I haven't used stores yet
š
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 themweirdly enough, that doesn't work
but when I read it, it makes complete sense
guess im debugging!
mmm you might need it reactive
$: path = $page.url.pathname
then check path
ahh I can't save your labs? š¤I'm trying multiple things here, even chatgpt said the code is right (always a last resort for me)
ChatGPT knows dick all for Svelte don't ask it
its worthless
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
SvelteLab
SvelteLab
A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.
you just didn't update the if to use path
I mean, it shows the other pages, but the gigantic navbar stays where it is
cause its in your layout š
Think about it for a sec
It's not
hold on
it is in this lab
the navbar is only coded in Header.svelte, in +layout it's only mentioned inside the if conditional
Its working as it should though
Just need to clean up how you have it
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
I mean it does not help they are styled the same so
xD
It's only styled in Header.svelte though isnt it?
the only styling in layout is for the background which is an svg
You style it on +page.svelte
and Header
its the exact same nav
+page.svelte is empty on my vscode, still shows Header no matter waht
my mind is blown. š¤£
I change the Header styles and yea
its working as intended
wtf
root
which is only pulling route/+page.svelte
and how its showing the {:else}
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
But that makes no sense to what you are wanting right?
Your lab is right xD
are you importing the Header into the +page files then styling it?
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 š
we have different versions of the lab I think, I must have changed it after I sent it to you
Same thing š
So look at route/+page.svelte you have a nav and you duplicate the bg you have on layout
lol
you can see my confusion
xD
what in the fuck is going on
close any tabs of it you have open maybe?
closed and re-opened and yeah, how bizarre, I just saved it like 30x with nothing in +page
mmm...
Also never use margin for position
bodge job, forgot how to do it properly
I'm wincing everytime I look at this
you even use grid xD
it's called throwing shit at a wall until it sticks
š
hahah
fair
nah tbh I was so focused on this nav that I didn't bother fixing anything else
I'm just giving you a hard time xD
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
yea just change header styles
cause you are just changing things but with the same styles so yea can't tell xD
Ah, I have the new nav on /, but the big nav on /contact /about /projects
nvm, it works
wow
my brain.
š its just called learning
new concepts are some the harder things in coding so
You have never done layouts or slots before š
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
ofc mate! Happy to help a convert
š
Typically a logo/name
yeah ill make a little favicon or something
margin removed š