feat: Announcements as an IconButton in the NavBar

Author: Ushie

src/layout/Navbar/NavButton.svelte

@@ -52,17 +52,17 @@
 				color: var(--primary);
 			}
 		}
-
+		
 		&.unclickable {
 			pointer-events: none;
 		}
-
+		
 		:hover {
 			color: var(--text-one);
 			background-color: var(--surface-three);
 		}
 	}
-
+	
 	a {
 		text-decoration: none;
 		user-select: none;
@@ -72,8 +72,11 @@
 		justify-content: center;
 		padding: 10px 16px;
 	}
-
+	
 	span {
+		display: flex;
+		justify-content: center;
+		
 		font-weight: 400;
 		font-size: 0.9rem;
 		letter-spacing: 0.02rem;

src/layout/Navbar/NavHost.svelte

@@ -75,13 +75,15 @@
 						<Navigation href="/" label="Home">Home</Navigation>
 						<Navigation queryKey="manager" href="/download" label="Download">Download</Navigation>
 						<Navigation queryKey="patches" href="/patches" label="Patches">Patches</Navigation>
-						<Navigation
-							queryKey={['announcements', 'announcementTags']}
-							href="/announcements"
-							label="Announcements"
-						>
-							Announcements
-						</Navigation>
+						<span class="mobile-only">
+							<Navigation
+								queryKey={['announcements', 'announcementTags']}
+								href="/announcements"
+								label="Announcements"
+							>
+								Announcements
+							</Navigation>
+						</span>
 						<Navigation queryKey="contributors" href="/contributors" label="Contributors">
 							Contributors
 						</Navigation>
@@ -91,6 +93,25 @@
 					</ul>
 				</div>
 				<div id="secondary-navigation">
+					<span class="desktop-only">
+						<Navigation
+							queryKey={['announcements', 'announcementTags']}
+							href="/announcements"
+							label="Announcements"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								height="24px"
+								viewBox="0 -960 960 960"
+								width="24px"
+								fill="currentColor"
+							>
+								<path
+									d="M720-440v-80h160v80H720Zm48 280-128-96 48-64 128 96-48 64Zm-80-480-48-64 128-96 48 64-128 96ZM200-200v-160h-40q-33 0-56.5-23.5T80-440v-80q0-33 23.5-56.5T160-600h160l200-120v480L320-360h-40v160h-80Zm360-146v-268q27 24 43.5 58.5T620-480q0 41-16.5 75.5T560-346Z"
+								/>
+							</svg>
+						</Navigation>
+					</span>
 					<button
 						on:click={() => (dialogs.settings = !dialogs.settings)}
 						class:selected={dialogs.settings}
@@ -125,7 +146,7 @@
 <style lang="scss">
 	#secondary-navigation {
 		display: flex;
-
+		gap: 1rem;
 		button {
 			border-radius: 10px;
 			padding: 10px 16px;