Add "autoCloseSideMenu" to AdminConfig to allow customizing left-side…

… menu

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v0.3.6
+
+Changes:
+
+- Add "autoCloseSideMenu" to AdminConfig to allow customizing left-side menu
+
 # v0.3.5
 
 Changes:

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@orbitale/svelte-admin",
-	"version": "0.3.5",
+	"version": "0.3.6",
 	"description": "(prototype) Crud base for Svelte projects",
 	"main": "src/lib/index.js",
 	"repository": "https://github.com/Orbitale/SvelteAdmin",

src/lib/Dashboard/definition.ts

@@ -1,10 +1,10 @@
 import type { MenuLink } from '$lib/Menu/MenuLinks';
 import type { Dictionaries } from '$lib/admin_i18n';
 import type { CrudDefinition } from '$lib/Crud/definition';
-import type { AdminConfig } from '$lib/config/adminConfig';
+import {type AdminConfig, emptyAdminConfig} from '$lib/config/adminConfig';
 
 export type DashboardDefinitionOptions<T> = {
-	adminConfig: AdminConfig;
+	adminConfig: Partial<AdminConfig>;
 	cruds: Array<CrudDefinition<T>>;
 	sideMenu?: Array<MenuLink>;
 	topLeftMenu?: Array<MenuLink>;
@@ -23,7 +23,7 @@ export class DashboardDefinition<T> {
 	public readonly options = {};
 
 	constructor(options: DashboardDefinitionOptions<T>) {
-		this.adminConfig = options.adminConfig;
+		this.adminConfig = {...emptyAdminConfig(), ...options.adminConfig};
 		this.cruds = options.cruds;
 		this.sideMenu = options.sideMenu || [];
 		this.topLeftMenu = options.topLeftMenu || [];

src/lib/Menu/stores.ts

@@ -0,0 +1,3 @@
+import {writable} from "svelte/store";
+
+export const sideMenuOpen = writable(true);

src/lib/actions.ts

@@ -1,7 +1,7 @@
 import type { ComponentType, SvelteComponent } from 'svelte';
 import type { KeyValueObject, Optional } from '$lib/genericTypes';
 
-export type ActionIcon = object | string | SvelteComponent | ComponentType;
+export type ActionIcon = string | SvelteComponent | ComponentType;
 
 export interface Action {
 	get label(): string;
@@ -26,14 +26,14 @@ export abstract class DefaultAction implements Action {
 }
 
 export class CallbackAction extends DefaultAction {
-	private readonly _callback: (item: object) => string;
+	private readonly _callback: (item?: object|undefined) => void;
 
-	constructor(label: string, icon: Optional<ActionIcon>, callback: (item: object) => string) {
+	constructor(label: string, icon: Optional<ActionIcon>, callback: (item?: object|undefined) => void) {
 		super(label, icon);
 		this._callback = callback;
 	}
 
-	public call(item: object): string {
+	public call(item?: object|undefined): void {
 		return this._callback.call(null, item);
 	}
 }

src/lib/config/adminConfig.ts

@@ -1,5 +1,6 @@
 export type AdminConfig = {
 	defaultLocale: string;
+	autoCloseSideMenu: boolean;
 	head: {
 		brandName: string;
 		appName: string;
@@ -9,6 +10,7 @@ export type AdminConfig = {
 export function emptyAdminConfig(): AdminConfig {
 	return {
 		defaultLocale: 'en',
+		autoCloseSideMenu: false,
 		head: {
 			appName: '',
 			brandName: ''

src/lib/themes/carbon/Icon.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type {ActionIcon} from "$lib/actions.ts";
+    import {SvelteComponent} from "svelte";
+
+    export let icon: ActionIcon;
+
+    if (!(icon instanceof SvelteComponent) && typeof icon !== 'function' && typeof icon !== 'string') {
+        console.error(`Wrong icon type: ${typeof icon}`);
+    }
+</script>
+
+{#if icon instanceof SvelteComponent || typeof icon === 'function'}
+    <svelte:component this={icon} />
+{:else if typeof icon === 'string'}
+    {icon}
+{:else}
+    {icon.toString()}
+{/if}

src/lib/themes/carbon/Layout/AdminLayout.svelte

@@ -35,7 +35,7 @@
 
 <slot name="side_menu">
 	{#if side_menu_links.length}
-		<SideMenu links={side_menu_links} />
+		<SideMenu autoClose={adminConfig?.autoCloseSideMenu || false} links={side_menu_links} />
 	{/if}
 </slot>
 

src/lib/themes/carbon/Menu/SideMenu.svelte

@@ -9,15 +9,19 @@
 	import Folder from 'carbon-icons-svelte/lib/Folder.svelte';
 	import Link from 'carbon-icons-svelte/lib/Link.svelte';
 
+	export let autoClose = true;
+
 	import { _ } from 'svelte-i18n';
 
 	import { Divider, Submenu } from '$lib/Menu/MenuLinks';
+	import { sideMenuOpen } from "$lib/Menu/stores.ts";
 	import { type Action, CallbackAction, UrlAction } from '$lib/actions';
+	import Icon from '../Icon.svelte';
 
 	export let links: Array<Action> = [];
 </script>
 
-<SideNav isOpen={true} fixed={true}>
+<SideNav rail={autoClose} bind:isOpen={$sideMenuOpen}>
 	<SideNavItems>
 		{#each links as link}
 			{#if link instanceof Submenu}
@@ -26,15 +30,18 @@
 						{#if subLink instanceof Divider}
 							<br />
 						{:else if subLink instanceof UrlAction}
-							<SideNavMenuItem icon={subLink.icon || Link} href={subLink.url()}>
+							<SideNavMenuItem href={subLink.url()}>
+								<Icon icon={subLink.icon} />
 								{subLink.label ? $_(subLink.label) : ''}
 							</SideNavMenuItem>
 						{:else if subLink instanceof CallbackAction}
-							<SideNavMenuItem icon={subLink.icon || Link} on:click={() => subLink.call()}>
+							<SideNavMenuItem on:click={() => subLink.call()}>
+								<Icon icon={subLink.icon} />
 								{subLink.label ? $_(subLink.label) : ''}
 							</SideNavMenuItem>
 						{:else}
-							<SideNavMenuItem icon={subLink.icon || Link}>
+							<SideNavMenuItem>
+								<Icon icon={subLink.icon} />
 								{subLink.label ? $_(subLink.label) : ''}
 							</SideNavMenuItem>
 						{/if}

src/lib/themes/carbon/Menu/TopMenu.svelte

@@ -11,11 +11,14 @@
 	export let right_links: Array<MenuLink> = [];
 
 	export let adminConfig: AdminConfig = emptyAdminConfig();
+
+	import { sideMenuOpen } from "$lib/Menu/stores.ts";
 </script>
 
 <Header
 	company={adminConfig?.head?.brandName || ''}
 	platformName={adminConfig?.head?.appName || ''}
+	bind:isSideNavOpen={$sideMenuOpen}
 >
 	<svelte:fragment slot="skip-to-content">
 		<SkipToContent />

src/testApp/Dashboard.ts

@@ -2,21 +2,30 @@ import Book from 'carbon-icons-svelte/lib/Book.svelte';
 import Home from 'carbon-icons-svelte/lib/Home.svelte';
 
 import { DashboardDefinition } from '$lib/Dashboard/definition';
-import { UrlAction } from '$lib/actions';
+import {CallbackAction, UrlAction} from '$lib/actions';
 
 import fr from './translations/fr';
 import { bookCrud } from './BookCrud';
+import {Submenu} from "$lib";
 
 export const dashboard = new DashboardDefinition({
 	adminConfig: {
+		defaultLocale: 'en',
+		autoCloseSideMenu: false,
 		head: {
 			brandName: 'Svelte Admin',
 			appName: 'Demo'
 		}
 	},
 	sideMenu: [
 		new UrlAction('Homepage', '/', Home),
-		new UrlAction('Books', '/admin/books/list', Book)
+		new Submenu('Entities', null, [
+			new UrlAction('Books (Svelte icon)', '/admin/books/list', Book),
+			new UrlAction('Books (String emoji icon)', '/admin/books/list', '📚'),
+		]),
+		new CallbackAction('Callback link', null, (item?: object|undefined) => {
+			alert('Hey, this link is called with Javascript!');
+		})
 	],
 	localeDictionaries: {
 		fr: fr