#Simple sidebar toggle

6 messages · Page 1 of 1 (latest)

safe inlet
#

Hey, I got a regular sidebar component inside of my qwik project. I came across an issue with changing a non-constant variable, as I get this console error in my browser:

src\components\sidebar\sidebar.tsx:15 Uncaught (in promise) TypeError: Assignment to constant variable.
    at AsyncFunction.sidebar_component_toggleSidebar_jDDoZ8JJPzQ (src\components\sidebar\sidebar.tsx:15:13)
    at AsyncFunction.invoke (use-core.js:59:26)
    at qrl-class.js:65:35
    at then (promises.js:19:56)
    at qrl-class.js:51:20
    at dispatch ((Index):146:83)
    at HTMLDocument.processDocumentEvent ((Index):189:23)

Why is that?

This is my components code:

import { component$, useStylesScoped$, $ } from "@builder.io/qwik";
import ImgMenu from '~/media/sidebar/menu.png?jsx';
import ImgSpyMale from '~/media/sidebar/spy-male_inactive.png?jsx';
import ImgThor from '~/media/sidebar/thor_inactive.png?jsx';
import ImgStatistics from '~/media/sidebar/statistics_inactive.png?jsx';
import styles from "./sidebar.css?inline";

export default component$(() => {
    useStylesScoped$(styles);

    let sidebarExpanded = false;

    const toggleSidebar = $(
        function () {
            sidebarExpanded = !sidebarExpanded;
        }
    );

    return (
        <aside class={sidebarExpanded ? "nav-col" : "nav-exp"}>
            <ImgMenu onClick$={toggleSidebar} class={sidebarExpanded ? "menu menu-col" : "menu menu-exp"}/>
            <div class="nav-items mt-5">
                <a class="nav-item" href="/">
                    <ImgSpyMale class="nav-item-img"/>
                    <span class="item-text">Summoner search</span>
                </a>
                <a class="nav-item" href="/champions">
                    <ImgThor class="nav-item-img"/>
                    <span class="item-text">Champions</span>
                </a>
                <a class="nav-item" href="/statistics">
                    <ImgStatistics class="nav-item-img"/>
                    <span class="item-text">Statistics</span>
                </a>
            </div>
        </aside>
    )
});
red bear
#

try like this

onClick$={() => {
                      toggleSidebar()
                    }}
#

better use useSignal

const status = useSignal(false)

<button onClick$={() => status.value = !status.value}>{status.value ? "true": "false"}</button>
safe inlet
#

This is what I came up with now, but "ImgMenu" doesn't work properly.
The aside tag does work without any issue. Trying it without the array doesn't seem to affect anything.

    import ImgMenu from '~/media/sidebar/menu.png?jsx';
    // ... (other imports)
  
    // Dazugehörige Qwik-Docs: https://qwik.builder.io/api/qwik/#usesignal
    const sidebarExpanded = useSignal(false);

    const toggleSidebar$ = $(() => {
        sidebarExpanded.value = !sidebarExpanded.value;
    })

    return (
        <aside class={sidebarExpanded.value ? "nav-col" : "nav-exp"}>
            <ImgMenu onClick$={toggleSidebar$} class={["menu", sidebarExpanded.value ? "menu-col" : "menu-exp"]}/>
            <div class="nav-items mt-5">
                <a class="nav-item" href="/">
                    <ImgSpyMale class="nav-item-img"/>
                    <span class="item-text">Summoner search</span>
                </a>
                <a class="nav-item" href="/champions">
                    <ImgThor class="nav-item-img"/>
                    <span class="item-text">Champions</span>
                </a>
                <a class="nav-item" href="/statistics">
                    <ImgStatistics class="nav-item-img"/>
                    <span class="item-text">Statistics</span>
                </a>
            </div>
        </aside>
    )
red bear
wispy kernel