Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/navbar #8

Merged
merged 11 commits into from
Nov 27, 2024
Merged

Feature/navbar #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
dac3e7c
feat: add navbar boilerplate and insert into root layout
jackcasstlesjones Nov 27, 2024
413e11e
feat: initial navbar styling, fixed tailwing config
jackcasstlesjones Nov 27, 2024
e869349
feat: add all navbar icons and titles
jackcasstlesjones Nov 27, 2024
3966681
feat: add link destinations to buttons array
jackcasstlesjones Nov 27, 2024
14cb5c4
style: centre toolkit button
jackcasstlesjones Nov 27, 2024
99c227a
style: change icons to outline, apart from toolkit
jackcasstlesjones Nov 27, 2024
f6e2515
refactor: change to heroicons 24 instead of 16
jackcasstlesjones Nov 27, 2024
b320b9d
feat: add folders for all pages, finish navbar buttons
jackcasstlesjones Nov 27, 2024
b122c8c
style: change title back to red
jackcasstlesjones Nov 27, 2024
f01308b
feat: navbar links now separated in separate components
jackcasstlesjones Nov 27, 2024
04e8b8b
refactor: remove icon component
jackcasstlesjones Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions next.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import type { NextConfig } from 'next';
import { PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD } from 'next/constants';
import serwist from '@serwist/next';
// import type { NextConfig } from "next";
import {
PHASE_DEVELOPMENT_SERVER,
PHASE_PRODUCTION_BUILD,
} from "next/constants";
import serwist from "@serwist/next";

const baseConfig = {
// Base Next.js config
Expand All @@ -9,11 +12,11 @@ const baseConfig = {
export default async (phase: any) => {
if (phase === PHASE_DEVELOPMENT_SERVER || phase === PHASE_PRODUCTION_BUILD) {
const withSerwist = serwist({
swSrc: 'src/app/sw.ts',
swDest: 'public/sw.js',
swSrc: "src/app/sw.ts",
swDest: "public/sw.js",
});
return withSerwist(baseConfig);
}

return baseConfig;
};
};
7 changes: 7 additions & 0 deletions src/app/insights/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function Page() {
return (
<>
<h1 className="text-white">this is the insights page</h1>
</>
);
}
28 changes: 16 additions & 12 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import '../styles/globals.css';
import type { Metadata, Viewport } from 'next';
import type { ReactNode } from 'react';
import "../styles/globals.css";
import type { Metadata, Viewport } from "next";
import type { ReactNode } from "react";
import Navbar from "@/ui/layout/Navbar/Navbar";

const APP_NAME = 'Things We Do';
const APP_DEFAULT_TITLE = 'Things We Do';
const APP_TITLE_TEMPLATE = '%s - PWA App';
const APP_DESCRIPTION = 'Best PWA app in the world!';
const APP_NAME = "Things We Do";
const APP_DEFAULT_TITLE = "Things We Do";
const APP_TITLE_TEMPLATE = "%s - PWA App";
const APP_DESCRIPTION = "Best PWA app in the world!";

export const metadata: Metadata = {
applicationName: APP_NAME,
Expand All @@ -16,15 +17,15 @@ export const metadata: Metadata = {
description: APP_DESCRIPTION,
appleWebApp: {
capable: true,
statusBarStyle: 'default',
statusBarStyle: "default",
title: APP_DEFAULT_TITLE,
// startUpImage: [],
},
formatDetection: {
telephone: false,
},
openGraph: {
type: 'website',
type: "website",
siteName: APP_NAME,
title: {
default: APP_DEFAULT_TITLE,
Expand All @@ -33,7 +34,7 @@ export const metadata: Metadata = {
description: APP_DESCRIPTION,
},
twitter: {
card: 'summary',
card: "summary",
title: {
default: APP_DEFAULT_TITLE,
template: APP_TITLE_TEMPLATE,
Expand All @@ -43,14 +44,17 @@ export const metadata: Metadata = {
};

export const viewport: Viewport = {
themeColor: '#FFFFFF',
themeColor: "#FFFFFF",
};

export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" dir="ltr">
<head />
<body>{children}</body>
<body>
<main>{children}</main>
<Navbar />
</body>
</html>
);
}
2 changes: 1 addition & 1 deletion src/app/moods/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export default function Page() {
return (
<>
<h1>this is the moods page</h1>
<h1 className="text-white">this is the moods page</h1>
</>
);
}
7 changes: 7 additions & 0 deletions src/app/needs/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function Page() {
return (
<>
<h1 className="text-white">this is the needs page</h1>
</>
);
}
2 changes: 1 addition & 1 deletion src/app/toolkit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
export default function Page() {
return (
<>
<h1>This is the toolkit page</h1>
<h1 className="text-white">This is the toolkit page</h1>
</>
);
}
9 changes: 9 additions & 0 deletions src/ui/layout/Navbar/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import NavbarLinks from "./NavbarLinks";

export default function Navbar() {
return (
<nav className="fixed bottom-0 bg-twd-navbar-background h-20 w-screen">
<NavbarLinks />
</nav>
);
}
Empty file removed src/ui/layout/Navbar/NavbarButtons.tsx
View file
Open in desktop
Empty file.
32 changes: 32 additions & 0 deletions src/ui/layout/Navbar/NavbarLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import {
HomeIcon,
PresentationChartLineIcon,
EllipsisHorizontalCircleIcon,
ChartBarIcon,
} from "@heroicons/react/24/outline";
import { WrenchIcon } from "@heroicons/react/24/solid";

import NavigationLink from "./NavigationLink";

const links = [
{ title: "Home", icon: HomeIcon, destination: "/" },
{ title: "Moods", icon: PresentationChartLineIcon, destination: "/moods" },
{ title: "Toolkit", icon: WrenchIcon, destination: "/toolkit" },
{ title: "Needs", icon: EllipsisHorizontalCircleIcon, destination: "/needs" },
{ title: "Insights", icon: ChartBarIcon, destination: "/insights" },
];

export default function NavbarLinks() {
return (
<div className="grid grid-cols-5 items-center h-full w-11/12 m-auto">
{links.map((link, index) => (
<NavigationLink
key={index}
title={link.title}
Icon={link.icon}
destination={link.destination}
/>
))}
</div>
);
}
20 changes: 20 additions & 0 deletions src/ui/layout/Navbar/NavigationLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import Link from "next/link";

interface NavbarButtonProps {
title: string;
Icon: React.ComponentType<{ className?: string }>; // Typing for Heroicons or similar
destination: string;
}

export default function NavigationLink({
title,
Icon,
destination,
}: NavbarButtonProps) {
return (
<Link href={destination} className={`flex flex-col items-center`}>
<p className="text-white">{title}</p>
<Icon className="h-6 w-6 text-white" />
</Link>
);
}
1 change: 0 additions & 1 deletion src/ui/shared/Icon.tsx
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export default {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/ui/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
Expand Down
Loading