add icon to mobile navmenu & icon component init

This commit is contained in:
2022-12-11 19:26:05 +01:00
parent 2e5bd424b0
commit 599d97af21
2 changed files with 64 additions and 3 deletions

61
components/Icon.tsx Normal file
View File

@@ -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 };

View File

@@ -1,8 +1,9 @@
import styles from "./Navigation.module.scss"; import styles from "./Navigation.module.scss";
import { GractwoLogo } from "../Logo"; import { GractwoLogo } from "../Logo";
import Link from "next/link"; import { Icon, IconSet } from "../Icon";
import navigation from "../../data/navigation.json"; import navigation from "../../data/navigation.json";
import Link from "next/link";
const Navigation = () => { const Navigation = () => {
let username: string = ""; let username: string = "";
@@ -25,8 +26,7 @@ const Navigation = () => {
); );
})} })}
<div tabIndex={0} className={`${styles.dropdown} ${styles.mobile}`}> <div tabIndex={0} className={`${styles.dropdown} ${styles.mobile}`}>
<GractwoLogo width={48} height={48} /> <Icon icon={IconSet.Menu} />
nawigacja
{/* TUTAJ WSTAWIĆ IKONKĘ PÓŹNIEJ */} {/* TUTAJ WSTAWIĆ IKONKĘ PÓŹNIEJ */}
<div className={styles.innerdropdown}> <div className={styles.innerdropdown}>
{navigation.map((navlink) => { {navigation.map((navlink) => {