Nav bar component

2023-04-22 21:04:19 +01:00
parent 0f4d9e5c20
commit 2ae6293544
1 changed files with 61 additions and 0 deletions
--- a/src/lib/Header.svelte
+++ b/src/lib/Header.svelte
@@ -0,0 +1,61 @@
+<header>
+  <a class="title" href="/">
+    <img src="https://i.ibb.co/hMymwH0/portainer-templates-small.png" />
+    <h2>Portainer Templates</h2>
+  </a>
+  <nav>
+    <a href="/">Home</a>
+    <a href="https://github.com/lissy93/portainer-templates">View on GitHub</a>
+  </nav>
+</header>
+
+<style lang="scss">
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--card);
+    padding: 0.25rem 1rem;
+    a.title {
+      display: flex;
+      justify-content: center;
+      gap: 1rem;
+      color: var(--foreground);
+      text-decoration: none;
+      h2 {
+        margin: 0;
+        font-size: 1.5rem;
+        font-weight: 600;
+      }
+      img {
+        width: 40px;
+        transition: all 0.3s ease-in-out;
+      }
+      &:hover {
+        img { transform: rotate(-5deg) scale(1.1); }
+      }
+    }
+
+    nav {
+      display: flex;
+      gap: 1rem;
+      a {
+        color: var(--foreground);
+        text-decoration: none;
+        padding: 0.25rem 0.5rem;
+        border-radius: 6px;
+        transition: all 250ms ease-in-out;
+        &:hover {
+          background: var(--gradient);
+          transform: scale(1.05);
+        }
+      }
+    }
+    &.fixed {
+      position: fixed;
+      top: 0;
+      width: calc(100% - 2rem);
+      box-shadow: 0 3px 4px 0 var(--background);
+    }
+  }
+</style>