Switching components in Svelte/SvelteKit not working

Question

I started learning Svelte yesterday as my first frontend Javascript framework, and I've been frustrated trying to fix one problem after another. Today, I have another problem I have been unable to solve.

I am trying to implement a feature where I can toggle components. If a user clicks on the "settings" icon, I want to render out the Settings component, while in the Settings component, if they click on the "Back" icon, the Settings component is closed.

This sounds easy, but I can't get it to work for some reason!

This is my messages/+page.svelte -

<script>
    import Settings from '../../components/Settings.svelte';

    let showSettings = false;

    function toggleSettings() {
        showSettings = !showSettings;
        console.log('Toggle Settings Clicked. showSettings:', showSettings);
    }
</script>

<style>
    /* My styles are here */
</style>

<body class="text-white" style="background-color: #000000;">
    <div class="container-fluid min-vh-100 d-flex flex-column" style="width: 80%;">
        <div class="row flex-grow-1">
            <div class="col-md-4 border-right" id="sidebar-container">
                <div class="p-3">
                    <div class="d-flex align-items-center justify-content-between">
                        <h3 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 20px; line-height: 24px; color: #e7e9ea;">Messages</h3>
                        <div class="fs-6 text-white">
                            <button id="gear-icon" class="icon-button" on:click={toggleSettings} aria-label="Toggle Settings">
                                <i class="bi bi-gear me-3"></i>
                            </button>
                            <i class="bi bi-envelope-at"></i>
                        </div>
                    </div>
                    <br id="break-tag">
                    <div id="welcome-message">
                        <h4 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 800; font-size: 31px; line-height: 36px; color: #e7e9ea;">Welcome to your inbox!</h4>
                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 15px; line-height: 20px; color: #71767b;">Search for a user and have private conversations with them.</p>
                        <button class="btn p-3" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 17px; line-height: 20px; color: #ffffff; background-color: #1d9bf0; border-radius: 50px;">Write a message</button>
                    </div>
                </div>
            </div>
            {#if showSettings}
                <Settings />
            {:else}
                <div id="content-column" class="col-md-8 border-right d-flex flex-column align-items-center justify-content-center">
                    <div class="p-3 text-center">
                        <h3 style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 800; font-size: 31px; line-height: 36px; color: #e7e9ea;">Select a message</h3>
                        <p style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 15px; line-height: 20px; color: #71767b;">Choose from your existing conversations, or start a new one.</p>
                        <button class="btn p-3" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 17px; line-height: 20px; color: #ffffff; background-color: #1d9bf0; border-radius: 50px;">New message</button>
                    </div>
                </div>
            {/if}
        </div>
    </div>
</body>

Nothing happens when I click on the settings icon. Nothing even gets sent to the browser console. No error is shown in my terminal. I don't know what the problem could be. It's as though Svelte/Sveltekit is not even recognizing my button clicks. I don't know if my code is wrong or if my configuration somewhere is wrong for event handlers. I installed everything through npm so I don't think I am missing anything.

I'd say if the JS click and console.log() isn't even firing, there must be a JS error somewhere? I copied this into a REPO and it worked fine. Is the path to the Settings component incorrect by chance? Maybe when you click the button, the showSettings === true causes a problem, so the console.log() never gets hit — thegaffney
– thegaffney, Commented Jul 1, 2024 at 15:51
The logic is fine. Though <body> should already be defined elsewhere (app.html in SvelteKit), if you try to nest body elements, that could lead to issues. Also, you are using a submit button (default type of <button>) to open the settings. If a form gets involved this will also cause issues. — brunnerh
– brunnerh, Commented Jul 2, 2024 at 9:31

hypedstan · Accepted Answer · 2024-07-02 09:29:57Z

0

I solved it with help from someone. The problem was somewhere else in my project.

Considering it was my first time using a frontend JS framework, I messed up my layout/+page.svelte and it affected my messages/+Page.svelte which is where the above code in my question was in.

The problem was that my layout html had a

<head> </head>

html tag which was already handled by my app.html, so I had to use the svelte syntax in place of the tag in my layout file -

<svelte:head> </svelte:head>

And it fixed the problem.

answered Jul 2, 2024 at 9:29

hypedstan

577 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Switching components in Svelte/SvelteKit not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related