Continue top menu with Material, remaining is tooltips and sub-submenus.

Orbitale · Sep 13, 2024 · 62fcef2 · 62fcef2
1 parent 2cdcc5a
commit 62fcef2
Show file tree

Hide file tree

Showing 9 changed files with 253 additions and 201 deletions.
diff --git a/src/lib/themes/material3/FormFieldsComponents/ColumnsField.svelte b/src/lib/themes/material3/FormFieldsComponents/ColumnsField.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { CrudOperation } from '$lib/Crud/Operations';
-	import type { Columns as ColumnField } from '$lib/FieldDefinitions/Columns.ts';
+	import type { Columns as ColumnField } from '$lib/FieldDefinitions/Columns';
 	import CrudFormField from '$lib/themes/material3/Crud/CrudFormField.svelte';
 	import Column from 'carbon-components-svelte/src/Grid/Column.svelte';
 

diff --git a/src/lib/themes/material3/Menu/Internal/Divider.svelte b/src/lib/themes/material3/Menu/Internal/Divider.svelte
@@ -0,0 +1,11 @@
+<span></span>
+
+<style>
+    span {
+        display: block;
+        width: 1px;
+        margin: 0 0.5rem;
+        height: 30%;
+        background-color: #ffffffcc;
+    }
+</style>
diff --git a/src/lib/themes/material3/Menu/Internal/LeftSubmenuItem.svelte b/src/lib/themes/material3/Menu/Internal/LeftSubmenuItem.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import Menu from '@smui/menu';
+	import IconButton from '@smui/icon-button/dist/IconButton.svelte';
+	import List, {Item, Separator, SecondaryText} from '@smui/list';
+	import Button, { Label } from '@smui/button';
+	import { _ } from 'svelte-i18n';
+
+	import {Divider, Submenu} from '$lib/Menu/MenuLinks';
+	import { CallbackAction, UrlAction } from '$lib/actions';
+	import Icon from '$lib/Layout/Icon.svelte';
+
+	export let link: Submenu;
+	let submenu: Menu;
+
+	let isOpen: boolean;
+	let icon: string = '';
+
+	$: {
+		icon = isOpen ? 'arrow_drop_up' : 'arrow_drop_down';
+	}
+</script>
+
+<div>
+	<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>
+						<SecondaryText tag="a" href={submenuLink.url()}>
+							{#if submenuLink.icon}
+								<Icon icon={submenuLink.icon} />
+							{/if}
+							{submenuLink.label ? $_(submenuLink.label) : ''}
+						</SecondaryText>
+					</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>
+</div>
+<!--
+
+<HeaderNavMenu icon={link.icon || Folder} text={link.label ? $_(link.label) : ''}>
+    {#each link.links as subLink}
+        {#if subLink instanceof Divider}
+            <br />
+        {:else if subLink instanceof UrlAction}
+            <HeaderNavItem icon={subLink.icon || Link} href={subLink.url()}>
+                {subLink.label ? $_(subLink.label) : ''}
+            </HeaderNavItem>
+        {:else if subLink instanceof CallbackAction}
+            <HeaderNavItem icon={subLink.icon || Link} on:click={() => subLink.call()}>
+                {subLink.label ? $_(subLink.label) : ''}
+            </HeaderNavItem>
+        {:else}
+            <HeaderNavItem icon={subLink.icon || Link}>
+                {subLink.label ? $_(subLink.label) : ''}
+            </HeaderNavItem>
+        {/if}
+    {/each}
+</HeaderNavMenu>
+
+-->
diff --git a/src/lib/themes/material3/Menu/InternalSubmenu.svelte b/src/lib/themes/material3/Menu/InternalSubmenu.svelte
diff --git a/src/lib/themes/material3/Menu/TopLeftMenu.svelte b/src/lib/themes/material3/Menu/TopLeftMenu.svelte
@@ -3,73 +3,65 @@
 	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 { Divider, type MenuLink, Submenu } from '$lib/Menu/MenuLinks';
 	import { CallbackAction, UrlAction } from '$lib/actions';
-	import InternalSubmenu from './InternalSubmenu.svelte';
+	import LeftSubmenuItem from './Internal/LeftSubmenuItem.svelte';
+	import InternalDivider from './Internal/Divider.svelte';
 	import { Icon } from '$lib';
 
 	export let links: Array<MenuLink> = [];
 </script>
 
 {#each links as link}
 	{#if link instanceof Submenu}
-		<Section>
-			<InternalSubmenu {link} />
-		</Section>
+		<LeftSubmenuItem {link} />
 	{:else if link instanceof Divider}
-		<Section>|</Section>
+		<InternalDivider />
 	{:else if link instanceof UrlAction}
-		<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>
+		<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>
 	{:else if link instanceof CallbackAction}
-		<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>
+		<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>
 	{:else}
-		<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>
+		<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>
 	{/if}
 {/each}
diff --git a/src/lib/themes/material3/Menu/TopMenu.svelte b/src/lib/themes/material3/Menu/TopMenu.svelte
@@ -2,6 +2,7 @@
 	import TopAppBar from '@smui/top-app-bar/dist/TopAppBar.svelte';
 	import '@smui/top-app-bar/bare.css';
 	import { Row, Title } from '@smui/top-app-bar';
+	import IconButton from '@smui/icon-button/dist/IconButton.svelte';
 	import Section from '@smui/top-app-bar/dist/Section.svelte';
 
 	import type { MenuLink } from '$lib/Menu/MenuLinks';
@@ -14,25 +15,40 @@
 
 	export let adminConfig: AdminConfig = emptyAdminConfig();
 
-	import { sideMenuOpen } from '$lib/Menu/stores';
+	import Menu from "@smui/menu";
+	import List from "@smui/list";
+	import {onMount} from "svelte";
+
+	let isRightMenuOpen: boolean;
+	let leftMenuIcon: string = '';
+	let rightMenu: Menu;
+
+	$: {
+		leftMenuIcon = isRightMenuOpen ? 'apps' : 'apps';
+	}
+	onMount(() => {
+		rightMenu.setOpen(true);
+	})
 </script>
 
 <TopAppBar variant="static" dense={true} color="primary">
 	<Row>
-		<Section align="start">
+		<Section>
 			{#if adminConfig?.head?.brandName}
 				<Title>{adminConfig.head.brandName}</Title>
 			{/if}
 			{#if adminConfig?.head?.appName}
 				<Title><small>{adminConfig.head.appName}</small></Title>
 			{/if}
-		</Section>
-		<TopLeftMenu links={left_links} />
-		<Section align="end">
-			{#if right_links.length}
-				<TopRightMenu links={right_links} />
+			{#if left_links.length}
+				<TopLeftMenu links={left_links} />
 			{/if}
 		</Section>
+		{#if right_links.length}
+			<Section align="end" toolbar>
+				<TopRightMenu links={right_links} />
+			</Section>
+		{/if}
 	</Row>
 </TopAppBar>