Add basic navbar styles and social link

ufssd · Oct 21, 2023 · d7ef2fa · d7ef2fa
1 parent 9cafc04
commit d7ef2fa
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 2 deletions.
diff --git a/public/discord_mark.svg b/public/discord_mark.svg
diff --git a/src/app/Navbar.module.css b/src/app/Navbar.module.css
@@ -1,4 +1,39 @@
 .navbar {
   /* style */
-  background: blue;
+  background: rgba(0, 0, 0, 0.2);
+  /* content */
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.navbar nav {
+  /* content */
+  display: flex;
+  gap: 10px;
+}
+
+.navbar a {
+  /* style */
+  font-size: 1.3rem;
+  font-weight: 600;
+}
+
+.navbar a:hover {
+  /* style */
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 5px;
+}
+
+.socialLinks {
+  /* align */
+  margin-left: auto;
+  margin-right: 10px;
+}
+
+.socialLinks img:hover {
+  /* style */
+  transform: scale(1.05);
 }
diff --git a/src/app/navbar.tsx b/src/app/navbar.tsx
@@ -6,11 +6,27 @@ import styles from "./Navbar.module.css";
 export default function Navbar() {
   return (
     <header className={styles.navbar}>
-      <Image src="/ssd_logo.svg" alt="SSD Logo" width="70" height="70" />
+      <Link href="/">
+        <Image src="/ssd_logo.svg" alt="SSD Logo" width="50" height="50" />
+      </Link>
       <nav>
         <Link href="/">Home</Link>
         <Link href="/about">About</Link>
       </nav>
+      <div className={styles.socialLinks}>
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://discord.gg/5SyB3yx"
+        >
+          <Image
+            src="/discord_mark.svg"
+            alt="Discord Logo"
+            width="40"
+            height="40"
+          />
+        </a>
+      </div>
     </header>
   );
 }