feat: add navigation links for the future (#58)

* feat: add navigation links on navbar * feat: style the navigation links * fix: remove inline height
Venom-Biochem-Lab · Nov 14, 2023 · c116c6c · c116c6c
1 parent 2f42386
commit c116c6c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/frontend/src/routes/Header.svelte b/frontend/src/routes/Header.svelte
@@ -4,10 +4,16 @@
 </script>
 
 <header>
- <div class="corner">
- <a href="/">
- <img src={logo} alt="Venome Logo" />
- </a>
+ <div class="nav-container">
+ <div class="corner">
+ <a href="/">
+ <img src={logo} alt="Venome Logo" />
+ </a>
+ </div>
+ <div class="nav">
+ <a href="/">Search</a>
+ <a href="/upload">Upload</a>
+ </div>
  </div>
 
  <div class="corner">
@@ -23,11 +29,24 @@
  justify-content: space-between;
  background-color: hsla(15, 98%, 51%, 0.06);
  box-shadow: 0px 0px 3px 2px hsla(0, 0%, 0%, 0.208);
+ height: 60px;
+ }
+
+ .nav-container {
+ display: flex;
+ height: 60px;
+ gap: 10px;
+ }
+
+ .nav {
+ display: flex;
+ align-items: center;
+ gap: 10px;
  }
 
  .corner {
- width: 3em;
- height: 3em;
+ width: 60px;
+ height: 60px;
  }
 
  .corner a {

diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+ /* Put stuff here */
+</script>
+
+<div>Upload Page</div>
+
+<style>
+ /* put stuff here */
+</style>