Remove default nav element, fix hamburger menu showing when no nav elements

src/lib/classes/menudata.ts

@@ -0,0 +1 @@
+export type MenuData = {menuLink: string, menuName: string}

src/lib/navbar.svelte

@@ -1,18 +1,20 @@
 <script lang="ts">
-	import { NavbarObject } from "../classes/NavObject";
+	import type { NavbarObject } from "../classes/NavObject";
 	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, DarkMode } from 'flowbite-svelte';
-	export let navobjs: NavbarObject[] = [new NavbarObject('#', 'No nav elements provided')];
+	export let navobjs: NavbarObject[] = [];
 	export let pageTitle: string = "Default Title";
 	export let toggleDarkModeButton: boolean = true;
 </script>
-<Navbar let:hidden let:toggle color="form" navDivClass="mx-auto flex flex-wrap justify-around items-center" navClass="px-4 md:px-2 py-2.5 w-full bg-zinc-200 dark:bg-zinc-900">
+<Navbar let:hidden let:toggle color="form" navDivClass="mx-auto flex flex-wrap justify-between items-center" navClass="px-4 md:px-2 py-2.5 w-full bg-zinc-200 dark:bg-zinc-900">
 	<NavBrand href="/">
     	<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
 			{ pageTitle.toUpperCase() }
 		</span>
 	</NavBrand>
-	<NavHamburger on:click={toggle} />
 	<div class="flex">
+		{#if navobjs.length !== 0}
+			<NavHamburger on:click={toggle} btnClass={'ml-3 lg:hidden'} />
+    {/if}
 		<NavUl {hidden}>
 			{#each navobjs as navElem}
 				<NavLi href="{ navElem.link }">{ navElem.text }</NavLi>

src/lib/sqmenu.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { Card } from "flowbite-svelte";
+    export let menudata: {menuName: string, menuLink: string}[] = [];
+    $: colNum = Math.floor(menudata.length / 2) < 3 ? Math.floor(menudata.length / 2) : 3;
+</script>
+<div class="w-[60%] grid gap-y-8 grid-cols-{colNum} text-center mx-auto py-5 sm:grid-cols-1 justify-content-center">
+{#each menudata as menu}
+  <Card href='{menu.menuLink}' class='lg:px-16 lg:py-8 md:px-12 md:py-6 dark:hover:bg-zinc-900 dark:bg-transparent bg-transparent min-w-[50%]'>
+      <h2 class='text-xl'>{menu.menuName}</h2>
+  </Card>
+{/each}
+</div>

src/lib/store.js

@@ -0,0 +1,3 @@
+import { readable, writable } from 'svelte/store';
+
+export let navTitle = writable('Dashboard')

src/routes/+layout.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
     import "../app.postcss";
     import { NavbarObject } from "../classes/NavObject";
-    import Navbar from "../lib/navbar.svelte";
+    import Navbar from "$lib/navbar.svelte";
     import './styles.css';
+    import { navTitle } from "$lib/store";
 
-    let pageTitle: string = "pswsm meteo"
-    let navbarElements: NavbarObject[] = [new NavbarObject('/', 'Home'), new NavbarObject('/abtme', 'Sobre mi'), new NavbarObject('/temps', 'Temps'), new NavbarObject('/xema', 'Estacions'), new NavbarObject('/openmeteo', 'Dades Open Meteo')]
+    let pageTitle: string = $navTitle ?? 'Default Title'
+    // let navbarElements: NavbarObject[] = [new NavbarObject('/', 'Home'), new NavbarObject('/abtme', 'Sobre mi'), new NavbarObject('/temps', 'Temps'), new NavbarObject('/xema', 'Estacions'), new NavbarObject('/openmeteo', 'Dades Open Meteo')]
 </script>
-<Navbar navobjs={navbarElements} pageTitle={pageTitle} />
+<Navbar pageTitle={pageTitle} />
 <slot></slot>

src/routes/+page.svelte

@@ -1,6 +1,10 @@
-<script>
+<script lang="ts">
+    import Sqmenu from "$lib/sqmenu.svelte";
+    import type { MenuData } from "$lib/classes/menudata"
+    let menudata: MenuData[] = [{menuLink: '/abtme', menuName:'Sobre mi'}, {menuLink: '/temps', menuName:'Temps'}, {menuLink: '/xema', menuName:'Dades XEMA'}, {menuLink: '/openmeteo', menuName:'Dades Open Meteo'}]
+    // let menudata: MenuData[] = []
 </script>
 
 <div class="p-8">
-<p>I Like trains</p>
+<Sqmenu {menudata} />
 </div>

tailwind.config.cjs

@@ -3,6 +3,16 @@ const config = {
 
   theme: {
     extend: {},
+    screens: {
+      'lg': {'min': '1024px'},
+      // => @media (max-width: 1023px) { ... }
+
+      'md': {'max': '1023px'},
+      // => @media (max-width: 767px) { ... }
+
+      'sm': {'max': '639px'},
+      // => @media (max-width: 639px) { ... }
+    }
   },
 
   plugins: [