navbar fixes

src/App.svelte

@@ -6,7 +6,7 @@
 </script>
 
 {#if $text.nav}
-  <!--<Navbar /> Ära vaata seda faili!! -->
+  <Navbar />
   <Router {routes} />
   <Footer />
 {/if}

src/app.css

@@ -1,5 +1,7 @@
 /* Global stylesheet */
 
+@import "tailwindcss";
+
 /* Design tokens & theme variables (light defaults) */
 :root {
   /* color tokens (light defaults) */
@@ -79,7 +81,7 @@ body {
   min-height: 100vh;
   -webkit-tap-highlight-color: transparent;
   transition: background-color 160ms ease, color 160ms ease;
-  padding-top: var(--nav-height); /* reserve navbar */
+  padding-top: 20px;
 }
 
 /* Container pattern */

src/components/Button.svelte

@@ -1,8 +1,10 @@
 <script>
+  // Handler and presentation props
   export let onClick = () => {};
+  export let border = false;
 </script>
 
-<button onclick={onClick} class="btn">
+<button onclick={onClick} class="btn" class:borderless={!border} {...$$restProps}>
   <slot />
 </button>
 
@@ -12,15 +14,18 @@
     color: var(--black);
     border-radius: 8px;
     border: 1.5px solid transparent;
-    border-color: var(--orange);
     padding: 0.6em 1.2em;
     font-weight: 500;
     cursor: pointer;
     display: flex;
     align-items: center;
-    justify-content: center;
     gap: 0.5em;
   }
+
+  .btn:not(.borderless) {
+    border-color: var(--orange);
+  }
+
   .btn:hover {
     background: var(--orange);
   }

src/components/ButtonBorderless.svelte

@@ -1,26 +0,0 @@
-<script>
-  export let onClick = () => {};
-</script>
-
-<button onclick={onClick} class="btn">
-  <slot />
-</button>
-
-<style>
-  .btn {
-    background: var(--white);
-    color: var(--black);
-    border-radius: 8px;
-    border: 1.5px solid transparent;
-    padding: 0.6em 1.2em;
-    font-weight: 500;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5em;
-  }
-  .btn:hover {
-    background: var(--orange);
-  }
-</style>

src/components/index.js

@@ -2,6 +2,7 @@ export { default as Container } from './layout/Container.svelte'
 export { default as Card } from './layout/Card.svelte'
 export { default as Stack } from './layout/Stack.svelte'
 export { default as Grid } from './layout/Grid.svelte'
+export { default as Center } from './layout/Center.svelte'
 
 export { default as Button } from './Button.svelte'
 export { default as ButtonBorderless } from './ButtonBorderless.svelte'

src/layout/Navbar.svelte

@@ -1,11 +1,10 @@
 <script>
   import {
     Button,
-    ButtonBorderless,
     Dropdown,
     Grid,
-  } from "@/components/index.js";
-  import Center from "./Center.svelte";
+    Center,
+  } from "$components";
   import { navigate, getPath, currentLang, text, switchLang } from "$lib";
 
   // Icon imports (Lucide)
@@ -20,46 +19,49 @@
 </script>
 
 <Grid>
-  <nav class="w-full h-16">
+  <nav class="w-full h-32">
     <Center gapClass="gap-4">
-      <Button onClick={() => navigate("/")}>Home</Button>
-      <ButtonBorderless onClick={() => navigate("/about")}
-        >About</ButtonBorderless
-      >
       <Dropdown name={$text.nav.about} variant="borderless">
-        <ButtonBorderless onClick={() => navigate("/mis-teeme")}
-          >{$text.nav.aboutPages.info}</ButtonBorderless
+        <Button onClick={() => navigate("/mis-teeme")}
+          >{$text.nav.aboutPages.info}</Button
         >
-        <ButtonBorderless onClick={() => navigate("/liitu-meiega")}
-          ><Bot />{$text.nav.aboutPages.join}</ButtonBorderless
+        <Button onClick={() => navigate("/liitu-meiega")}
+          ><Bot />{$text.nav.aboutPages.join}</Button
         >
-        <ButtonBorderless onClick={() => navigate("/mentorid")}
-          ><HandHeart />{$text.nav.aboutPages.mentors}</ButtonBorderless
+        <Button onClick={() => navigate("/mentorid")}
+          ><HandHeart />{$text.nav.aboutPages.mentors}</Button
         >
-        <ButtonBorderless onClick={() => navigate("/juhatus")}
-          ><Lectern />{$text.nav.aboutPages.board}</ButtonBorderless
+        <Button onClick={() => navigate("/juhatus")}
+          ><Lectern />{$text.nav.aboutPages.board}</Button
         >
       </Dropdown>
       <Dropdown name={$text.nav.events} variant="borderless">
-        <ButtonBorderless onClick={() => navigate("/kalender")}
-          ><CalendarClock />{$text.nav.eventsPages.calendar}</ButtonBorderless
+        <Button onClick={() => navigate("/kalender")}
+          ><CalendarClock />{$text.nav.eventsPages.calendar}</Button
         >
-        <ButtonBorderless
+        <Button
           onClick={() => navigate("https://asikarikas.ee/", { external: true })}
-          ><Trophy />ASI Karikas</ButtonBorderless
+          ><Trophy />ASI Karikas</Button
         >
-        <ButtonBorderless onClick={() => navigate("/mentorid")}
-          ><Presentation />{$text.nav.eventsPages.workshops}</ButtonBorderless
+        <Button onClick={() => navigate("/mentorid")}
+          ><Presentation />{$text.nav.eventsPages.workshops}</Button
         >
-        <ButtonBorderless onClick={() => navigate("/rebased")}
-          ><Swords />{$text.nav.eventsPages.fresh}</ButtonBorderless
+        <Button onClick={() => navigate("/rebased")}
+          ><Swords />{$text.nav.eventsPages.fresh}</Button
         >
-        <ButtonBorderless
+        <Button
           onClick={() =>
             navigate("https://remondikohvik.lapikud.ee/", { external: true })}
-          ><Coffee />{$text.nav.eventsPages.repair}</ButtonBorderless
+          ><Coffee />{$text.nav.eventsPages.repair}</Button
         >
       </Dropdown>
+      <Button onClick={() => navigate("/kontakt")}
+        >{$text.nav.contact}
+      </Button>
+      <Button onClick={() => navigate("/helpdesk")}
+        >{$text.nav.helpdesk}
+      </Button>
     </Center>
   </nav>
 </Grid>
+

src/routes/Home.svelte

@@ -6,7 +6,7 @@
     Card,
     Stack,
     Grid,
-  } from "@/components/index.js";
+  } from "$components";
 </script>
 
 <Container>