Feat/header

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
-    "start": "sirv public --no-clear",
+    "start": "sirv public --no-clear --port 8080",
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {

src/App.svelte

@@ -1,19 +1,10 @@
 <script lang="ts">
+  import Header from "./components/Templates/Header.svelte";
   import Tailwind from "./Tailwind.svelte";
 </script>
 
 <Tailwind />
-<main>
-  <h1 class="text-blue-400">
-    yarn berry / scss / typescript / tailwind CSS template
-  </h1>
-</main>
+<Header />
 
 <style lang="scss">
-  main {
-    h1 {
-      font-size: 2rem;
-      text-align: center;
-    }
-  }
 </style>

src/components/Atoms/Logo.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+</script>
+
+<h1 class="font-sans font-black text-3xl">
+    LOGO
+</h1>
+
+<style lang="scss">
+</style>

src/components/Atoms/NavItem.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    type bgColors = "red" | "blue" | "green" | "yellow" | "gray";
+
+    export let bg: bgColors | null = null;
+    export let nestedStyle: string | null = null;
+    export let href: string | null = null;
+
+    const bgLogic: string = bg ? `bg-${bg}-600 px-3 py-2 text-white rounded-full` : "hover:underline";
+</script>
+
+<a {href} class="font-sans cursor-pointer {bgLogic + " " + nestedStyle}">
+    <slot></slot>
+</a>

src/components/Blocks/NavBar.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import NavItem from "../Atoms/NavItem.svelte";
+
+    const navItemList: {href: string, text: string}[] = [
+        {href: "#", text: "About"},
+        {href: "#", text: "Promotion"},
+        {href: "#", text: "Github"},
+    ]
+</script>
+
+<nav>
+    {#each navItemList as { href, text }}
+        <NavItem {href} nestedStyle="mx-4">
+            {text}
+        </NavItem>
+    {/each}
+</nav>

src/components/Templates/Header.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import Logo from '../Atoms/Logo.svelte';
+    import NavBar from '../Blocks/NavBar.svelte';
+    import NavItem from "../Atoms/NavItem.svelte";
+</script>
+
+<header class="flex justify-between items-center w-3/4 py-2.5">
+    <Logo />
+    <NavBar />
+    <nav>
+        <NavItem bg="blue">
+            Discord
+        </NavItem>
+    </nav>
+</header>
+
+<style lang="scss">
+    header {
+        margin: 0 auto;
+    }
+</style>

yarn.lock

@@ -3465,36 +3465,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-app@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "svelte-app@workspace:."
-  dependencies:
-    "@fullhuman/postcss-purgecss": ^4.0.3
-    "@rollup/plugin-commonjs": ^17.0.0
-    "@rollup/plugin-node-resolve": ^11.0.0
-    "@rollup/plugin-typescript": ^8.0.0
-    "@tsconfig/svelte": ^2.0.0
-    autoprefixer: ^10.4.0
-    node-sass: ^6.0.1
-    postcss: ^8.3.11
-    postcss-load-config: ^3.1.0
-    rollup: ^2.3.4
-    rollup-plugin-css-only: ^3.1.0
-    rollup-plugin-livereload: ^2.0.0
-    rollup-plugin-scss: ^3.0.0
-    rollup-plugin-svelte: ^7.0.0
-    rollup-plugin-terser: ^7.0.0
-    sass: ^1.43.4
-    sirv-cli: ^1.0.0
-    svelte: ^3.0.0
-    svelte-check: ^2.0.0
-    svelte-preprocess: ^4.0.0
-    tailwindcss: ^2.2.19
-    tslib: ^2.0.0
-    typescript: ^4.0.0
-  languageName: unknown
-  linkType: soft
-
 "svelte-check@npm:^2.0.0":
   version: 2.2.8
   resolution: "svelte-check@npm:2.2.8"
@@ -3632,6 +3602,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"template@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "template@workspace:."
+  dependencies:
+    "@fullhuman/postcss-purgecss": ^4.0.3
+    "@rollup/plugin-commonjs": ^17.0.0
+    "@rollup/plugin-node-resolve": ^11.0.0
+    "@rollup/plugin-typescript": ^8.0.0
+    "@tsconfig/svelte": ^2.0.0
+    autoprefixer: ^10.4.0
+    node-sass: ^6.0.1
+    postcss: ^8.3.11
+    postcss-load-config: ^3.1.0
+    rollup: ^2.3.4
+    rollup-plugin-css-only: ^3.1.0
+    rollup-plugin-livereload: ^2.0.0
+    rollup-plugin-scss: ^3.0.0
+    rollup-plugin-svelte: ^7.0.0
+    rollup-plugin-terser: ^7.0.0
+    sass: ^1.43.4
+    sirv-cli: ^1.0.0
+    svelte: ^3.0.0
+    svelte-check: ^2.0.0
+    svelte-preprocess: ^4.0.0
+    tailwindcss: ^2.2.19
+    tslib: ^2.0.0
+    typescript: ^4.0.0
+  languageName: unknown
+  linkType: soft
+
 "terser@npm:^5.0.0":
   version: 5.9.0
   resolution: "terser@npm:5.9.0"