Skip to content
This repository has been archived by the owner on Dec 26, 2023. It is now read-only.

feat: implement initial navbar ui #25

Merged
merged 1 commit into from
Aug 5, 2023
Merged

feat: implement initial navbar ui #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
"postinstall": "husky install"
},
"dependencies": {
"@headlessui/react": "^1.7.16",
"@heroicons/react": "^2.0.18",
"@types/node": "20.3.3",
"@types/react": "18.2.14",
"@types/react-dom": "18.2.6",
Expand Down
85 changes: 85 additions & 0 deletions src/app/components/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
'use client';

import {
ArrowsRightLeftIcon,
NewspaperIcon,
HomeIcon,
MagnifyingGlassIcon,
Cog6ToothIcon,
} from '@heroicons/react/24/outline';
import {
ArrowsRightLeftIcon as ArrowsRightLeftIconSolid,
NewspaperIcon as NewspaperIconSolid,
HomeIcon as HomeIconSolid,
MagnifyingGlassIcon as MagnifyingGlassIconSolid,
Cog6ToothIcon as Cog6ToothIconSolid,
} from '@heroicons/react/24/solid';
import Link from 'next/link';
import { useState } from 'react';

const navLinks = [
{
index: 0,
title: 'Home',
path: '/',
icon: HomeIcon,
solidIcon: HomeIconSolid,
},
{
index: 1,
title: 'Search',
path: '/',
icon: MagnifyingGlassIcon,
solidIcon: MagnifyingGlassIconSolid,
},
{
index: 2,
title: undefined,
path: '/',
icon: ArrowsRightLeftIcon,
solidIcon: ArrowsRightLeftIconSolid,
},
{
index: 3,
title: 'Blog',
path: '/blog',
icon: NewspaperIcon,
solidIcon: NewspaperIconSolid,
},
{
index: 4,
title: 'Settings',
path: '/settings',
icon: Cog6ToothIcon,
solidIcon: Cog6ToothIconSolid,
},
];

const Navigation = () => {
const [activeIndex] = useState(0);
return (
<div className='space-evenly fixed bottom-0 left-0 z-10 flex w-screen justify-center rounded-t-xl bg-gray-950'>
{navLinks.map((link) => (
<div key={link.title}>
<Link href={link.path}>
<div className='flex h-16 w-20 flex-col items-center justify-center gap-1 rounded-lg p-1 transition-colors hover:text-blue-400'>
{activeIndex === link.index ? (
<link.solidIcon className='h-6 w-6 text-blue-500' />
) : (
<link.icon className='h-6 w-6' />
)}

{/* {link.title ? (
<span className='text-xs text-gray-300'>{link.title}</span>
) : (
<span className='text-xs text-transparent'>_</span>
)} */}
</div>
</Link>
</div>
))}
</div>
);
};

export default Navigation;
6 changes: 5 additions & 1 deletion src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import './globals.css';

import { Metadata } from 'next';
import { inter } from './fonts';
import Navigation from './components/navigation';

export const metadata: Metadata = {
title: 'Create Next App',
Expand All @@ -12,7 +13,10 @@ export const metadata: Metadata = {
const RootLayout = ({ children }: { children: ReactNode }) => {
return (
<html lang='en'>
<body className={(inter.className, 'm-6')}>{children}</body>
<body className={(inter.className, 'm-6')}>
{children}
<Navigation />
</body>
</html>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const postData = [
const Home = () => {
return (
<div>
<h1>Home</h1>
<h1 className='text-3xl font-bold'>Home</h1>
<div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
{postData.map((post) => (
<Card
Expand Down
2 changes: 1 addition & 1 deletion src/app/settings/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const SettingsPage = () => {
return (
<div>
<h1>Settings</h1>
<h1 className='text-3xl font-bold'>Settings</h1>
</div>
);
};
Expand Down
25 changes: 24 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,27 @@ __metadata:
languageName: node
linkType: hard

"@headlessui/react@npm:^1.7.16":
version: 1.7.16
resolution: "@headlessui/react@npm:1.7.16"
dependencies:
client-only: ^0.0.1
peerDependencies:
react: ^16 || ^17 || ^18
react-dom: ^16 || ^17 || ^18
checksum: 85844c96c79796236fa7dec2f1c2f0332d7554d9b785d7b37d9762bb4133088a0cf1334653d6f91c1fe4619960eb569f14ba5f6a962c3305e03f7b362acbabbe
languageName: node
linkType: hard

"@heroicons/react@npm:^2.0.18":
version: 2.0.18
resolution: "@heroicons/react@npm:2.0.18"
peerDependencies:
react: ">= 16"
checksum: 597e8668818623d568a302e343ef06b69f62ce297c14b88c2ebbfed0c0f00cd85ec44fae33ec8a249931b4e7dcf145743ae3198095a9f4682108de5155f5f4c3
languageName: node
linkType: hard

"@humanwhocodes/config-array@npm:^0.11.10":
version: 0.11.10
resolution: "@humanwhocodes/config-array@npm:0.11.10"
Expand Down Expand Up @@ -498,6 +519,8 @@ __metadata:
version: 0.0.0-use.local
resolution: "alt-accessibility-web@workspace:."
dependencies:
"@headlessui/react": ^1.7.16
"@heroicons/react": ^2.0.18
"@types/node": 20.3.3
"@types/react": 18.2.14
"@types/react-dom": 18.2.6
Expand Down Expand Up @@ -999,7 +1022,7 @@ __metadata:
languageName: node
linkType: hard

"client-only@npm:0.0.1":
"client-only@npm:0.0.1, client-only@npm:^0.0.1":
version: 0.0.1
resolution: "client-only@npm:0.0.1"
checksum: 0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8
Expand Down