fixing navbar position

Author: inderjotx

components/Card.tsx

@@ -37,7 +37,9 @@ function Card({ repo }: Props) {
             </h2>
           </div>
 
-          <h6 className="my-5 text-2023-manga-2 text-lg">{emojify(repo.description)}</h6>
+          <h6 className="my-5 text-2023-manga-2 text-lg">
+            {emojify(repo.description)}
+          </h6>
 
           <div className="card-actions gap-y-3">
             {repo.topics.map((topic: string) => (
@@ -86,7 +88,9 @@ function Card({ repo }: Props) {
           >
             <GoRepoForked className="text-yellow-200 text-2xl" />
             <div className="flex flex-col">
-              <div className="text-lg xl:text-2xl font-semibold mb-0.5">{repo.forks}</div>
+              <div className="text-lg xl:text-2xl font-semibold mb-0.5">
+                {repo.forks}
+              </div>
               <div className="text-neutral-300 text-xs lg:text-sm">Forks</div>
             </div>
             <div

components/Header.tsx

@@ -21,14 +21,14 @@ function Header() {
   return (
     <header className="border-b-[0.5px] border-dashed border-b-2023-manga-3 mb-5">
       <div className="container mx-auto px-4 py-2">
-        <div className="justify-between shadow-lg navbar">
+        <div className="justify-between lg:grid lg:grid-cols-3 shadow-lg navbar">
           <Link href="/">
             <img src="/hacktoberfest.svg" alt="Hacktoberfest" className="h-12 w-auto sm:h-auto" />
           </Link>
 
           <SearchBar searchBarWrapperStyles="hidden sm:inline-flex flex-1 max-w-md px-6" />
 
-          <div className="flex-none">
+          <div className="flex-none md:justify-end">
             <Link
               href="/contributors"
               className="btn btn-square btn-ghost umami--click--contributors-button"

components/Sort.tsx

@@ -25,38 +25,37 @@ export default function Sort() {
 
   const navigationItems = [
     {
-      name: "Best match",
+      name: 'Best match',
       href: { query: { ...router.query } }
     },
     {
-      name: "Most stars",
+      name: 'Most stars',
       href: { query: { ...router.query, s: 'stars', o: 'desc' } }
     },
     {
-      name: "Fewest stars",
+      name: 'Fewest stars',
       href: { query: { ...router.query, s: 'stars', o: 'asc' } }
     },
     {
-      name: "Most forks",
+      name: 'Most forks',
       href: { query: { ...router.query, s: 'forks', o: 'desc' } }
     },
     {
-      name: "Fewest forks",
+      name: 'Fewest forks',
       href: { query: { ...router.query, s: 'forks', o: 'asc' } }
     },
     {
-      name: "Most help wanted issues",
+      name: 'Most help wanted issues',
       href: { query: { ...router.query, s: 'help-wanted-issues', o: 'desc' } }
     },
     {
-      name: "Recently updated",
+      name: 'Recently updated',
       href: { query: { ...router.query, s: 'updated', o: 'desc' } }
     },
     {
-      name: "Least recently updated",
+      name: 'Least recently updated',
       href: { query: { ...router.query, s: 'updated', o: 'asc' } }
-    },
-
+    }
   ];
 
   const selectedSort = (): SortTypes => {
@@ -110,9 +109,7 @@ export default function Sort() {
           <ul tabIndex={0} className="menu menu-vertical">
             {navigationItems.map((item, index) => (
               <li key={index}>
-                <Link href={{ query: item.href.query }}>
-                  {item.name}
-                </Link>
+                <Link href={{ query: item.href.query }}>{item.name}</Link>
               </li>
             ))}
           </ul>

components/StarsFilter.tsx

@@ -75,7 +75,10 @@ export default function StarsFilter() {
           control={control}
         />
 
-        <button className="btn btn-ghost ml-2 text-2023-manga-2 ring-1 ring-2023-manga-2" type="submit">
+        <button
+          className="btn btn-ghost ml-2 text-2023-manga-2 ring-1 ring-2023-manga-2"
+          type="submit"
+        >
           Search
         </button>
       </div>

package.json

@@ -41,4 +41,4 @@
     "tailwindcss": "^3.3.3",
     "typescript": "5.2.2"
   }
-}
+}

pages/contributors.tsx

@@ -34,7 +34,9 @@ export default function Contrubutors({ contributors }: Props) {
     <div>
       <Header />
       <div className="container mx-auto mb-5">
-        <h1 className="my-5 text-neutral-100 text-5xl font-bold text-center">Contributors ✨</h1>
+        <h1 className="my-5 text-neutral-100 text-5xl font-bold text-center">
+          Contributors ✨
+        </h1>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
           {contributors.map(contributor => (
             <ContributorCard