FCLauncher/fclauncher/frontend/src/Navbar.svelte

<script lang="ts" src="https://kit.fontawesome.com/172593a6a5.js" crossorigin="anonymous">
    import { main } from '../wailsjs/go/models';
import {addingInstance, navMargin, currentPage} from './global'

function extend(){
    $navMargin = 17;
}

function unextend(){
    $navMargin = 6;
}
</script>

<main>
<nav class="navbar" id="navbar">
    <ul class="navbar-nav">
        <li class="logo">
            <a href="#" class="nav-link">
                <span class="link-text">FCLauncher</span>
                <svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>

                
            </a>

        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" on:click={() => {$currentPage = 1}}>
                <svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" viewBox="0 0 576 512"><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/></svg>

                <span class="link-text">Instances</span>
            </a>

        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" on:click={() => {$currentPage = 3}}>
                <svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>

                <span class="link-text">Browse Packs</span>
            </a>

        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" on:click={() => {$currentPage = 2}}>
                <svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z"/></svg>

                <span class="link-text">New Instance</span>
            </a>

        </li>
        <li class="nav-item">
            <a href="#" class="nav-link" on:click={() => {$currentPage = 3}}>
                <svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" viewBox="0 0 640 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M175 389.4c-9.8 16-15 34.3-15 53.1c-10 3.5-20.8 5.5-32 5.5c-53 0-96-43-96-96L32 64C14.3 64 0 49.7 0 32S14.3 0 32 0L96 0l64 0 64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l0 245.9-49 79.6zM96 64l0 96 64 0 0-96L96 64zM352 0L480 0l32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l0 150.9L629.7 406.2c6.7 10.9 10.3 23.5 10.3 36.4c0 38.3-31.1 69.4-69.4 69.4l-309.2 0c-38.3 0-69.4-31.1-69.4-69.4c0-12.8 3.6-25.4 10.3-36.4L320 214.9 320 64c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0zm32 64l0 160c0 5.9-1.6 11.7-4.7 16.8L330.5 320l171 0-48.8-79.2c-3.1-5-4.7-10.8-4.7-16.8l0-160-64 0z"/></svg>

                <span class="link-text">Testing Page</span>
            </a>

        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">
                <svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>

                <span class="link-text">Settings</span>
            </a>

        </li>

    </ul>
</nav>
</main>

<style>
    :root{
		font-size: 16px;
		--text-primary: #b6b6b6;
		--text-secondary: #ececec;
		--bg-secondary: #23232e;
		--bg-primary: #141418;
	}

    .navbar {
        width: 5rem;
        height: 100vh;
        position: fixed;
        background-color: var(--bg-primary);
        transition: width 200ms ease;
        z-index: 5;
    }
    .navbar-nav{
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .nav-item{
        width: 100%;
        display: flex;
        white-space: nowrap;
    }
    .nav-item:last-child{
        margin-top: auto;
    }
    .navbar:hover{
        width: 17rem;
    }
    .link-text{
        display: none;
        margin-left: 1rem;
        transition: 300ms;
        white-space: nowrap;
    }
    .navbar:hover .link-text {
        display: block;
    }
    .nav-link{
        display: flex;
        align-items: center;
        height: 5rem;
        color: var(--text-primary);
        fill: var(--text-primary);
        transition: 300ms;
        text-decoration: none;
        width: 17rem;
    }
    .nav-icon{
        width: 3rem;
        margin: 0 1rem;
        white-space: nowrap;
        align-self: left;
    }
    .nav-link:hover{
        fill:var(--accent-color);
        background-color: var(--bg-secondary);
        
    }
    .logo{
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 1rem;
        text-align: center;
        color: var(--text-secondary);
        background: var(--bg-secondary);
        font-size: 1.5rem;
        letter-spacing: 0.2ch;
        width: 100%;
    }
    .logo svg {
        transform: rotate(0deg);
        transition: transform 300ms;
        fill: var(--text-primary);
        transition: 300ms;

    }
    .navbar:hover .logo svg {
        transform: rotate(-180deg);
        fill:var(--accent-color);
    }
    .logo .link-text{
        color: var(--text-secondary);
        transition: 300ms;
    }
    .navbar:hover .logo .link-text{
        color:var(--accent-color);
        transition: 300ms;
    }
</style>