feat(dashboard): full width for sidebar items

package.json

@@ -42,6 +42,7 @@
     }
   },
   "dependencies": {
+    "@fontsource/athiti": "^5.2.5",
     "@odit/lfk-client-js": "1.1.3",
     "@paralleldrive/cuid2": "2.2.2",
     "@tanstack/svelte-table": "8.9.1",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@fontsource/athiti':
+        specifier: ^5.2.5
+        version: 5.2.5
       '@odit/lfk-client-js':
         specifier: 1.1.3
         version: 1.1.3
@@ -231,6 +234,9 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@fontsource/athiti@5.2.5':
+    resolution: {integrity: sha512-vHoAKBBw+wI4y3bGOkiogOkgcoLH7+SWtNNo/nBQ1XfhvfRPX/91xGtclEdwqUlbOJTCkNzEecdKChJQ5MsDFg==}
+
   '@formatjs/ecma402-abstract@1.11.4':
     resolution: {integrity: sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==}
 
@@ -2024,6 +2030,8 @@ snapshots:
   '@esbuild/win32-x64@0.17.16':
     optional: true
 
+  '@fontsource/athiti@5.2.5': {}
+
   '@formatjs/ecma402-abstract@1.11.4':
     dependencies:
       '@formatjs/intl-localematcher': 0.2.25

src/components/cards/Cards.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("cards")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:CREATE")}

src/components/contacts/Contacts.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("contacts")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:CREATE")}

src/components/dashboard/Dashboard.svelte

@@ -25,7 +25,7 @@
     <nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
       <a
         class:activenav={$router.path === "/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
         href="/"
       >
         <svg
@@ -43,7 +43,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:GET")}
         <a
           class:activenav={$router.path === "/runners/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/runners/"
         >
           <svg
@@ -64,7 +64,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:GET")}
         <a
           class:activenav={$router.path === "/teams/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/teams/"
         >
           <svg
@@ -85,7 +85,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:GET")}
         <a
           class:activenav={$router.path.includes("/orgs/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/orgs/"
         >
           <svg
@@ -106,7 +106,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:GET")}
         <a
           class:activenav={$router.path.includes("/donors/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/donors/"
         >
           <svg
@@ -127,7 +127,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:GET")}
         <a
           class:activenav={$router.path.includes("/donations/")}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/donations/"
         >
           <svg
@@ -148,7 +148,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("TRACK:GET")}
         <a
           class:activenav={$router.path === "/tracks/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/tracks/"
         >
           <svg
@@ -169,7 +169,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("CARD:GET")}
         <a
           class:activenav={$router.path === "/cards/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/cards/"
         >
           <svg
@@ -192,7 +192,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:GET")}
         <a
           class:activenav={$router.path === "/scans/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/scans/"
         >
           <svg
@@ -214,7 +214,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("CONTACT:GET")}
         <a
           class:activenav={$router.path === "/contacts/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/contacts/"
         >
           <svg
@@ -235,7 +235,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("STATION:GET")}
         <a
           class:activenav={$router.path === "/scanstations/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/scanstations/"
         >
           <svg
@@ -257,7 +257,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:GET")}
         <a
           class:activenav={$router.path === "/statsclients/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/statsclients/"
         >
           <svg
@@ -279,7 +279,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("USER:GET")}
         <a
           class:activenav={$router.path === "/users/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/users/"
         >
           <svg
@@ -300,7 +300,7 @@
       {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:GET")}
         <a
           class:activenav={$router.path === "/groups/"}
-          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+          class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
           href="/groups/"
         >
           <svg
@@ -320,7 +320,7 @@
       {/if}
       <a
         class:activenav={$router.path === "/settings/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
         href="/settings/"
       >
         <svg
@@ -339,7 +339,7 @@
       </a>
       <a
         class:activenav={$router.path === "/about/"}
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
         href="/about/"
       >
         <svg
@@ -358,7 +358,7 @@
       </a>
       <button
         tabindex="0"
-        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900"
+        class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-200 hover:text-gray-900 w-full"
         on:click={() => {
           AuthService.authControllerLogout();
           logout();

src/components/dashboard/MainDashContent.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <div class="p-2 md:p-5 overflow-x-hidden">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("dashboard-greeting")} <span class="text-blue-500"
       >{store.state.jwtinfo.userdetails.firstname}
       {store.state.jwtinfo.userdetails.lastname}</span

src/components/donations/Donations.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("donations")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("DONATION:CREATE")}

src/components/donors/Donors.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("donors")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("DONOR:CREATE")}

src/components/general/About.svelte

@@ -97,7 +97,7 @@
 {/if}
 <!-- /// -->
 <section class="container p-5">
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("about")}
 	</h4>
 	<p class="mt-2 mb-2">
@@ -109,7 +109,7 @@
 		<br />
 		<span>{$_("lfk-is-os")}</span>
 	</p>
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("credits")}
 	</h4>
 	<p class="text-left">{$_("oss_credit_description")}</p>

src/components/groups/Groups.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("user-groups")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("USERGROUP:CREATE")}

src/components/orgs/Orgs.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("organizations")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("ORGANIZATION:CREATE")}

src/components/runners/Runners.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("runners")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("RUNNER:CREATE")}

src/components/scans/Scans.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("scans")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("SCAN:CREATE")}

src/components/scanstations/ScanStations.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <section class="container p-5">
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("scanstations")}
 	</h4>
 	{#if store.state.jwtinfo.userdetails.permissions.includes("STATION:CREATE")}

src/components/statsclients/StatsClients.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <section class="container p-5">
-	<h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+	<h4 class="mb-1 text-3xl font-extrabold leading-tight">
 		{$_("statsclients")}
 	</h4>
 	{#if store.state.jwtinfo.userdetails.permissions.includes("STATSCLIENT:CREATE")}

src/components/teams/Teams.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("teams")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("TEAM:CREATE")}

src/components/tracks/TracksOverview.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("tracks")}
   </h4>
   <button

src/components/users/Users.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <section class="container p-5">
-  <h4 class="mb-1 text-3xl font-extrabold leading-tight font-mono">
+  <h4 class="mb-1 text-3xl font-extrabold leading-tight">
     {$_("users")}
   </h4>
   {#if store.state.jwtinfo.userdetails.permissions.includes("USER:CREATE")}

src/main.js

@@ -1,5 +1,11 @@
 import "./style.css";
 import App from "./App.svelte";
+import '@fontsource/athiti/200.css';
+import '@fontsource/athiti/300.css';
+import '@fontsource/athiti/400.css';
+import '@fontsource/athiti/500.css';
+import '@fontsource/athiti/600.css';
+import '@fontsource/athiti/700.css';
 
 const app = new App({
   target: document.body,

src/style.css

@@ -4,4 +4,7 @@
     @apply bg-gray-300;
     @apply text-black;
 }
+*{
+    font-family: Athiti;
+}
 @tailwind utilities;