From 599d97af21dea55105d899898a41404f9a7e54e9 Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Sun, 11 Dec 2022 19:26:05 +0100
Subject: [PATCH] add icon to mobile navmenu & icon component init

---
 components/Icon.tsx                  | 61 ++++++++++++++++++++++++++++
 components/Navigation/Navigation.tsx |  6 +--
 2 files changed, 64 insertions(+), 3 deletions(-)
 create mode 100644 components/Icon.tsx

diff --git a/components/Icon.tsx b/components/Icon.tsx
new file mode 100644
index 0000000..0433463
--- /dev/null
+++ b/components/Icon.tsx
@@ -0,0 +1,61 @@
+enum IconSet {
+	Menu,
+	Twitter,
+}
+
+type iconprops = {
+	icon: IconSet;
+	width?: number;
+	height?: number;
+} & React.SVGProps<SVGSVGElement>;
+
+const Icon = ({ icon, width, height, ...props }: iconprops) => {
+	switch (icon) {
+		// guide for adding these:
+		// - add {width || ogWidth}
+		// - add {height || ogHeight}
+		// - add {...props}
+		case IconSet.Menu:
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-menu"
+					{...props}
+				>
+					<line x1="3" y1="12" x2="21" y2="12" />
+					<line x1="3" y1="6" x2="21" y2="6" />
+					<line x1="3" y1="18" x2="21" y2="18" />
+				</svg>
+			);
+			break;
+		case IconSet.Twitter:
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-twitter"
+					{...props}
+				>
+					<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
+				</svg>
+			);
+			break;
+	}
+};
+
+export { Icon, IconSet };
diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
index 5e814c2..6d27b52 100644
--- a/components/Navigation/Navigation.tsx
+++ b/components/Navigation/Navigation.tsx
@@ -1,8 +1,9 @@
 import styles from "./Navigation.module.scss";
 import { GractwoLogo } from "../Logo";
-import Link from "next/link";
+import { Icon, IconSet } from "../Icon";
 
 import navigation from "../../data/navigation.json";
+import Link from "next/link";
 
 const Navigation = () => {
 	let username: string = "";
@@ -25,8 +26,7 @@ const Navigation = () => {
 					);
 				})}
 				<div tabIndex={0} className={`${styles.dropdown} ${styles.mobile}`}>
-					<GractwoLogo width={48} height={48} />
-					nawigacja
+					<Icon icon={IconSet.Menu} />
 					{/* TUTAJ WSTAWIĆ IKONKĘ PÓŹNIEJ */}
 					<div className={styles.innerdropdown}>
 						{navigation.map((navlink) => {