src/lib/classes/menudata.ts

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

src/lib/navbar.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
-	import type { NavbarObject } from "../classes/NavObject";
+	import { NavbarObject } from "../classes/NavObject";
 	import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, DarkMode } from 'flowbite-svelte';
-	export let navobjs: NavbarObject[] = [];
+	export let navobjs: NavbarObject[] = [new NavbarObject('#', 'No nav elements provided')];
 	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-between 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-around 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

@@ -1,12 +0,0 @@
-<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

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

src/routes/+layout.svelte

@@ -1,12 +1,11 @@
 <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 = $navTitle ?? 'Default Title'
+    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 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 pageTitle={pageTitle} />
+<Navbar navobjs={navbarElements} pageTitle={pageTitle} />
 <slot></slot>

src/routes/+page.svelte

@@ -1,10 +1,6 @@
-<script lang="ts">
+<script>
-    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">
-<Sqmenu {menudata} />
+<p>I Like trains</p>
 </div>

tailwind.config.cjs

@@ -3,16 +3,6 @@ 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: [