Make menu composable

Author: mekanix

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@freenit-framework/core",
-  "version": "0.0.46",
+  "version": "0.0.47",
   "private": false,
   "author": "Goran Mekić <meka@tilda.center>",
   "license": "BSD-2-Clause",

package.json

@@ -1,35 +1,12 @@
 <script lang="ts">
-  let { open, toggle } = $props()
+  let { children, open, toggle } = $props()
 </script>
 
 <div class="root" class:open>
   <div class="relative">
-    <button class="button close" onclick={toggle}>x</button>
-  </div>
-  <div class="wrapper">
-    <a href="/">Home</a>
-    <div class="item">
-      Auth
-      <a href="/login">Login</a>
-      <a href="/register">Register</a>
-      <a href="/verify">Verify</a>
-      <a href="/logout">Logout</a>
-    </div>
-    <div class="item">
-      Users
-      <a href="/profile">Profile</a>
-      <a href="/users">List</a>
-      <a href="/users/1">Detail</a>
-    </div>
-    <div class="item">
-      Role
-      <a href="/roles">List</a>
-      <a href="/roles/1">Detail</a>
-    </div>
-    <div class="item">
-      Theme
-      <a href="/themes">List</a>
-      <a href="/themes/Freenit">Detail</a>
+    <div class="wrapper">
+      {@render children?.()}
+      <button class="button close" onclick={toggle}>x</button>
     </div>
   </div>
 </div>
@@ -42,20 +19,25 @@
     width: 0;
     height: 100vh;
     max-width: 300px;
-    background-color: #eee;
+    background-color: white;
     display: flex;
     flex-direction: column;
     overflow-x: hidden;
     overflow-y: scroll;
-    transition: width 1s;
+    transition: width 0.5s;
   }
 
   .wrapper {
+    display: flex;
+    flex-direction: column;
     padding: 20px;
   }
 
   .open {
     width: 100%;
+    border-right-style: solid;
+    border-width: 1px;
+    border-color: #eee;
   }
 
   .relative {
@@ -67,15 +49,4 @@
     top: 0;
     right: 0;
   }
-
-  .item {
-    color: var(--color-primary);
-    cursor: grabbing;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .item a {
-    margin-left: 20px;
-  }
 </style>

src/lib/LeftPane.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  let { icon, onclick, href, children } = $props()
+</script>
+
+<a class="item" {href}>
+  <svg class="icon dark" {onclick} onkeyup={onclick} onkeydown={onclick} role="button" tabindex={0}>
+    <path d={icon} />
+  </svg>
+  {@render children?.()}
+</a>
+
+<style>
+  .item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: center;
+  }
+
+  .icon {
+    width: 26px;
+    height: 26px;
+    fill: white;
+  }
+
+  .dark {
+    fill: black;
+  }
+</style>

src/lib/MenuItem.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import {
+    mdiAccount,
+    mdiAccountGroup,
+    mdiArrowDownBoldCircleOutline,
+    mdiCookieEditOutline,
+    mdiFaceManProfile,
+    mdiLoginVariant,
+    mdiLogoutVariant,
+    mdiStamper,
+  } from '@mdi/js'
+  import store from '$lib/store'
+  import MenuItem from '$lib/MenuItem.svelte'
+
+  let { toggle, logout } = $props()
+</script>
+
+{#if store.auth.loggedin()}
+  {#if store.user.profile.admin}
+    <MenuItem href="/users" {toggle} icon={mdiAccount}>Users</MenuItem>
+    <MenuItem href="/roles" {toggle} icon={mdiAccountGroup}>Roles</MenuItem>
+    <MenuItem href="/themes" {toggle} icon={mdiCookieEditOutline}>Themes</MenuItem>
+  {/if}
+  <MenuItem href="/profile" {toggle} icon={mdiFaceManProfile}>Profile</MenuItem>
+  <MenuItem href="/logout" toggle={logout} icon={mdiLogoutVariant}>Logout</MenuItem>
+{:else}
+  <MenuItem href="/register" {toggle} icon={mdiArrowDownBoldCircleOutline}>Register</MenuItem>
+  <MenuItem href="/verify" {toggle} icon={mdiStamper}>Verify</MenuItem>
+  <MenuItem href="/login" {toggle} icon={mdiLoginVariant}>Login</MenuItem>
+{/if}

src/lib/MenuItems.svelte

@@ -1,5 +1,7 @@
 export { default as LeftPane } from './LeftPane.svelte'
 export { default as MenuBar } from './MenuBar.svelte'
+export { default as MenuItem } from './MenuItem.svelte'
+export { default as MenuItems } from './MenuItems.svelte'
 export { default as Login } from './Login.svelte'
 export { default as Modal } from './Modal.svelte'
 export { default as Register } from './Register.svelte'

src/lib/index.ts

@@ -1,11 +1,12 @@
-<script>
+<script lang="ts">
   import 'chota'
   import './app.css'
   import { onMount } from 'svelte'
   import { SvelteToast } from '@zerodevx/svelte-toast'
   import store from '$lib/store'
   import LeftPane from '$lib/LeftPane.svelte'
   import MenuBar from '$lib/MenuBar.svelte'
+  import MenuItems from '$lib/MenuItems.svelte'
 
   const options = {}
   let open = $state(false)
@@ -15,7 +16,14 @@
     open = !open
   }
 
-  onMount(async () => { await store.auth.refresh_token() })
+  const logout = () => {
+    open = !open
+    store.auth.logout()
+  }
+
+  onMount(async () => {
+    await store.auth.refresh_token()
+  })
 </script>
 
 <svelte:head>
@@ -25,7 +33,9 @@
 
 <SvelteToast {options} />
 <MenuBar {toggle} title="Freenit" />
-<LeftPane {open} {toggle} />
+<LeftPane {open} {toggle}>
+  <MenuItems {toggle} {logout} />
+</LeftPane>
 <section class="root">
   <div class="main">
     {@render children?.()}