https://github.com/tommertom/svelte-ionic-sidemenu-demo

Ionic Sidemnu starter demo built with Svelte
https://github.com/tommertom/svelte-ionic-sidemenu-demo

Last synced: 19 days ago
JSON representation

Ionic Sidemnu starter demo built with Svelte

• Host: GitHub
• URL: https://github.com/tommertom/svelte-ionic-sidemenu-demo
• Owner: Tommertom
• License: mit
• Created: 2022-06-25T22:53:23.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-03T15:58:25.000Z (about 2 years ago)
• Last Synced: 2024-10-05T03:41:13.964Z (about 1 month ago)
• Language: TypeScript
• Size: 502 KB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        

 Ionic Svelte Demo - SIDEMENU
 




  

    

  








  A showcase app for Ionic. Supercharged by Svelte and Vite.






# Ionic Svelte Blank starter

A starter app for all Ionic UI elements - based on Ionic's Sidemenu Starter

Install this starter:

```bash

git clone https://github.com/Tommertom/svelte-ionic-sidemenu-demo.git 

cd svelte-ionic-sidemenu-demo

npm i

npm run dev

```

Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-sidemenu-demo

When using the online playground - make sure you pop-out the render window to see the demo in full size.

N.B. Menucontroller does not see the menu by default - you need to register the menu item manually - extra function added to help you with that (`registerMenu(menu-id:string)`) - ``see Menu.svelte with working example

## Screenshots

  

    Main - phone

    Menu - phone

    Desktop - sidepane menu

  

  

    



    

     

     

   

## All starters - how to get started quickly!

If you want to get started with Ionic, Svelte and Vite, just use one of the starters:

* Blank demo 

  - https://github.com/Tommertom/svelte-ionic-blank-demo

  - `npx degit Tommertom/svelte-ionic-blank-demo svelte-ionic-blank-demo`

  - Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-blank-demo

* Tabs demo 

  - https://github.com/Tommertom/svelte-ionic-tabs-demo

  - `npx degit Tommertom/svelte-ionic-tabs-demo svelte-ionic-tabs-demo`

  - Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-tabs-demo

* Sidemenu demo 

  - https://github.com/Tommertom/svelte-ionic-sidemenu-demo

  - `npx degit Tommertom/svelte-ionic-sidemenu-demo svelte-ionic-sidemenu-demo`

  - Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-sidemenu-demo

* Mystarter demo - taking photo with Capacitor 

  - https://github.com/Tommertom/svelte-ionic-mystarter-demo

  - `npx degit Tommertom/svelte-ionic-mystarter-demo svelte-ionic-mystarter-demo`

  - Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-mystarter-demo

* List demo 

  - https://github.com/Tommertom/svelte-ionic-list-demo

  - `npx degit Tommertom/svelte-ionic-list-demo svelte-ionic-list-demo`

  - Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-list-demo

* Conference demo - (sort of...check its README) 

  - https://github.com/Tommertom/svelte-ionic-conference-demo

  - `npx degit Tommertom/svelte-ionic-conference-demo svelte-ionic-conference-demo`

  - Online playground - https://codesandbox.io/s/github/Tommertom/svelte-ionic-conference-demo

When using the online playground - make sure you pop-out the render window to see the demo in full size.

And the official demo app - https://github.com/Tommertom/svelte-ionic-app

  

## PWA Interface - easing the PWA work in your app

To help you managing state of the service worker and the various events, a simple svelte store is provided for (`lib/pwa.ts`). This store wraps the various events of the service worker in a readable store and a number of derived stores so you can easily listen to various events.

While most tutorials provide you the basics to do all these separately and in an "Hello world" fashion, having all in a store helps wiring things up to the UI across various places in the code. 

The following derived stores are implemented:

- `needRefresh`:`boolean` telling you if there is an update available

- `updateObject`:`undefined|UpdateObject`. When UpdateObject is provided, you can call its `updateSWObject()` method to update the app

- `offlineReady`:`boolean` telling you all offline assets have been loaded

- `registerError`:`any` - the error message when the registration of the service worker failed

- `registration`:`undefined|ServiceWorkerRegistration` - the service worker registration object - when succesfull

- `beforeInstallPrompt` - `undefined|BeforeInstallPromptEvent` - which you can use to fire the `.prompt()` method to invoke the install prompt. N.B. this needs to happen right after an userevent (like button press)!

All these props are also available via the `pwaStatusStream` readable store.

## Roxi Routify 3

This code uses Roxi's newest version of its router. See https://v3.ci.routify.dev/docs#guide to know more. By the time of this writing, this is actually still in beta. If you want to change router, please make sure you change the hooks in IonPage.svelte (part of `$ionic/svelte/components/IonPage.svelte`);

# Issues - work in progress and acknowledgments

Please refer to the README on the main repo - https://github.com/Tommertom/svelte-ionic-app