From 2cdcc5a57d8a6d59afceba68bab66dd45ff0c569 Mon Sep 17 00:00:00 2001
From: Alex Rock Ancelet <pierstoval@gmail.com>
Date: Wed, 22 Nov 2023 16:48:40 +0100
Subject: [PATCH] Finish top menu for now

---
 package.json                                  |   3 +-
 .../material3/Dashboard/Dashboard.svelte      |   2 +-
 .../material3/Layout/AdminLayout.svelte       |   4 +-
 .../material3/Menu/InternalSubmenu.svelte     | 111 +++++++++---------
 .../themes/material3/Menu/TopLeftMenu.svelte  |  76 ++++++++----
 src/lib/themes/material3/Menu/TopMenu.svelte  |  12 +-
 src/testApp/Dashboard.ts                      |   4 +-
 7 files changed, 122 insertions(+), 90 deletions(-)

diff --git a/package.json b/package.json
index 9b938dd8..2c38776e 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
         "@smui/menu": "^7.0.0",
         "@smui/paper": "^7.0.0",
         "@smui/ripple": "^7.0.0",
+		"@smui/tooltip": "^7.0.0",
 		"@smui/top-app-bar": "^7.0.0",
 		"@sveltejs/adapter-auto": "^2.1.1",
 		"@sveltejs/adapter-static": "^2.0.3",
@@ -87,7 +88,7 @@
 		"prettier-plugin-svelte": "^3.2.6",
 		"publint": "^0.2.10",
 		"sass": "^1.78.0",
-        "smui-theme": "^7.0.0-beta.15",
+        "smui-theme": "^7.0.0",
 		"svelte-check": "^3.8.6",
 		"svelte-material-ui": "^7.0.0",
 		"tslib": "^2.7.0",
