chore: initial commit

src/app/components/NavBar.module.css

@@ -0,0 +1,22 @@
+.nav {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 1rem;
+  width: 100%;
+}
+
+.navList {
+  display: flex;
+  list-style: none;
+}
+
+.navItem {
+  margin-left: 1rem;
+}
+
+.navLink {
+  text-decoration: none;
+  color: #64adac;
+  font-weight: bold;
+}

src/app/components/NavBar.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link.js';
+import styles from './NavBar.module.css';
+
+export default function NavBar() {
+  return (
+    <nav className={styles.nav}>
+      <ul className={styles.navList}>
+        <li className={styles.navItem}>
+          <Link href="/docs" className={styles.navLink}>
+            Docs
+          </Link>
+        </li>
+        <li className={styles.navItem}>
+          <Link
+            href="https://onspring.com/customer-service/admin-support/"
+            className={styles.navLink}
+          >
+            Support
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}

src/app/components/SideBar.module.css

@@ -0,0 +1,22 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-right: 1px solid #848586;
+  padding: 1rem;
+}
+
+.title {
+  font-size: 1rem;
+  white-space: nowrap;
+}
+
+.onspring {
+  font-weight: bold;
+  color: white;
+}
+
+.api {
+  font-weight: bold;
+  color: #ee7203;
+}

src/app/components/SideBar.tsx

@@ -0,0 +1,12 @@
+import styles from './SideBar.module.css';
+
+export default function SideBar() {
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>
+        <span className={styles.onspring}>Onspring</span>{' '}
+        <span className={styles.api}>API</span>
+      </h1>
+    </div>
+  );
+}