chore: change fonts

Author: sebastienfontaine

public/fonts/nunito-300.ttf

@@ -0,0 +1,47 @@
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url('/fonts/nunito-300.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/nunito-400.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('/fonts/nunito-500.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/fonts/nunito-600.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('/fonts/nunito-700.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('/fonts/nunito-800.ttf') format('truetype');
+}

public/fonts/nunito-400.ttf

@@ -8,19 +8,26 @@
 				</div>
 				<div class="h-screen w-full relative z-10">
 					<div class="navbar bg-base-200">
-						<div class="navbar-start">
-							<label
-								class="btn btn-circle swap swap-rotate drawer-button lg:hidden"
-								for="drawer-menu"
-							>
-								<input type="checkbox" />
-								<BurgerIcon />
-								<CloseIcon />
-							</label>
-
-							<h1 class="text-xl font-semibold ml-4">
-								{{ currentContent.title }}
-							</h1>
+						<div class="navbar-start flex-col items-start gap-0">
+							<div class="flex items-center w-full">
+								<label
+									class="btn btn-circle swap swap-rotate drawer-button lg:hidden"
+									for="drawer-menu"
+								>
+									<input type="checkbox" />
+									<BurgerIcon />
+									<CloseIcon />
+								</label>
+
+								<div class="ml-4">
+									<h1 class="text-lg font-semibold">
+										{{ currentContent.title }}
+									</h1>
+									<p v-if="currentContent.description" class="text-xs text-base-content/60">
+										{{ currentContent.description }}
+									</p>
+								</div>
+							</div>
 						</div>
 
 						<div class="navbar-end mr-2">
@@ -101,26 +108,31 @@ const sectionItems = [
 	{
 		title: 'Rules',
 		emoji: '📋',
+		description: 'Customize tabs based on URL patterns',
 		component: 'TabRulesPane',
 	},
 	{
 		title: 'Groups',
 		emoji: '🗂️',
+		description: 'Organize your tabs with custom groups',
 		component: 'TabGroupsPane',
 	},
 	{
 		title: 'Tab Hive',
 		emoji: '🍯',
+		description: 'Manage closed tabs and auto-close settings',
 		component: 'TabHivePane',
 	},
 	{
 		title: 'Settings',
 		emoji: '⚙️',
+		description: 'Configure performance and preferences',
 		component: 'SettingsPane',
 	},
 	{
 		title: 'Help',
 		emoji: '❓',
+		description: 'Learn how to use Tabee features',
 		component: 'HelpPane',
 	},
 ] as MenuItem[];

public/fonts/nunito-500.ttf

@@ -3,6 +3,7 @@ import { DefineComponent } from 'vue';
 export type MenuItem = {
 	title: string;
 	emoji: string;
+	description?: string;
 	component?: string;
 	link?: string;
 };

public/fonts/nunito-600.ttf

@@ -1,3 +1,5 @@
+@import url('/fonts/nunito.css');
+
 @tailwind base;
 @tailwind components;