Skip to content

Adding new NavBar template and styling it #23

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

Open
PabloFLPs wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Adding new NavBar template and styling it #23

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cc41a9c
Adding new NavBar template and styling it
PabloFLPs Jan 19, 2022
873fe52
Putting Search bar to the right
PabloFLPs Jan 20, 2022
581a5b2
Identation
PabloFLPs Jan 25, 2022
77fa960
Merge branch 'master' into stylingNavBar
PabloFLPs Jan 26, 2022
0aab7c1
Adding Search bar responsivity with also, mobile menu
PabloFLPs Jan 27, 2022
b43aeba
Fixing Search bar placeholder on sm resolution viewing
PabloFLPs Jan 27, 2022
db04a9d
Fixing button hover not visible on NavBar items
PabloFLPs Jan 27, 2022
0c47ab8
Fixing Search bar size on mobile (sm tlwnd) viewing
PabloFLPs Jan 31, 2022
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
40 changes: 39 additions & 1 deletion src/components/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
import { Fragment } from 'react'
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
import { SearchIcon } from '@heroicons/react/solid'

import DittoImg from "../assets/ditto.png"


const navigation = [
{ name: 'Home', href: '#', current: true },
{ name: 'About Us', href: '#', current: false },
{ name: 'Search', href: '#', current: false },
]

function classNames(...classes:any) {
Expand Down Expand Up @@ -72,6 +72,25 @@ export default function NavBar() {
))}
</div>
</div>
<div className="hidden relative pl-3 z-0 flex-1 sm:flex items-center justify-end sm:inset-0">
<div className="w-full md:w-64 lg:w-80">
<label htmlFor="search" className="sr-only">
Search
</label>
<div className="relative">
<div className="pointer-events-none absolute inset-y-0 left-0 pl-2.5 flex items-center">
<SearchIcon className="h-5 w-5 text-light-purple" aria-hidden="true" />
</div>
<input
id="search"
name="search"
className="block w-full bg-white border border-transparent rounded-md py-2 pl-9 text-sm placeholder-purple focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-light-purple focus:placeholder-gray-500 sm:text-sm"
placeholder="Search a game"
type="search"
/>
</div>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -91,6 +110,25 @@ export default function NavBar() {
{item.name}
</Disclosure.Button>
))}
<div className="relative z-0 flex-1 flex items-center justify-center sm:inset-0">
<div className="w-full">
<label htmlFor="search" className="sr-only">
Search
</label>
<div className="relative">
<div className="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
<SearchIcon className="h-5 w-5 text-light-purple" aria-hidden="true" />
</div>
<input
id="search"
name="search"
className="block w-full bg-white border border-transparent rounded-md py-2 pl-10 pr-3 text-sm placeholder-purple focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-light-purple focus:placeholder-gray-500 sm:text-sm"
placeholder="Search a game"
type="search"
/>
</div>
</div>
</div>
</div>
</Disclosure.Panel>
</>
Expand Down