fix: appbar component

wetix · Nov 9, 2021 · 2614407 · 2614407
1 parent d0aa317
commit 2614407
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 40 deletions.
diff --git a/components/app-bar/package.json b/components/app-bar/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "@responsive-ui/app-bar",
+  "version": "1.0.9-alpha.0",
+  "description": "An app bar component of responsive-ui.",
+  "author": "Si3nLoong <sianloong90@gmail.com> (https://github.com/si3nloong)",
+  "homepage": "https://github.com/wetix/responsive-ui/blob/main/components/app-bar#README.md",
+  "license": "MIT",
+  "main": "lib/index.cjs",
+  "browser": "lib/index.js",
+  "module": "lib/index.mjs",
+  "unpkg": "lib/index.min.js",
+  "svelte": "src/AppBar.svelte",
+  "types": "types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "svelte",
+    "ui-component",
+    "responsive-ui",
+    "app-bar",
+    "svelte-app-bar"
+  ],
+  "peerDependencies": {
+    "svelte": "^3.27.0",
+    "svelte-preprocess": "^4.5.0",
+    "typescript": "^4.0.0"
+  },
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib",
+    "types",
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wetix/responsive-ui.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/wetix/responsive-ui/issues"
+  },
+  "gitHead": "fd5010a4fe0e250d52c7292f70d8e3702b7ffcfe"
+}
diff --git a/components/app-bar/src/AppBar.svelte b/components/app-bar/src/AppBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onDestroy, createEventDispatcher } from "svelte";
+  import { createEventDispatcher } from "svelte";
 
   import Icon from "../../icon/src/Icon.svelte";
   import Tab from "../components/Tab.svelte";
@@ -9,7 +9,7 @@
 
   export let tabItems: NavItem[] = [];
   export let selecteTabIndex = 0;
-  export let centerItems: NavItem[] = [];
+  export let navItems: NavItem[] = [];
   export let dropdownItems: NavItem[] = [];
 
   let logoSrc = "https://asset.wetix.my/images/logo/wetix.png";
@@ -34,22 +34,13 @@
     dispatch("change", e.detail);
   };
 
-  document.addEventListener("click", closeDropdown);
-
-  onDestroy(() => {
-    document.removeEventListener("click", closeDropdown);
-  });
+  // document.addEventListener("click", closeDropdown);
 </script>
 
-<nav
-  class="resp__app-bar"
-  style={tabItems.length > 0
-    ? ""
-    : "box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);"}
->
+<nav class="resp-app-bar" class:resp-app-bar--shadowed={tabItems.length <= 0}>
   <!-- drawer button -->
   <div
-    class="resp__app-bar__drawer-button"
+    class="resp-app-bar__drawer-button"
     on:click={() => {
       openDrawer = true;
     }}
@@ -58,24 +49,26 @@
   </div>
 
   <!-- container -->
-  <div class="resp__app-bar__container">
+  <div class="resp-app-bar__container">
     <!-- logo-->
-    <a class="resp__app-bar__logo" href="/store">
-      <img src={logoSrc} alt="logo" />
+    <a class="resp-app-bar__logo" href="/">
+      <slot name="logo">
+        <img src={logoSrc} alt="logo" />
+      </slot>
     </a>
 
     <!-- navs -->
-    <div class="resp__app-bar__navs">
+    <div class="resp-app-bar__nav">
       <ul>
-        {#each centerItems as item}
-          <li><a href={item.link}>{item.value}</a></li>
+        {#each navItems as item}
+          <li><a href={item.link}>{item.label}</a></li>
         {/each}
       </ul>
     </div>
 
     <!-- dropdown -->
-    <div class="resp__app-bar__right">
-      <div class="resp__app-bar__right-dropdown">
+    <div class="resp-app-bar__right">
+      <div class="resp-app-bar__right-dropdown">
         <a
           href="/me"
           on:click|preventDefault|stopPropagation={toggleShowDropdown}
@@ -93,38 +86,46 @@
 </nav>
 
 <!-- tab -->
-{#if tabItems}
+<!-- {#if tabItems}
   <Tab
     on:change={handleTabChange}
     items={tabItems}
     selected={selecteTabIndex}
   />
-{/if}
+{/if} -->
 
 <!-- drawer  -->
-<Drawer bind:open={openDrawer} items={[...centerItems, ...dropdownItems]} />
+<Drawer bind:open={openDrawer} items={[...navItems, ...dropdownItems]} />
 
 <style lang="scss">
-  .resp__app-bar {
+  .resp-app-bar {
     position: relative;
     display: flex;
     top: 0;
-    width: 100vw;
+    height: 60px;
+    width: 100%;
     z-index: 100;
 
-    .resp__app-bar__drawer-button {
+    &--shadowed {
+      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+    }
+
+    .resp-app-bar__drawer-button {
       background-color: #fc4451;
       padding: 5px;
     }
 
-    .resp__app-bar__container {
-      padding: 10px 25px 10px 25px;
+    .resp-app-bar__container {
+      max-width: 1280px;
+      width: 80%;
+      margin: 0 auto;
+      align-items: center;
       display: flex;
       justify-content: space-between;
-      width: 100%;
-      min-height: 45px;
+      // width: 100%;
+      // min-height: 45px;
 
-      .resp__app-bar__logo {
+      .resp-app-bar__logo {
         align-self: center;
         img {
           display: block;
@@ -134,7 +135,7 @@
         }
       }
 
-      .resp__app-bar__navs {
+      .resp-app-bar__nav {
         align-self: center;
         ul {
           display: flex;
@@ -143,7 +144,7 @@
           padding: 0;
 
           li {
-            margin-right: 15px;
+            margin: 0 1rem;
             a {
               text-decoration: none;
               color: #444444;
@@ -156,26 +157,26 @@
         }
       }
 
-      .resp__app-bar__right {
+      .resp-app-bar__right {
         align-self: center;
         display: flex;
 
-        .resp__app-bar__right-dropdown {
+        .resp-app-bar__right-dropdown {
           position: relative;
         }
       }
     }
   }
 
   @media (min-width: 640px) {
-    .resp__app-bar__drawer-button {
+    .resp-app-bar__drawer-button {
       display: none;
     }
   }
 
   @media (max-width: 640px) {
-    .resp__app-bar__navs,
-    .resp__app-bar__right-dropdown {
+    .resp-app-bar__nav,
+    .resp-app-bar__right-dropdown {
       display: none;
     }
   }

diff --git a/components/app-bar/types/index.d.ts b/components/app-bar/types/index.d.ts
@@ -1,6 +1,31 @@
+import type { SvelteComponentTyped } from "svelte/internal";
+
 export type NavItem = {
   title?: string;
   icon?: string;
   value: string;
   link: string;
 };
+
+export interface AppBarProps {
+  class?: string;
+  title?: string;
+  navItems: Array<any>;
+  hasBg?: boolean;
+  style?: string;
+}
+
+export interface AppBarEvents {}
+
+export interface AppBarSlots {
+  left: {};
+  right: {};
+}
+
+declare class AppBar extends SvelteComponentTyped<
+  AppBarProps,
+  AppBarEvents,
+  AppBarSlots
+> {}
+
+export default AppBar;