From b976c23fe2338f483b07cb0f0e029926d7aedc3a Mon Sep 17 00:00:00 2001
From: Kamil Pawlaczyk <prgmr.kamil.pawlaczyk@gmail.com>
Date: Wed, 11 Oct 2023 23:58:45 +0200
Subject: [PATCH 1/2] feat: responsive navigation bar

---
 src/components/navbar.tsx | 46 ++++++++++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 36d7730..5319552 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,7 +1,10 @@
 import Image from "next/image";
 import NavLink, { NavLinkProps } from "./nav-link";
+import { useState } from "react";
 
 export default function Navbar() {
+  const [show, setShow] = useState(false)
+
   const links: NavLinkProps[] = [
     {
       content: "About",
@@ -18,22 +21,35 @@ export default function Navbar() {
   ];
 
   return (
-    <div className="flex flex-row items-center py-2 w-full">
-      <div className="w-1/3">
-        <Image
-          src="./openapps_banner.svg"
-          alt="banner"
-          width="175"
-          height="50"
-          className="p-2"
-        />
-      </div>
 
-      <div className="flex flex-row justify-center gap-6 w-1/3">
-        {links.map((link, index) => (
-          <NavLink {...link} key={index} />
-        ))}
+    <nav className="bg-white border-gray-200 w-full">
+      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+        <a href="https://flowbite.com/" className="flex items-center">
+          <Image
+            src="./openapps_banner.svg"
+            alt="banner"
+            width="175"
+            height="50"
+            className="p-2"
+          />
+          <span className="self-center hidden">Openapps</span>
+        </a>
+        <button onClick={() => setShow(!show)} data-collapse-toggle="navbar-default" type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
+          <span className="sr-only">Open main menu</span>
+          <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+          </svg>
+        </button>
+        <div className={"md:w-auto w-full md:block" + (!show && " hidden")} id="navbar-default">
+          <ul className="font-medium flex flex-col p-4 md:p-0 mt-4 md:flex-row md:space-x-8 md:mt-0 border rounded-lg md:border-none">
+            {links.map((link, index) => (
+              <li key={index}>
+                <NavLink {...link} key={index} />
+              </li>
+            ))}
+          </ul>
+        </div>
       </div>
-    </div>
+    </nav>
   );
 }

From be25bc617a8dc7c3fac41348ced2ca5c6d9a25cb Mon Sep 17 00:00:00 2001
From: Kamil Pawlaczyk <prgmr.kamil.pawlaczyk@gmail.com>
Date: Tue, 17 Oct 2023 12:18:09 +0200
Subject: [PATCH 2/2] feat(navbar.tsx): remove collapse id

---
 src/components/navbar.tsx | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 5319552..ca9dd65 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -3,7 +3,7 @@ import NavLink, { NavLinkProps } from "./nav-link";
 import { useState } from "react";
 
 export default function Navbar() {
-  const [show, setShow] = useState(false)
+  const [show, setShow] = useState(false);
 
   const links: NavLinkProps[] = [
     {
@@ -21,7 +21,6 @@ export default function Navbar() {
   ];
 
   return (
-
     <nav className="bg-white border-gray-200 w-full">
       <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
         <a href="https://flowbite.com/" className="flex items-center">
@@ -34,13 +33,31 @@ export default function Navbar() {
           />
           <span className="self-center hidden">Openapps</span>
         </a>
-        <button onClick={() => setShow(!show)} data-collapse-toggle="navbar-default" type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
+        <button
+          onClick={() => setShow(!show)}
+          type="button"
+          className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+          aria-controls="navbar-default"
+          aria-expanded="false"
+        >
           <span className="sr-only">Open main menu</span>
-          <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
+          <svg
+            className="w-5 h-5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 17 14"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 1h15M1 7h15M1 13h15"
+            />
           </svg>
         </button>
-        <div className={"md:w-auto w-full md:block" + (!show && " hidden")} id="navbar-default">
+        <div className={"md:w-auto w-full md:block" + (!show && " hidden")}>
           <ul className="font-medium flex flex-col p-4 md:p-0 mt-4 md:flex-row md:space-x-8 md:mt-0 border rounded-lg md:border-none">
             {links.map((link, index) => (
               <li key={index}>