Svelte - populating side panel

Hi, Not sure I’m in the right place for my question, but not alot of svelte forums.
I have a svelte app and and I’m trying to populate a collapsible side panel with an image gallery.
Any suggestions, code snippets appreciated.
Here’s what I have:
app.svelte

<script>
	 import Header from './components/Layout/Header.svelte';
	 import Footer from './components/Layout/Footer.svelte';
   import Sidebar from "./components/Layout/Sidebar.svelte";
   let sidebar_show = false;
       async function getUsers() {
	  let response = await fetch("./data/paintings.json");
	  let users = await response.json();
	 	  return users;
	 }
	 const promise = getUsers();
   </script>
	
	
  <style>
		p {clear: both;}
      img {
       height: auto;
       object-fit: scale-down;
         max-height: 77vh;  
         max-width: 77vw; 
		 display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20vh;
      box-shadow: 10px 10px 7px -3px rgb(150 147 150);
}
.label {
	      float: right;
          padding: 10px;
          width: 12vw;
          margin-top:-75vh;
          display: flex;
           flex-direction: column;
          justify-content: flex-start;
        color: #CD853F; 
          align-items: flex-start;
          border-top: 1px solid white;
          border-left: 1px solid white;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
          max-height: 30vh;
          max-width: 10vw;
          margin-left: 78vw;
          gap: 10px; 
                    }   
        .flex-items {
          width: 10vw;
        }
        /*  Title   */
        .flex-items:nth-child(1) {height: 60%;
                                  width: 10vw;
                                  border-bottom: 1px solid white;}
        /*  Medium  */                                  
       .flex-items:nth-child(2) {height: 20%;
                                  border-bottom: 1px solid white;}
        /*  Size & year painted  */
       .flex-items:nth-child(3) {height: 20%;
                                 width: 11vw;
       }

	</style>


<main>
  <Header />
  <button on:click={() => sidebar_show = !sidebar_show}>Toggle Sidebar</button>
  <Sidebar bind:show={sidebar_show} />

		  {#await promise}
		  <p>Loading...</p>
	  {:then user}
		  {#each user as user}
		  {#if user.medium === "Oil on canvas"}
      
		  <div>
			<img class="imgMain" src="./images/{user.imgMain}" alt="{user.alt}">
			<div class="label">
				<div>
					  <div class='flex-items'>{user.titleEng}</div>
					  <div class='flex-items'>{user.medium}</div>
					  <div class='flex-items'>Size<br>Year </div>
					</div>
				</div>
			   </div>
		  {/if}
		  {/each}
	  {:catch error}
		  <p style="color: red">{error.message}</p>
	  {/await}
	  <Footer />
	</main>

Sidebar.svelte:

<script>
    import { fade, fly } from "svelte/transition";

    export let show = false;
    </script>
    
    <style>
      nav {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        padding: 2rem 1rem 0.6rem;
        border-left: 1px solid #aaa;
        background: #fff;
        overflow-y: auto;
        width: 8rem;
      }
    
    
    </style>
    
    {#if show}
    <div class="overlay" on:click={()=> show = false} transition:fade={{duration: 150}}/>
      <nav transition:fly={{x: 250, opacity: 1}}>
      <div>
        Hello
      </div>
      <button on:click={()=> show = false}>Close</button>
      </nav>
    {/if}

Thanks for any help

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.