From f1e0d85f3bbfc729315d3969f27e5ccc68490171 Mon Sep 17 00:00:00 2001
From: Matt Kirby <MattJKirby@outlook.com>
Date: Mon, 13 Mar 2023 00:26:58 +0000
Subject: [PATCH] Title bar component
---
.../src/components/titlebar/TitleBar.tsx | 23 +++++++++++++++++++
.../src/styles/TitleBar.module.css | 17 ++++++++++++++
2 files changed, 40 insertions(+)
create mode 100644 daily-thought-frontend/src/components/titlebar/TitleBar.tsx
create mode 100644 daily-thought-frontend/src/styles/TitleBar.module.css
diff --git a/daily-thought-frontend/src/components/titlebar/TitleBar.tsx b/daily-thought-frontend/src/components/titlebar/TitleBar.tsx
new file mode 100644
index 00000000..51051282
--- /dev/null
+++ b/daily-thought-frontend/src/components/titlebar/TitleBar.tsx
@@ -0,0 +1,23 @@
+import styles from '../../styles/TitleBar.module.css'
+import { RxHamburgerMenu } from "react-icons/rx"
+import { FC, PropsWithChildren, useState } from 'react';
+
+type TitleBarProps = {
+ NavBarToggle: () => void;
+}
+
+const TitleBar:FC<PropsWithChildren<TitleBarProps>> = ({
+ NavBarToggle
+}) => {
+
+
+ return (
+ <div className={styles.titlebar}>
+ <button className={styles.navButton} onClick={() => NavBarToggle()}><RxHamburgerMenu size={"32px"}/></button>
+ <p className={styles.title}>Feed</p>
+ <button>Settings</button>
+ </div>
+ )
+}
+
+export default TitleBar;
\ No newline at end of file
diff --git a/daily-thought-frontend/src/styles/TitleBar.module.css b/daily-thought-frontend/src/styles/TitleBar.module.css
new file mode 100644
index 00000000..ec1b5f63
--- /dev/null
+++ b/daily-thought-frontend/src/styles/TitleBar.module.css
@@ -0,0 +1,17 @@
+.titlebar {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ height: 64px;
+ align-items: center;
+ padding: 8px 16px;
+}
+
+.navButton {
+ background: none;
+ border: none;
+}
+
+.title {
+ font-weight: bold;
+}
\ No newline at end of file
--
GitLab