@likable-hair/svelte 2.0.9 → 3.0.1

package/dist/components/layouts/CollapsibleSideBarLayout.svelte

@@ -1,348 +1,156 @@
-<script>import { createEventDispatcher } from "svelte";
+<script>import "$lib/css/main.css";
+import "./CollapsibleSideBarLayout.css";
+import { createEventDispatcher } from "svelte";
 import CollapsibleDivider from "../simple/common/CollapsibleDivider.svelte";
-import Icon from "../simple/media/Icon.svelte";
 import MediaQuery from "../simple/common/MediaQuery.svelte";
-export let _pagePadding = "20px 0 0 30px", _menuElementMarginBottom = "30px", _menuElementFontSize = "1.1rem", _menuElementFontWeight = "400", _menuColor = "#454444", _selectedMenuColor = "#0b66cc", _expandedSideBarWidth = "16rem", _collapsedSideBarWidth = "4.6rem", _headerHeight = "80px", _collapseTransitionTime = "0.4s", _sideBarBackgroundColor = "white", _overlayColor = "hsla(240,5%,65%,.2)", _headerBackgroundColor = "#FFFF", _dividersColor = "#d2d2d2";
-export let drawerOpened = false, drawerCollapsed = false, menuItems = [], menuIconsSize = 16, selectedMenuElementId = void 0, fullLogo = void 0, partialLogo = void 0, openedHeader = false;
+import SelectableMenuList from "../simple/lists/SelectableMenuList.svelte";
+import HeaderMenu from "../simple/navigation/HeaderMenu.svelte";
+export let drawerOpened = false, drawerCollapsed = false, menuItems = [], selectedMenuElementName = void 0, fullLogo = void 0, partialLogo = void 0;
 let dispatch = createEventDispatcher();
