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 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.