diff --git a/src/lib/themes/material3/Dashboard/Dashboard.svelte b/src/lib/themes/material3/Dashboard/Dashboard.svelte
index 99d3f579..d36f6ce9 100644
--- a/src/lib/themes/material3/Dashboard/Dashboard.svelte
+++ b/src/lib/themes/material3/Dashboard/Dashboard.svelte
@@ -1,6 +1,6 @@
 <svelte:options
 	customElement={{
-		tag: 'sa-dashboard',
+		tag: 'sa-m3-dashboard',
 		props: {
 			dashboard: { reflect: false, type: 'Object' },
 			crud: { reflect: true, type: 'String' },
diff --git a/src/lib/themes/material3/Layout/AdminLayout.svelte b/src/lib/themes/material3/Layout/AdminLayout.svelte
index 1048f742..c70db670 100644
--- a/src/lib/themes/material3/Layout/AdminLayout.svelte
+++ b/src/lib/themes/material3/Layout/AdminLayout.svelte
@@ -31,9 +31,7 @@
 	});
 </script>
 
-<svelte:head>
-
-</svelte:head>
+<svelte:head></svelte:head>
 
 <slot name="top_menu">
 	<TopMenu {adminConfig} left_links={top_left_menu_links} right_links={top_right_menu_links} />
diff --git a/src/lib/themes/material3/Menu/InternalSubmenu.svelte b/src/lib/themes/material3/Menu/InternalSubmenu.svelte
index 2975df22..ae9bf81a 100644
--- a/src/lib/themes/material3/Menu/InternalSubmenu.svelte
+++ b/src/lib/themes/material3/Menu/InternalSubmenu.svelte
@@ -1,64 +1,63 @@
 <script lang="ts">
-    import {Divider, type MenuLink, Submenu} from "$lib/Menu/MenuLinks.ts";
-    import Menu from '@smui/menu';
-    import IconButton from '@smui/icon-button/dist/IconButton.svelte';
-    import Section from '@smui/top-app-bar/dist/Section.svelte';
-    import List, {
-        Item,
-        Separator,
-        Text,
-        PrimaryText,
-        SecondaryText,
-    } from '@smui/list';
-    import {_} from "svelte-i18n";
-    import {CallbackAction, Icon, UrlAction} from "$lib";
-    import Button, {Label} from "@smui/button";
+	import Menu from '@smui/menu';
+	import IconButton from '@smui/icon-button/dist/IconButton.svelte';
+	import List, { Item, Separator } from '@smui/list';
+	import { _ } from 'svelte-i18n';
+	import Button, { Label } from '@smui/button';
 
-    export let link: MenuLink;
-    let submenu: Menu;
+	import { Divider, type MenuLink } from '$lib/Menu/MenuLinks.ts';
+	import { CallbackAction, Icon, UrlAction } from '$lib';
+
+	export let link: MenuLink;
+	let submenu: Menu;
+
+	let isOpen: boolean;
+	let icon: string = '';
+
+	$: {
+		icon = isOpen ? 'arrow_drop_up' : 'arrow_drop_down';
+	}
 </script>
 
-<Section toolbar>
-    <IconButton class="material-icons" on:click={submenu.setOpen(true)}>menu</IconButton>
-    <Menu bind:this={submenu}>
-        {#if link.icon}
-            <svelte:component this={link.icon} />
-        {/if}
-        <List twoLine>
-            {#each link.links as submenuLink}
-                {#if submenuLink instanceof Divider}
-                    <br />
-                {:else if submenuLink instanceof UrlAction}
-                    <Section toolbar>
-                        <a href={submenuLink.url()}>
-                            {#if submenuLink.icon}
-                                <Icon icon={submenuLink.icon} />
-                            {/if}
-                            {submenuLink.label ? $_(submenuLink.label) : ''}
-                        </a>
-                    </Section>
-                {:else if submenuLink instanceof CallbackAction}
-                    <Section toolbar>
-                        <Button tag="span" type="button" on:click={() => submenuLink.call()}>
-                            {#if submenuLink.icon}
-                                <Icon icon={submenuLink.icon} />
-                            {/if}
-                            {submenuLink.label ? $_(submenuLink.label) : ''}
-                        </Button>
-                    </Section>
-                {:else}
-                    <Section toolbar>
-                        {#if submenuLink.icon}
-                            <Icon icon={submenuLink.icon} />
-                        {/if}
-                        <Label>{submenuLink.label ? $_(submenuLink.label) : ''}</Label>
-                    </Section>
-                {/if}
-            {/each}
-        </List>
-    </Menu>
+<IconButton class="material-icons" on:click={submenu.setOpen(true)}>{icon}</IconButton>
+<Menu bind:this={submenu} bind:open={isOpen} anchorCorner="BOTTOM_LEFT">
+	{#if link.icon}
+		<svelte:component this={link.icon} />
+	{/if}
+	<List dense>
+		{#each link.links as submenuLink}
+			{#if submenuLink instanceof Divider}
+				<Separator />
+			{:else if submenuLink instanceof UrlAction}
+				<Item>
+					<a href={submenuLink.url()}>
+						{#if submenuLink.icon}
+							<Icon icon={submenuLink.icon} />
+						{/if}
+						{submenuLink.label ? $_(submenuLink.label) : ''}
+					</a>
+				</Item>
+			{:else if submenuLink instanceof CallbackAction}
+				<Item>
+					<Button tag="span" type="button" on:click={() => submenuLink.call()}>
+						{#if submenuLink.icon}
+							<Icon icon={submenuLink.icon} />
+						{/if}
+						{submenuLink.label ? $_(submenuLink.label) : ''}
+					</Button>
+				</Item>
+			{:else}
+				<Item>
+					{#if submenuLink.icon}
+						<Icon icon={submenuLink.icon} />
+					{/if}
+					<Label>{submenuLink.label ? $_(submenuLink.label) : ''}</Label>
+				</Item>
+			{/if}
+		{/each}
+	</List>
+</Menu>
 
-</Section>
 <!--
 
 <HeaderNavMenu icon={link.icon || Folder} text={link.label ? $_(link.label) : ''}>
diff --git a/src/lib/themes/material3/Menu/TopLeftMenu.svelte b/src/lib/themes/material3/Menu/TopLeftMenu.svelte
index 8f786795..bf81d02b 100644
--- a/src/lib/themes/material3/Menu/TopLeftMenu.svelte
+++ b/src/lib/themes/material3/Menu/TopLeftMenu.svelte
@@ -1,45 +1,75 @@
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
+	import IconButton from '@smui/icon-button/dist/IconButton.svelte';
+	import { Title } from '@smui/top-app-bar';
+	import Tooltip, { Wrapper } from '@smui/tooltip';
 	import Section from '@smui/top-app-bar/dist/Section.svelte';
-	import Button, { Label } from '@smui/button';
 
 	import { Divider, type MenuLink, Submenu } from '$lib/Menu/MenuLinks';
 	import { CallbackAction, UrlAction } from '$lib/actions';
 	import InternalSubmenu from './InternalSubmenu.svelte';
-	import {Icon} from "$lib";
+	import { Icon } from '$lib';
 
 	export let links: Array<MenuLink> = [];
 </script>
 
 {#each links as link}
 	{#if link instanceof Submenu}
-		<InternalSubmenu {link} />
+		<Section>
+			<InternalSubmenu {link} />
+		</Section>
 	{:else if link instanceof Divider}
-		<br />
+		<Section>|</Section>
 	{:else if link instanceof UrlAction}
-		<Section toolbar>
-			<a href={link.url()}>
-				{#if link.icon}
-					<Icon icon={link.icon} />
-				{/if}
-				{link.label ? $_(link.label) : ''}
-			</a>
+		<Section>
+			<IconButton tag="a" href={link.url()}>
+				<Wrapper>
+					{#if link.icon}
+						<Icon icon={link.icon} />
+					{:else}
+						<i class="material-icons">link</i>
+					{/if}
+					{#if link.label}
+						<Tooltip>
+							{link.label ? $_(link.label) : ''}
+						</Tooltip>
+					{/if}
+				</Wrapper>
+			</IconButton>
 		</Section>
 	{:else if link instanceof CallbackAction}
-		<Section toolbar>
-			<Button tag="span" type="button" on:click={() => link.call()}>
-				{#if link.icon}
-					<Icon icon={link.icon} />
-				{/if}
-				{link.label ? $_(link.label) : ''}
-			</Button>
+		<Section>
+			<IconButton on:click={() => link.call()}>
+				<Wrapper>
+					{#if link.icon}
+						<Icon icon={link.icon} />
+					{:else}
+						<i class="material-icons">article</i>
+					{/if}
+					{#if link.label}
+						<Tooltip>
+							{link.label ? $_(link.label) : ''}
+						</Tooltip>
+					{/if}
+				</Wrapper>
+			</IconButton>
 		</Section>
 	{:else}
-		<Section toolbar>
-			{#if link.icon}
-				<Icon icon={link.icon} />
-			{/if}
-			<Label>{link.label ? $_(link.label) : ''}</Label>
+		<Section>
+			<Title>
+				<Wrapper>
+					{#if link.icon}
+						<Icon icon={link.icon} />
+					{:else}
+						<i class="material-icons">link</i>
+					{/if}
+					{#if link.label}
+						<Tooltip>
+							{link.label ? $_(link.label) : ''}
+						</Tooltip>
+					{/if}
+				</Wrapper>
+			</Title>
 		</Section>
 	{/if}
 {/each}
diff --git a/src/lib/themes/material3/Menu/TopMenu.svelte b/src/lib/themes/material3/Menu/TopMenu.svelte
index e2e670fe..51b255bb 100644
--- a/src/lib/themes/material3/Menu/TopMenu.svelte
+++ b/src/lib/themes/material3/Menu/TopMenu.svelte
@@ -19,8 +19,7 @@
 
 <TopAppBar variant="static" dense={true} color="primary">
 	<Row>
-		<TopLeftMenu links={left_links} />
-		<Section toolbar>
+		<Section align="start">
 			{#if adminConfig?.head?.brandName}
 				<Title>{adminConfig.head.brandName}</Title>
 			{/if}
@@ -28,9 +27,12 @@
 				<Title><small>{adminConfig.head.appName}</small></Title>
 			{/if}
 		</Section>
-		{#if right_links.length}
-			<TopRightMenu links={right_links} />
-		{/if}
+		<TopLeftMenu links={left_links} />
+		<Section align="end">
+			{#if right_links.length}
+				<TopRightMenu links={right_links} />
+			{/if}
+		</Section>
 	</Row>
 </TopAppBar>
 
diff --git a/src/testApp/Dashboard.ts b/src/testApp/Dashboard.ts
index 1f1ec99b..4e62b832 100644
--- a/src/testApp/Dashboard.ts
+++ b/src/testApp/Dashboard.ts
@@ -4,7 +4,7 @@ import Home from 'carbon-icons-svelte/lib/Home.svelte';
 import Menu from 'carbon-icons-svelte/lib/Menu.svelte';
 import Switcher from 'carbon-icons-svelte/lib/Switcher.svelte';
 
-import { DashboardDefinition, CallbackAction, UrlAction, Submenu } from '$lib';
+import { DashboardDefinition, Divider, CallbackAction, UrlAction, Submenu } from '$lib';
 import { material as theme } from '$lib/themes/svelte';
 
 import fr from './translations/fr';
@@ -36,6 +36,7 @@ export const dashboard = new DashboardDefinition({
 	topLeftMenu: [
 		new UrlAction('Homepage', '/', Home),
 		new UrlAction('Books', '/admin/books/list', Book),
+		new Divider(),
 		new CallbackAction('Callback link', null, (item?: object | undefined) => {
 			alert('Hey, this link is called with Javascript!');
 		}),
@@ -47,6 +48,7 @@ export const dashboard = new DashboardDefinition({
 	sideMenu: [
 		new UrlAction('Homepage', '/', Home),
 		new UrlAction('Books', '/admin/books/list', Book),
+		new Divider(),
 		new CallbackAction('Callback link', null, () => {
 			alert('Hey, this link is called with Javascript!');
 		}),