-function toggleMenu() {
-  drawerOpened = !drawerOpened;
-  dispatch("drawer-change", { opened: drawerOpened });
+function handleMenuSelect(event) {
+  dispatch("menu-select", {
+    menu: event.detail.item
+  });
 }
-function toggleExpansion() {
-  drawerCollapsed = !drawerCollapsed;
+function handleCollpsabledDividerChange() {
+  dispatch("collapse", {
+    collapsed: drawerCollapsed
+  });
 }
-function handleMenuClick(menu) {
-  if ("id" in menu) {
-    selectedMenuElementId = menu.id;
-    dispatch("menu-click", { menu });
-  }
-}
-function handleOverlayClick() {
-}
-$:
-  if (drawerOpened)
-    drawerCollapsed = false;
 </script>
 
 <MediaQuery let:mAndDown>
-  <div
-    style:--collapsible-side-bar-layout-expanded-width={_expandedSideBarWidth}
-    style:--collapsible-side-bar-layout-header-height={openedHeader || mAndDown ? _headerHeight : "0px"}
-    style:--collapsible-side-bar-layout-collapsed-width={_collapsedSideBarWidth}
-    style:--collapsible-side-bar-layout-collapse-transition-time={_collapseTransitionTime}
-    style:--collapsible-side-bar-layout-menu-element-margin-bottom={_menuElementMarginBottom}
-    style:--collapsible-side-bar-layout-menu-element-font-size={_menuElementFontSize}
-    style:--collapsible-side-bar-layout-menu-element-font-weight={_menuElementFontWeight}
-    style:--collapsible-side-bar-layout-menu-color={_menuColor}
-    style:--collapsible-side-bar-layout-selected-menu-color={_selectedMenuColor}
-    style:--collapsible-side-bar-layout-sidebar-background-color={_sideBarBackgroundColor}
-    style:--collapsible-side-bar-layout-overlay-color={_overlayColor}
-    style:--collapsible-side-bar-layout-header-background-color={_headerBackgroundColor}
-    style:--collapsible-side-bar-layout-divider-color={_dividersColor}
-  >
-    <header
-      class="side-bar"
+  <div class="container">
+    <div 
+      class="sidebar"
       class:collapsed={drawerCollapsed}
-      class:opened={drawerOpened}
     >
-      <div
-        class="header-toolbar"
+      <div 
+        class="logo-container"
         class:collapsed={drawerCollapsed}
-        class:opened={drawerOpened}
       >
-        <slot name="menu">
-          <div class="inner-menu">
-            {#if mAndDown}
-              <div style:margin-right="2rem">
-                <Icon
-                  name="mdi-menu"
-                  click
-                  on:click={toggleMenu}
-                ></Icon>
-              </div>
-            {/if}
-            {#if openedHeader || mAndDown}
-              <slot name="inner-menu" hamburgerVisible={mAndDown}>
-                Menu
-              </slot>
-            {/if}
-          </div>
+        <slot name="logo" collapsed={drawerCollapsed} mAndDown>
+          <img src={drawerCollapsed ? partialLogo : fullLogo} alt="logo">
         </slot>
       </div>
-      <div
-        class="side-bar-content"
-        class:collapsed={drawerCollapsed}
+      <SelectableMenuList
+        items={menuItems}
+        collapsed={drawerCollapsed}
+        selected={selectedMenuElementName}
+        on:select={handleMenuSelect}
+      ></SelectableMenuList>
+      <CollapsibleDivider
+        bind:collapsed={drawerCollapsed}
+        on:change={handleCollpsabledDividerChange}
+      ></CollapsibleDivider>
+    </div>
+    <div class="header-menu">
+      <HeaderMenu
+        bind:openDrawer={drawerOpened}
+        on:drawer-change
       >
-        <slot name="sidebar-header" hamburgerVisible={mAndDown} collapsed={drawerCollapsed}>
-          {#if !!fullLogo && !!partialLogo && !mAndDown}
-            <div class="logo-container" class:collapsed={drawerCollapsed}>
-              <img src={drawerCollapsed ? partialLogo : fullLogo} alt="logo">
-            </div>
-          {/if}
-        </slot>
-        <slot name="sidebar-main" hamburgerVisible={mAndDown} collapsed={drawerCollapsed}>
-          <div
-            class="menu-container"
-            class:collapsed={drawerCollapsed}
-          >
-            <div
-              class="menu"
-              class:collapsed={drawerCollapsed}
-            >
-              {#each menuItems as menu}
-                {#if 'id' in menu}
-                  <div
-                    class="menu-row"
-                    class:selected={menu.id === selectedMenuElementId}
-                    on:click={() => handleMenuClick(menu)}
-                    on:keypress
-                  >
-                    <div class="menu-icon"><Icon name={menu.icon} size={menuIconsSize}></Icon></div>
-                    <div class="menu-name">{menu.name}</div>
-                  </div>
-                {:else}
-                  <div
-                    style:margin-top={menu.marginTop}
-                    style:margin-bottom={menu.marginBottom}
-                    style:margin-right="14px"
-                    class:divider={menu.divider}
-                    class="menu-row"
-                  >
-                  </div>
-                {/if}
-              {/each}
-            </div>
+        <svelte:fragment slot="title">
+          <div class="header-logo-container">
+            <img src={fullLogo} alt="logo">
           </div>
-        </slot>
-        <CollapsibleDivider
-          bind:collapsed={drawerCollapsed}
-          disabled={mAndDown}
-          _circleColor={_dividersColor}
-          _dividerColor={_dividersColor}
-          _iconColor={_dividersColor}
-        ></CollapsibleDivider>
-        <slot name="sidebar-footer" hamburgerVisible={mAndDown} collapsed={drawerCollapsed}></slot>
-      </div>
-    </header>
-    <div
-      class="main-section"
-      class:collapsed={drawerCollapsed}
-    >
-      <div
-        class="overlay"
-        on:click={handleOverlayClick}
-        on:keypress={handleOverlayClick}
-        class:visible={drawerOpened}
-      ></div>
-      <div
-        style:padding={_pagePadding}
-        class:blurred={drawerOpened}
-      >
-        <slot>Content</slot>
-      </div>
+        </svelte:fragment>
+        <div 
+          slot="drawer" 
+          style:padding="0px 10px 10px 0px"
+        >
+          <SelectableMenuList
+            items={menuItems}
+            collapsed={false}
+            selected={selectedMenuElementName}
+          ></SelectableMenuList>
+        </div>
+      </HeaderMenu>
     </div>
+    <main 
+      class="page-content"
+      class:collapsed={!drawerCollapsed}
+      class:expanded={drawerCollapsed}
+    >
+      <slot></slot>
+    </main>
   </div>
 </MediaQuery>
 
-
 <style>
-
-  .divider {
-    height: 1px;
-    background-color: var(--collapsible-side-bar-layout-divider-color);
-  }
-  
-  .logo-container {
-    padding-left: 16px;
-    padding-top: 10px;
-    transition-property: width padding-left;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-  }
-
-  .logo-container.collapsed {
-    padding-left: 8px;
-  }
-
-  .logo-container img {
-    height: calc(var(--collapsible-side-bar-layout-collapsed-width) - 20px);
-  }
-
-  .side-bar {
-    padding-left: 5px;
-    padding-top: 5px;
+  .sidebar {
     position: fixed;
-    width: var(--collapsible-side-bar-layout-expanded-width);
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transition-property: width padding-left;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-    overflow: hidden;
-    white-space: nowrap;
-    background-color: var(--collapsible-side-bar-layout-sidebar-background-color);
-  }
-
-  .side-bar.collapsed {
-    width: var(--collapsible-side-bar-layout-collapsed-width);
+    bottom: 0px;
+    top: 0px;
+    width: var(
+      --collapsible-side-bar-layout-sidebar-width,
+      var(--collapsible-side-bar-layout-default-sidebar-width)
+    );
+    transition: width .3s cubic-bezier(0.075, 0.82, 0.165, 1);
   }
 
-  .header-toolbar {
-    padding-right: 20px;
-    position: fixed;
-    height: var(--collapsible-side-bar-layout-header-height);
-    left: calc(5px + var(--collapsible-side-bar-layout-expanded-width));
-    transition-property: left;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-    right: 0;
-    top: 0;
+  .sidebar.collapsed {
+    width: var(
+      --collapsible-side-bar-layout-sidebar-collapsed-width,
+      var(--collapsible-side-bar-layout-default-sidebar-collapsed-width)
+    );
   }
 
-  .header-toolbar.collapsed {
-    left: calc(5px + var(--collapsible-side-bar-layout-collapsed-width));
-  }
+  @media (max-width: 991.98px){
+  	.sidebar {
+      visibility: hidden;
+    }
 
-  .main-section {
-    padding-left: var(--collapsible-side-bar-layout-expanded-width);
-    padding-top: var(--collapsible-side-bar-layout-header-height);
-    transition-property: padding-left;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
+    .page-content {
+      padding-top: 1rem;
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
   }
 
-  .main-section.collapsed {
-    padding-left: var(--collapsible-side-bar-layout-collapsed-width);
-  }
+  @media (min-width: 992px){
+  	.header-menu {
+      visibility: hidden;
+    }
 
-  .menu {
-    width: auto;
-    margin-top: 40px;
-    margin-bottom: 20px;
-  }
+    .page-content {
+      margin-top: -3rem;
+      transition: padding-left .3s cubic-bezier(0.075, 0.82, 0.165, 1);
+    }
 
-  .menu-container {
-    padding-left: 30px;
-    padding-right: 30px;
-    transition-property: padding-left padding-right;
-    transition-timing-function: cubic-bezier(.4,0,.2,1);
-    transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-  }
+    .page-content.expanded {
+      padding-left: 6rem
+    }
 
-  .menu-container.collapsed {
-    padding-left: 22px;
-    padding-right: 14px;
+    .page-content.collapsed {
+      padding-left: 18rem
+    }
   }
 
-  .menu .menu-name {
-    transition-property: opacity width;
+  .logo-container {
+    padding-left: 16px;
+    padding-top: 10px;
+    transition-property: width padding-left;
     transition-timing-function: cubic-bezier(.4,0,.2,1);
     transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-    padding-left: 20px;
-    width: 100%;
-    font-size: var(--collapsible-side-bar-layout-menu-element-font-size);
-    font-weight: var(--collapsible-side-bar-layout-menu-element-font-weight);
-  }
-
-  .menu-icon {
-    display: flex;
-    justify-content: center;
-    margin-left: 0;
   }
 
-  .menu.collapsed .menu-name {
-    width: 0px;
+  .logo-container.collapsed {
     padding-left: 0px;
-    opacity: 0;
   }
 
-  .menu-row {
-    display: flex;
-    margin-bottom: var(--collapsible-side-bar-layout-menu-element-margin-bottom);
-    cursor: pointer;
-    color: var(--collapsible-side-bar-layout-menu-color)
-  }
-
-  .menu-row.selected {
-    color: var(--collapsible-side-bar-layout-selected-menu-color);
+  .logo-container img {
+    height: var(
+      --collapsible-side-bar-layout-logo-height,
+      var(--collapsible-side-bar-layout-default-logo-height)
+    );
   }
 
-  .inner-menu {
-    padding-left: 20px;
-    background-color: var(--collapsible-side-bar-layout-header-background-color);
-    height: 100%;
+  .header-logo-container {
     display: flex;
     align-items: center;
-    justify-content: space-between;
   }
 
-  @media (max-width: 1024px) {
-    .side-bar {
-      left: calc(0rem - var(--collapsible-side-bar-layout-expanded-width));
-      right: auto;
-      transition-property: left;
-      transition-timing-function: cubic-bezier(.4,0,.2,1);
-      transition-duration: var(--collapsible-side-bar-layout-collapse-transition-time);
-      top: var(--collapsible-side-bar-layout-header-height);
-      background-color: var(--collapsible-side-bar-layout-sidebar-background-color);
-      bottom: 0;
-      z-index: 30;
-      width: var(--collapsible-side-bar-layout-expanded-width);
-      max-width: 100vw;
-    }
-
-    .side-bar.opened {
-      left: 0;
-    }
-
-    .overlay {
-      position: fixed;
-      top: var(--collapsible-side-bar-layout-header-height);
-      left: 0;
-      bottom: 0;
-      right: 0;
-      z-index: -100;
-      transition-property: backdrop-filter;
-      transition-timing-function: cubic-bezier(.4,0,.2,1);
-      transition-duration: .15s;
-      display: block;
-    }
-
-    .overlay.visible {
-      background-color: var(--collapsible-side-bar-layout-overlay-color);
-      backdrop-filter: blur(4px);
-      z-index: 20;
-    }
-
-    .header-toolbar {
-      left: 0;
-    }
-
-    .header-toolbar.collapsed {
-      left: 0;
-    }
-
-    .header-toolbar.opened {
-      background-color: inherit;
-    }
-
-    .header-toolbar:hover {
-      background-color: inherit;
-    }
-
-    .main-section {
-      padding-left: 0;
-    }
-
-    .main-section.collapsed {
-      padding-left: 0;
-    }
-
-    .blurred {
-      backdrop-filter: blur(4px);
-    }
+  .header-logo-container img {
+    height: 3rem;
   }
 </style>

package/dist/components/layouts/CollapsibleSideBarLayout.svelte.d.ts

@@ -1,70 +1,31 @@
 import { SvelteComponentTyped } from "svelte";
+import '$lib/css/main.css';
+import './CollapsibleSideBarLayout.css';
+import type { MenuItem } from "../simple/lists/SelectableMenuList.svelte";
 declare const __propDef: {
     props: {
-        _pagePadding?: string | undefined;
-        _menuElementMarginBottom?: string | undefined;
-        _menuElementFontSize?: string | undefined;
-        _menuElementFontWeight?: string | undefined;
-        _menuColor?: string | undefined;
-        _selectedMenuColor?: string | undefined;
-        _expandedSideBarWidth?: string | undefined;
-        _collapsedSideBarWidth?: string | undefined;
-        _headerHeight?: string | undefined;
-        _collapseTransitionTime?: string | undefined;
-        _sideBarBackgroundColor?: string | undefined;
-        _overlayColor?: string | undefined;
-        _headerBackgroundColor?: string | undefined;
-        _dividersColor?: string | undefined;
         drawerOpened?: boolean | undefined;
         drawerCollapsed?: boolean | undefined;
-        menuItems?: ({
-            id: string;
-            name: string;
-            icon: string;
-        } | {
-            divider: boolean;
-            marginTop: string;
-            marginBottom: string;
-        })[] | undefined;
-        menuIconsSize?: number | undefined;
-        selectedMenuElementId?: string | undefined;
+        menuItems?: MenuItem[] | undefined;
+        selectedMenuElementName?: string | undefined;
         fullLogo?: string | undefined;
         partialLogo?: string | undefined;
-        openedHeader?: boolean | undefined;
     };
     events: {
-        keypress: KeyboardEvent;
-        collapse: CustomEvent<{
-            collapsed: boolean;
-        }>;
         'drawer-change': CustomEvent<{
             opened: boolean;
         }>;
-        'menu-click': CustomEvent<{
-            menu: {
-                id: string;
-                name: string;
-                icon: string;
-            };
+        collapse: CustomEvent<{
+            collapsed: boolean;
+        }>;
+        'menu-select': CustomEvent<{
+            menu: MenuItem;
         }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        menu: {};
-        'inner-menu': {
-            hamburgerVisible: boolean;
-        };
-        'sidebar-header': {
-            hamburgerVisible: boolean;
-            collapsed: boolean;
-        };
-        'sidebar-main': {
-            hamburgerVisible: boolean;
-            collapsed: boolean;
-        };
-        'sidebar-footer': {
-            hamburgerVisible: boolean;
+        logo: {
             collapsed: boolean;
         };
         default: {};

package/dist/components/layouts/StableDividedSideBarLayout.css

@@ -0,0 +1,16 @@
+:root {
+  --stable-divided-side-bar-layout-default-content-padding: 1rem 2rem 1rem 2rem;
+  --stable-divided-side-bar-layout-default-side-bar-width: 18rem;
+  --stable-divided-side-bar-layout-default-side-bar-border-color: 
+    rgb(var(--global-color-grey-500));
+  --stable-divided-side-bar-layout-default-side-bar-padding: 1rem 1.5rem 2rem 1.5rem;
+  --stable-divided-side-bar-layout-default-header-menu-height: 3.5rem;
+  --stable-divided-side-bar-layout-default-header-menu-border-color:
+    rgb(var(--global-color-grey-500));
+  --stable-divided-side-bar-layout-default-header-menu-padding: 0rem 2rem 0rem 2rem;
+  --stable-divided-side-bar-layout-default-inner-header-menu-background-color:
+    rgb(var(--global-color-background-100), .5);
+  --stable-divided-side-bar-layout-default-drawer-background-color:
+    rgb(var(--global-color-background-50));
+  --stable-divided-side-bar-layout-default-drawer-width: 24rem;
+}