From 8b1654fc16446633b115e0f4ace4afd0fea478d8 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 2 Sep 2025 10:35:15 +0800
Subject: [PATCH 1/2] Added navbar component

---
 fwt/components/Navbar/Navbar.sass |  7 +++++++
 fwt/components/Navbar/Navbar.tsx  | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 fwt/components/Navbar/Navbar.sass
 create mode 100644 fwt/components/Navbar/Navbar.tsx

diff --git a/fwt/components/Navbar/Navbar.sass b/fwt/components/Navbar/Navbar.sass
new file mode 100644
index 0000000..edbda91
--- /dev/null
+++ b/fwt/components/Navbar/Navbar.sass
@@ -0,0 +1,7 @@
+.nav
+  position: fixed
+  top: 0
+  width: 100%
+  padding: 1rem 0
+  // margin: 5rem
+
diff --git a/fwt/components/Navbar/Navbar.tsx b/fwt/components/Navbar/Navbar.tsx
new file mode 100644
index 0000000..81f39c4
--- /dev/null
+++ b/fwt/components/Navbar/Navbar.tsx
@@ -0,0 +1,18 @@
+import './Navbar.sass'
+import { Show } from 'solid-js'
+import Row from '../Row/Row'
+
+interface Props {
+  transparent?: boolean
+  children: any
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <nav class="nav" role="navigation" aria-label="main navigation">
+        <Row content="split">{props.children}</Row>
+      </nav>
+    </>
+  )
+}

From 608cef5827d31fc0c8b97ccf00dba1c23230e7df Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 2 Sep 2025 10:35:53 +0800
Subject: [PATCH 2/2] Fixed unnecessary styling

---
 fwt/components/Row/Row.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/fwt/components/Row/Row.tsx b/fwt/components/Row/Row.tsx
index feb34a5..f5d1b97 100644
--- a/fwt/components/Row/Row.tsx
+++ b/fwt/components/Row/Row.tsx
@@ -1,5 +1,5 @@
 import './Row.sass'
-// import { Switch, Match } from 'solid-js'
+import { Show } from 'solid-js'
 
 interface Props {
   children: any
@@ -10,9 +10,17 @@ interface Props {
 export default (props: Props) => {
   return (
     <>
-      <div class={props.content} style={`gap: ${props.gap}rem`}>
-        {props.children}
-      </div>
+      <Show when={props.gap}>
+        <div class={props.content} style={`gap: ${props.gap}rem`}>
+          {props.children}
+        </div>
+      </Show>
+
+      <Show when={!props.gap}>
+        <div class={props.content} >
+          {props.children}
+        </div>
+      </Show>
     </>
   )
 }