fix: anchor tags

wetix · Nov 3, 2021 · 11d984f · 11d984f
1 parent 8e2c902
commit 11d984f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 46 deletions.
diff --git a/components/app-bar/components/Drawer.svelte b/components/app-bar/components/Drawer.svelte
@@ -32,7 +32,12 @@
 <nav bind:this={drawer} class="resp__app-bar__drawer">
   <!-- header  -->
   <div class="resp__app-bar__drawer__header">
-    <Icon type="x" style="width:15px; height:15px;" on:click={onClose} />
+    <Icon
+      type="x"
+      stroke="#fc4451"
+      style="width:15px; height:15px;"
+      on:click={onClose}
+    />
   </div>
   <div class="resp__app-bar__drawer__container">
     <!-- user  -->
@@ -44,16 +49,16 @@
     </div>
     <ul>
       {#each items as item}
-        <li>
-          <a href={item.link}>
+        <a href={item.link}>
+          <li>
             <Icon
               type={item.icon}
               stroke="#fc4451"
-              style="margin-right:15px; width:40px; height:40px;"
+              style="margin-right:5px; width:40px; height:40px;"
             />
             {item.value}
-          </a>
-        </li>
+          </li>
+        </a>
       {/each}
     </ul>
   </div>
@@ -91,13 +96,12 @@
       }
 
       ul {
-        li {
-          list-style: none;
-          border-bottom: 1px #f0f0f0 dashed;
-
-          a {
-            text-decoration: none;
-            color: #1a1b1c;
+        a {
+          text-decoration: none;
+          color: #1a1b1c;
+          li {
+            list-style: none;
+            border-bottom: 1px #f0f0f0 dashed;
           }
         }
       }

diff --git a/components/app-bar/components/Dropdown.svelte b/components/app-bar/components/Dropdown.svelte
@@ -16,18 +16,18 @@
   </div>
   <ul>
     {#each items as item}
-      <li>
-        <a href={item.link}>
+      <a href={item.link}>
+        <li>
           <Icon
             stroke="#fc4451"
-            style="width:40px; height:40px"
+            style="margin-right:5px; width:40px; height:40px"
             type={`${item.icon || ""}`}
           />
           <span>
             {item.value}
           </span>
-        </a>
-      </li>
+        </li>
+      </a>
     {/each}
   </ul>
 </div>
@@ -38,6 +38,7 @@
   }
 
   .resp__app-bar__dropdown {
+    padding: 15px;
     position: absolute;
     z-index: 101;
     right: 0;
@@ -48,8 +49,9 @@
     min-width: 200px;
 
     .resp__app-bar__user {
-      padding: 15px;
       cursor: default;
+      padding-bottom: 10px;
+      border-bottom: #fc4451 1px dashed;
       .text {
         color: #444444;
         font-size: 0.813rem;
@@ -70,23 +72,15 @@
       margin: 0;
       padding: 0;
 
-      li {
-        a {
-          display: flex;
-          align-items: center;
-          white-space: nowrap;
-          padding: 5px 15px 5px 5px;
-          text-decoration: none;
-          font-size: 0.813rem;
-          color: #444444;
-        }
-        a:hover {
-          background-color: #f0f0f0;
+      a {
+        text-decoration: none;
+        color: #1a1b1c;
+        font-size: 0.813rem;
+        white-space: nowrap;
+        li {
+          padding: 2.5px 0;
         }
       }
-      li:nth-child(1) {
-        border-top: 1px #fc4451 dashed;
-      }
     }
   }
 </style>
diff --git a/components/app-bar/components/Tab.svelte b/components/app-bar/components/Tab.svelte
@@ -1,14 +1,10 @@
 <script lang="ts">
   import { createEventDispatcher, onMount } from "svelte";
-
-  type TabItem = {
-    title: string;
-    value: string;
-  };
+  import type { NavItem } from "../types";
 
   const dispatch = createEventDispatcher();
 
-  export let items: TabItem[];
+  export let items: NavItem[];
   export let selected = 0;
 
   let tab: HTMLDivElement;

diff --git a/components/app-bar/types/index.d.ts b/components/app-bar/types/index.d.ts
@@ -1,10 +1,6 @@
 export type NavItem = {
-  value: string;
+  title?: string;
   icon?: string;
-  link: string;
-};
-
-export type TabItem = {
-  title: string;
   value: string;
+  link: string;
 };