From 189e3e438ff2b51f219dee5c40135a8037a5c5b6 Mon Sep 17 00:00:00 2001
From: cuptain <ldsjazzman@gmail.com>
Date: Fri, 1 Nov 2024 01:00:46 +1100
Subject: [PATCH] implemented navbar

---
 fclauncher/frontend/src/Navbar.svelte | 94 +++++++++++++++++++++++++--
 1 file changed, 90 insertions(+), 4 deletions(-)

diff --git a/fclauncher/frontend/src/Navbar.svelte b/fclauncher/frontend/src/Navbar.svelte
index 0a73f27..57686c0 100644
--- a/fclauncher/frontend/src/Navbar.svelte
+++ b/fclauncher/frontend/src/Navbar.svelte
@@ -1,17 +1,41 @@
-<script>
-
-</script>
+<script src="https://kit.fontawesome.com/172593a6a5.js" crossorigin="anonymous"></script>
 
 <main>
 <nav class="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">
-                
+                <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">Test</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="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8l0-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5l0 3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20-.1-.1s0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5l0 3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2l0-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z"/></svg>
+
+                <span class="link-text">Test2</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 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>
+
+                <span class="link-text">Test3</span>
+            </a>
+
+        </li>
 
     </ul>
 </nav>
@@ -31,5 +55,67 @@
         height: 100vh;
         position: fixed;
         background-color: var(--bg-primary);
+        transition: width 200ms ease;
+    }
+    .navbar-nav{
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 100%;
+    }
+    .nav-item{
+        width: 100%;
+    }
+    .navbar:hover{
+        width: 17rem;
+    }
+    .link-text{
+        display: none;
+        margin-left: 1rem;
+        transition: 300ms;
+    }
+    .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;
+    }
+    .nav-icon{
+        min-width: 3rem;
+        margin: 0 1rem;
+    }
+    .nav-link:hover{
+        fill: purple;
+        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);
+
+    }
+    .navbar:hover .logo svg {
+        transform: rotate(-180deg);
     }
 </style>
\ No newline at end of file