@edgedev/create-edge-app 1.1.2 → 1.1.3

package/layouts/app.vue

@@ -104,6 +104,30 @@ const menuItems = [
     icon: 'Package',
   },
 ]
+
+const slots = useSlots()
+const hasLeftPanel = computed(() => {
+  const leftPanelSlot = slots['left-panel']
+  if (!leftPanelSlot) {
+    return false
+  }
+  const slotContent = leftPanelSlot()
+  return slotContent.length > 0 && slotContent.some(node => node.children && node.children.length > 0)
+})
+
+const leftPanelDefaultSize = computed(() => {
+  if (hasLeftPanel.value) {
+    return 20
+  }
+  return 0
+})
+
+const mainPanelDefaultSize = computed(() => {
+  if (hasLeftPanel.value) {
+    return 80
+  }
+  return 100
+})
 </script>
 
 <template>
@@ -156,35 +180,37 @@ const menuItems = [
             </template>
           </edge-side-bar>
         </div>
-        <div class="grow h-full flex flex-col h-screen">
-          <edge-menu
-            v-if="edgeFirebase.user.loggedIn"
-            type="nav"
-            nav-class="justify-left mr-8"
-            :menu-items="menuItems"
-          >
-            <template #start>
-              <SidebarTrigger class="-ml-2 mr-2 h-4 w-4" />
-              <Package class="h-6 w-6 mr-2" />
-              <h1 class="text-xl font-bold">
-                {{ orgName }}
-              </h1>
-            </template>
-          </edge-menu>
-          <slot />
-          <edge-menu
-            v-if="edgeFirebase.user.loggedIn"
-            type="footer"
-            nav-class="justify-end mr-8"
-            :menu-items="menuItems"
-          >
-            <template #start>
-              <div class="text-xs text-muted-foreground">
-                Copyright {{ new Date().getFullYear() }}
-              </div>
-            </template>
-          </edge-menu>
-        </div>
+        <ResizablePanelGroup
+          direction="horizontal"
+          class="h-full w-full"
+        >
+          <ResizablePanel class="bg-sidebar text-sidebar-foreground" :default-size="leftPanelDefaultSize">
+            <slot name="left-panel" />
+          </ResizablePanel>
+          <ResizableHandle v-if="hasLeftPanel" with-handle />
+          <ResizablePanel :default-size="mainPanelDefaultSize">
+            <div class="grow h-full flex flex-col h-screen">
+              <edge-menu
+                v-if="edgeFirebase.user.loggedIn"
+                type="nav"
+                nav-class="justify-left"
+                class="px-1 border-none"
+              >
+                <template #start>
+                  <edge-shad-button
+                    v-show="edgeGlobal.edgeState.sidebar.isMobile"
+                    variant="icon"
+                    class="p-1"
+                    @click="edgeGlobal.edgeState.sidebar.toggleSidebar"
+                  >
+                    <MenuSquare />
+                  </edge-shad-button>
+                </template>
+              </edge-menu>
+              <slot />
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
       </edge-sidebar-provider>
     </div>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgedev/create-edge-app",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Create Edge Starter App",
   "bin": {
     "create-edge-app": "./bin/cli.js"

package/plugins/icons.ts

@@ -1,6 +1,8 @@
 import {
+  AlertCircle,
   ArrowLeft,
   ArrowRight,
+  BookImage,
   Box,
   Braces,
   Brackets,
@@ -8,30 +10,42 @@ import {
   Check,
   ChevronDown,
   ChevronLeft,
+  ChevronLeftCircle,
   ChevronRight,
+  ChevronRightCircle,
+  ChevronUp,
   ChevronsUpDown,
   CircleUser,
   Copy,
   Eye,
   EyeOff,
   FilePenLine,
+  Fullscreen,
   Grip,
   Group,
-  Info,
-  LayoutDashboard,
+  Hourglass,
+  Image,
+  Info, LayoutDashboard,
   List,
   ListPlus,
   Loader2,
-  LogOut, MoreHorizontal,
+  LogOut,
+  MenuSquare,
+  MoreHorizontal,
+  Newspaper,
   Package,
+  PauseCircle,
   Pencil,
   PlusIcon,
   Settings,
   Settings2,
   Trash,
   TrashIcon,
+  Upload,
   User,
   Users,
+  X,
+  ZoomIn,
 } from 'lucide-vue-next'
 
 export default defineNuxtPlugin((nuxtApp) => {
@@ -50,6 +64,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('EyeOff', EyeOff)
   nuxtApp.vueApp.component('CircleUser', CircleUser)
   nuxtApp.vueApp.component('Group', Group)
+  nuxtApp.vueApp.component('Hourglass', Hourglass)
   nuxtApp.vueApp.component('Settings', Settings)
   nuxtApp.vueApp.component('Users', Users)
   nuxtApp.vueApp.component('Settings2', Settings2)
@@ -65,8 +80,21 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('Box', Box)
   nuxtApp.vueApp.component('LogOut', LogOut)
   nuxtApp.vueApp.component('Info', Info)
+  nuxtApp.vueApp.component('Image', Image)
   nuxtApp.vueApp.component('FilePenLine', FilePenLine)
   nuxtApp.vueApp.component('List', List)
   nuxtApp.vueApp.component('Copy', Copy)
   nuxtApp.vueApp.component('LayoutDashboard', LayoutDashboard)
+  nuxtApp.vueApp.component('Upload', Upload)
+  nuxtApp.vueApp.component('X', X)
+  nuxtApp.vueApp.component('ZoomIn', ZoomIn)
+  nuxtApp.vueApp.component('Newspaper', Newspaper)
+  nuxtApp.vueApp.component('BookImage', BookImage)
+  nuxtApp.vueApp.component('AlertCircle', AlertCircle)
+  nuxtApp.vueApp.component('PauseCircle', PauseCircle)
+  nuxtApp.vueApp.component('ChevronUp', ChevronUp)
+  nuxtApp.vueApp.component('ChevronLeftCircle', ChevronLeftCircle)
+  nuxtApp.vueApp.component('ChevronRightCircle', ChevronRightCircle)
+  nuxtApp.vueApp.component('Fullscreen', Fullscreen)
+  nuxtApp.vueApp.component('MenuSquare', MenuSquare)
 })