console/src/lib/Sidebar.svelte

<script lang="ts">
        import { BarChart2 } from 'lucide-svelte';

        export let activeView: 'home' | 'keys' | 'docs';
        export let sidebarOpen: boolean;

        function navigate(view: 'home' | 'keys' | 'docs') {
                activeView = view;
                if (window.innerWidth < 1024) sidebarOpen = false;
        }
</script>

<aside
        class="fixed top-0 left-0 z-[300] h-full flex flex-col flex-shrink-0 overflow-hidden
               bg-[#f9f9f9] dark:bg-gray-900 border-r border-[#e5e5e5] dark:border-gray-850 lg:border-r-0
               transition-all duration-300 ease-in-out
               lg:relative lg:z-auto
               {sidebarOpen ? 'w-[260px] translate-x-0' : '-translate-x-full lg:translate-x-0 lg:w-16'}"
>
        <div class="flex flex-col h-full w-full">

                <!-- Sidebar header with toggle -->
                <div class="flex items-center h-[60px] px-2 flex-shrink-0">
                        <button
                                on:click={() => sidebarOpen = !sidebarOpen}
                                class="flex items-center justify-center w-9 h-9 rounded-lg text-[#666666] dark:text-gray-500 hover:bg-[#e5e5e5]/60 dark:hover:bg-gray-800/60 transition-colors flex-shrink-0 ml-1"
                                title={sidebarOpen ? 'Schowaj panel' : 'Pokaż panel'}
                        >
                                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" ><path d="M8 5.4541C8 5.42548 8.00155 5.39716 8.00391 5.36914C7.55522 5.37527 7.18036 5.38745 6.85449 5.41406C6.32513 5.45732 5.99243 5.53344 5.74121 5.6416L5.6377 5.69043C5.14381 5.94215 4.73058 6.32494 4.44238 6.79492L4.32715 7.00098C4.19296 7.26434 4.10023 7.61261 4.05078 8.21777C4.00041 8.83458 4 9.62723 4 10.7637V13.2363C4 14.3728 4.00039 15.1654 4.05078 15.7822C4.10023 16.3871 4.19298 16.7347 4.32715 16.998L4.44238 17.2041C4.73056 17.6741 5.14377 18.0568 5.6377 18.3086L5.74121 18.3574C5.99244 18.4656 6.32506 18.5417 6.85449 18.585C7.17941 18.6115 7.55304 18.6228 8 18.6289V5.4541ZM22 13.2363C22 14.3396 22.001 15.2273 21.9424 15.9443C21.8903 16.5821 21.7876 17.1524 21.5605 17.6816L21.4551 17.9063C20.9758 18.8468 20.211 19.6115 19.2705 20.0908C18.6783 20.3925 18.0373 20.5186 17.3086 20.5781C16.5914 20.6367 15.7032 20.6357 14.5996 20.6357H9.40039C9.27572 20.6357 9.15341 20.6339 9.03418 20.6338C9.02282 20.6342 9.01146 20.6357 9 20.6357C8.98557 20.6357 8.97131 20.6334 8.95703 20.6328C8.05556 20.632 7.31 20.6287 6.69141 20.5781C6.05356 20.526 5.48347 20.4235 4.9541 20.1963L4.73047 20.0908C3.84834 19.6413 3.12017 18.9412 2.6377 18.0801L2.54492 17.9063C2.24315 17.3139 2.11717 16.6732 2.05762 15.9443C1.99905 15.2273 2 14.3396 2 13.2363V10.7637C2 9.66008 1.99903 8.77186 2.05762 8.05469C2.11716 7.32598 2.24327 6.68595 2.54492 6.09375L2.6377 5.91895C3.12017 5.05789 3.8484 4.35763 4.73047 3.9082L4.9541 3.80274C5.48344 3.57561 6.05359 3.47301 6.69141 3.4209C7.40857 3.36231 8.29681 3.36328 9.40039 3.36328H14.5996C15.7032 3.36328 16.5914 3.36231 17.3086 3.4209C18.0373 3.48044 18.6773 3.60656 19.2695 3.9082L19.4443 4.00195C20.3052 4.48442 21.0057 5.21184 21.4551 6.09375L21.5605 6.31738C21.7877 6.84672 21.8903 7.41688 21.9424 8.05469C22.001 8.77186 22 9.66008 22 10.7637V13.2363ZM10 18.6357H14.5996C15.7361 18.6357 16.5287 18.6353 17.1455 18.585C17.7507 18.5355 18.0989 18.4428 18.36 18.3086L18.3623 18.3076C18.8563 18.0557 19.2694 17.6729 19.5576 17.2031L19.6729 16.998C19.8071 16.7347 19.8998 16.3871 19.9492 15.7822C19.9996 15.1654 20 14.3728 20 13.2363V10.7637C20 9.62723 19.9996 8.83458 19.9492 8.21777C19.8998 7.61261 19.807 7.26434 19.6729 7.00098L19.5576 6.79492C19.2694 6.32495 18.8562 5.94215 18.3623 5.69043L18.36 5.68164C18.1088 5.57348 17.7762 5.49729 17.2471 5.45459C17.0773 5.44056 16.8917 5.43188 16.6875 5.42676L17 5.42676C17 5.42676 17 5.4541 17 5.45996V18.6289C17.1716 18.6253 17.3317 18.6199 17.4795 18.6084C17.5479 18.603 17.6133 18.5969 17.6758 18.5898C17.7383 18.5828 17.7979 18.5742 17.8545 18.5645C17.9111 18.5547 17.9648 18.5435 18.0156 18.5312C18.0664 18.519 18.1143 18.5054 18.1592 18.4902C18.2041 18.4751 18.2461 18.4585 18.2852 18.4404C18.3242 18.4224 18.3604 18.4028 18.3936 18.3818C18.4268 18.3608 18.457 18.3384 18.4844 18.3145C18.5117 18.2905 18.5361 18.2651 18.5576 18.2383L18.3623 18.3076L18.36 18.3086V5.68164C18.1088 5.57348 17.7762 5.49729 17.2471 5.45459L17.1455 5.44727C16.5287 5.39746 15.7361 5.39648 14.5996 5.39648H10V18.6357Z" /></svg>
                        </button>
                </div>

                <!-- Nav items -->
                <div class="flex-1 overflow-y-auto px-2 pb-4">
                        <div>
                                <button
                                        on:click={() => navigate('home')}
                                        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors
                                               {activeView === 'home' ? 'bg-[#e5e5e5]/70 dark:bg-gray-800 text-[#0f0f0f] dark:text-gray-100' : 'text-[#444444] dark:text-gray-500 hover:bg-[#e5e5e5]/40 dark:hover:bg-gray-800/60'}"
                                        title="Home"
                                >
                                        <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M19.5 11.737c0-.728-.005-1.07-.038-1.298l-.044-.201a1.999 1.999 0 0 0-.238-.52l-.111-.155c-.12-.15-.276-.283-.681-.577l-.496-.354-3.7-2.612c-.933-.658-1.295-.898-1.585-1.002l-.12-.036a2 2 0 0 0-.853-.026l-.121.026c-.318.08-.64.287-1.704 1.038l-3.7 2.612c-.595.42-.871.621-1.039.78l-.138.151a2 2 0 0 0-.35.675c-.072.244-.082.528-.082 1.499v5.062l.003.727c.003.2.01.364.022.506.022.271.06.372.084.422l.083.133a1 1 0 0 0 .354.303l.049.022c.062.022.17.047.373.063.283.023.656.025 1.232.025h1.8v-3.25a3.5 3.5 0 1 1 7 0V19h1.8c.576 0 .949-.002 1.232-.025.272-.022.373-.06.422-.085l.134-.082a.998.998 0 0 0 .303-.354l.021-.05a1.47 1.47 0 0 0 .064-.372c.023-.284.024-.656.024-1.233v-5.062Zm2 5.062c0 .544.001 1.012-.03 1.396a3.22 3.22 0 0 1-.23 1.024l-.067.143a3 3 0 0 1-1.104 1.195l-.207.116c-.378.192-.771.264-1.167.296-.383.032-.852.03-1.395.03h-2.8a1 1 0 0 1-1-1v-4.25a1.5 1.5 0 0 0-3 0V20a1 1 0 0 1-1 1H6.7c-.543 0-1.012.002-1.395-.03a3.224 3.224 0 0 1-1.025-.23l-.142-.067a3 3 0 0 1-1.196-1.104l-.115-.206c-.192-.378-.264-.772-.297-1.167a9.947 9.947 0 0 1-.026-.638L2.5 16.8v-5.062c0-.85-.01-1.478.163-2.065.145-.49.383-.949.7-1.35l.149-.174c.363-.396.835-.72 1.443-1.15l3.7-2.612c.929-.655 1.604-1.152 2.372-1.344l.24-.052a4 4 0 0 1 1.707.052l.284.087c.656.233 1.275.684 2.087 1.257L19.045 7l.488.345c.457.33.82.618 1.104.978l.115.153a4 4 0 0 1 .585 1.197l.057.223c.114.525.106 1.098.106 1.842V16.8Z" /></svg>
                                        <span class="transition-opacity duration-200 whitespace-nowrap overflow-hidden {sidebarOpen ? 'opacity-100' : 'opacity-0 w-0'}">Home</span>
                                </button>
                        </div>

                        <div>
                                <button
                                        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-[#444444] dark:text-gray-500 hover:bg-[#e5e5e5]/40 dark:hover:bg-gray-800/60 transition-colors"
                                        title="Chat"
                                >
                                        <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4.5C7.5271 4.5 4 7.91095 4 12C4 13.6958 4.5996 15.263 5.62036 16.5254C5.80473 16.7534 5.87973 17.0509 5.82551 17.339C5.72928 17.8505 5.60336 18.3503 5.45668 18.8401C6.08722 18.743 6.69878 18.6098 7.2983 18.4395C7.54758 18.3687 7.81461 18.3975 8.04312 18.5197C9.20727 19.1423 10.5566 19.5 12 19.5C16.4729 19.5 20 16.0891 20 12C20 7.91095 16.4729 4.5 12 4.5ZM2 12C2 6.70021 6.53177 2.5 12 2.5C17.4682 2.5 22 6.70021 22 12C22 17.2998 17.4682 21.5 12 21.5C10.3694 21.5 8.82593 21.1286 7.46141 20.4675C6.36717 20.7507 5.2423 20.9253 4.06155 20.9981C3.72191 21.019 3.39493 20.8658 3.19366 20.5915C2.9924 20.3171 2.94448 19.9592 3.06647 19.6415C3.35663 18.8859 3.6004 18.1448 3.77047 17.399C2.65693 15.8695 2 14.0088 2 12Z" fill="currentColor" /></svg>
                                        <span class="transition-opacity duration-200 whitespace-nowrap overflow-hidden {sidebarOpen ? 'opacity-100' : 'opacity-0 w-0'}">Chat</span>
                                </button>
                        </div>

                        <div>
                                <button
                                        on:click={() => navigate('docs')}
                                        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors
                                               {activeView === 'docs' ? 'bg-[#e5e5e5]/70 dark:bg-gray-800 text-[#0f0f0f] dark:text-gray-100' : 'text-[#444444] dark:text-gray-500 hover:bg-[#e5e5e5]/40 dark:hover:bg-gray-800/60'}"
                                        title="API Docs"
                                >
                                        <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><g fill-rule="evenodd" clip-rule="evenodd"><path d="M8 10a1 1 0 0 1 1-1h6a1 1 0 0 1 0 2H9a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z" /><path d="M14.724 4.055c-.203-.049-.43-.055-1.212-.055H9.3c-.857 0-1.439 0-1.889.038-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.82C5.5 6.361 5.5 6.942 5.5 7.8v8.4c0 .857 0 1.439.038 1.889.035.438.1.663.18.819a2 2 0 0 0 .874.874c.156.08.38.145.819.18C7.861 20 8.443 20 9.3 20h5.4c.857 0 1.439 0 1.889-.038.438-.035.663-.1.819-.18a2 2 0 0 0 .874-.874c.08-.156.145-.38.18-.819.037-.45.038-1.032.038-1.889V8.988c0-.781-.006-1.009-.055-1.212-.05-.204-.13-.4-.24-.578-.109-.179-.265-.344-.818-.897l-1.188-1.188c-.553-.552-.718-.709-.897-.818a2.002 2.002 0 0 0-.578-.24ZM13.614 2c.635 0 1.114 0 1.577.11a4 4 0 0 1 1.156.48c.406.248.745.588 1.194 1.037l.072.072 1.188 1.188.072.072c.45.449.789.788 1.038 1.194a4 4 0 0 1 .479 1.156c.11.463.11.942.11 1.577v7.355c0 .805 0 1.47-.044 2.01-.046.563-.145 1.08-.392 1.565a4 4 0 0 1-1.748 1.748c-.485.247-1.002.346-1.564.392-.541.044-1.206.044-2.01.044H9.258c-.805 0-1.47 0-2.01-.044-.563-.046-1.08-.145-1.565-.392a4 4 0 0 1-1.748-1.748c-.247-.485-.346-1.002-.392-1.564-.044-.541-.044-1.206-.044-2.01V7.758c0-.805 0-1.47.044-2.01.046-.563.145-1.08.392-1.565a4 4 0 0 1 1.748-1.748c.485-.247 1.002-.346 1.564-.392C7.79 2 8.454 2 9.258 2h4.356Z" /></g></svg>
                                        <span class="transition-opacity duration-200 whitespace-nowrap overflow-hidden {sidebarOpen ? 'opacity-100' : 'opacity-0 w-0'}">API Docs</span>
                                </button>
                        </div>

                        <div>
                                <button
                                        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-[#444444] dark:text-gray-500 hover:bg-[#e5e5e5]/40 dark:hover:bg-gray-800/60 transition-colors"
                                        title="Usage"
                                >
                                        <BarChart2 class="w-5 h-5 flex-shrink-0" strokeWidth={2} />
                                        <span class="transition-opacity duration-200 whitespace-nowrap overflow-hidden {sidebarOpen ? 'opacity-100' : 'opacity-0 w-0'}">Usage</span>
                                </button>
                                <button
                                        on:click={() => navigate('keys')}
                                        class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-[#444444] dark:text-gray-500 hover:bg-[#e5e5e5]/40 dark:hover:bg-gray-800/60 transition-colors
                                               {activeView === 'keys' ? 'bg-[#e5e5e5]/70 dark:bg-gray-800 text-[#0f0f0f] dark:text-gray-100' : ''}"
                                        title="API keys"
                                >
                                        <svg class="w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" fill="currentColor"><path d="M16 9.75C16.9665 9.75 17.75 8.9665 17.75 8C17.75 7.0335 16.9665 6.25 16 6.25C15.0335 6.25 14.25 7.0335 14.25 8C14.25 8.9665 15.0335 9.75 16 9.75Z" /><path d="M15 2C11.134 2 8 5.13401 8 9C8 9.49204 8.05092 9.97307 8.14801 10.4378L3.73223 14.8536C3.26339 15.3224 3 15.9583 3 16.6213V20C3 20.5523 3.44772 21 4 21H7.37868C8.04172 21 8.6776 20.7366 9.14645 20.2678L10.2071 19.2071C10.3946 19.0196 10.5 18.7652 10.5 18.5V17.5H11.5C11.7652 17.5 12.0196 17.3946 12.2071 17.2071L13.5622 15.852C14.0269 15.9491 14.508 16 15 16C18.866 16 22 12.866 22 9C22 5.13401 18.866 2 15 2ZM10 9C10 6.23858 12.2386 4 15 4C17.7614 4 20 6.23858 20 9C20 11.7614 17.7614 14 15 14C14.4932 14 14.0057 13.9249 13.5471 13.7859C13.1941 13.6789 12.8108 13.775 12.55 14.0358L11.0858 15.5H9.5C8.94772 15.5 8.5 15.9477 8.5 16.5V18.0858L7.73223 18.8536C7.63847 18.9473 7.51129 19 7.37868 19H5V16.6213C5 16.4887 5.05268 16.3615 5.14645 16.2678L9.96418 11.45C10.225 11.1892 10.3211 10.8059 10.2141 10.4529C10.0751 9.99431 10 9.50683 10 9Z" /></svg>
                                        <span class="transition-opacity duration-200 whitespace-nowrap overflow-hidden {sidebarOpen ? 'opacity-100' : 'opacity-0 w-0'}">API keys</span>
                                </button>
                        </div>
                </div>
        </div>
</aside>