Issue 18 create navbar component #80

melbauerr · 2025-12-13T06:48:26Z

Change Summary

Implemented responsive navbar component with mobile and desktop layouts. Includes alignment adjustments for logo and buttons, a mobile hamburger menu with vertically stacked buttons, and consistent styling.

Change Form

Fill this up (NA if not available). If a certain criteria is not met, can you please give a reason.

The pull request title has an issue number
The change works by "Smoke testing" or quick testing
The change has tests
The change has documentation

Other Information

[Is there anything in particular in the review that I should be aware of?]

Copilot

Pull request overview

This PR implements a responsive navbar component and adds several supporting UI components and dependencies for a Django + Next.js application. The changes include both server-side infrastructure for file storage and API documentation, as well as client-side UI components for building the user interface.

Key Changes

Added responsive navbar component with mobile hamburger menu and desktop layout
Integrated AWS S3 storage configuration with fallback to local storage
Added drf-spectacular for Django REST framework API documentation
Added multiple shadcn/ui-based components (Dialog, Alert, Accordion, Spinner, ReCaptcha)
Updated dependencies in both client and server

Reviewed changes

Copilot reviewed 21 out of 24 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
server/pyproject.toml	Added dependencies for Pygments, drf-spectacular, boto3, django-storages, and Pillow
server/poetry.lock	Updated lock file with new dependency versions
server/api/settings.py	Configured S3 storage backend with environment-based fallback
server/api/urls.py	Added drf-spectacular API schema and documentation endpoints
server/.env.example	Added AWS configuration variables
client/src/components/ui/navbar.tsx	Implemented responsive navbar with hamburger menu
client/src/components/ui/dialog.tsx	Added Dialog component wrapper
client/src/components/ui/alert.tsx	Created AlertDialog with loading states
client/src/components/ui/accordion.tsx	Implemented Accordion component
client/src/components/ui/spinner.tsx	Added Spinner loading component
client/src/components/ui/recaptchaV2.tsx	Implemented Google reCAPTCHA v2 integration
client/src/components/ui/button.tsx	Updated button variants with custom styles
client/src/app/api/verify-recaptcha/route.ts	Added server-side reCAPTCHA verification endpoint
client/package.json	Added UI library dependencies and updated Next.js version
client/tailwind.config.ts	Extended color palette with bloom project colors
client/src/styles/globals.css	Added custom CSS utilities and color variables

Files not reviewed (1)

client/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-13T06:51:37Z

server/pyproject.toml

 psycopg = {extras = ["binary", "pool"], version = "^3.2.1"}
 freezegun = "^1.5.1"
 gunicorn = "^23.0.0"
+pygments = "^2.7.2"


The version constraint for pygments (^2.7.2) is outdated. This package was added in 2020, and there are newer major versions available. Consider updating to a more recent version to benefit from security patches and improvements.

Suggested change

pygments = "^2.7.2"

pygments = "^3.0.0"

Copilot · 2025-12-13T06:51:38Z

server/api/settings.py

+AWS_ACCESS_KEY_ID = os.getenv("AWS_ACCESS_KEY_ID")
+AWS_SECRET_ACCESS_KEY = os.getenv("AWS_SECRET_ACCESS_KEY")
+AWS_STORAGE_BUCKET_NAME = os.getenv("AWS_STORAGE_BUCKET_NAME")
+AWS_REGION_NAME = os.getenv("AWS_REGION_NAME")


AWS credentials are being loaded from environment variables without validation. If these credentials are invalid or expired, errors will occur at runtime during file operations rather than at startup. Consider adding validation logic to verify AWS credentials on application startup when USE_S3 is True.

Copilot · 2025-12-13T06:51:38Z

client/src/components/ui/navbar.tsx

+        <button
+          className="flex flex-col items-center justify-center space-y-1 md:hidden"
+          onClick={() => setOpen(!open)}
+        >
+          <span
+            className={cn(
+              "block h-0.5 w-6 bg-black transition-all",
+              open && "translate-y-1.5 rotate-45",
+            )}
+          />
+          <span
+            className={cn(
+              "block h-0.5 w-6 bg-black transition-all",
+              open && "opacity-0",
+            )}
+          />
+          <span
+            className={cn(
+              "block h-0.5 w-6 bg-black transition-all",
+              open && "-translate-y-1.5 -rotate-45",
+            )}
+          />
+        </button>


The hamburger menu button lacks an accessible label. Add an aria-label attribute to describe the button's purpose for screen reader users.

Copilot · 2025-12-13T06:51:38Z

client/src/app/api/verify-recaptcha/route.ts

+        status: 400,
+      });
+    }
+  } catch (error) {


The error handling swallows the actual error information. The catch block should log the error for debugging purposes and potentially return different status codes based on the error type (network errors vs validation failures).

Suggested change

} catch (error) {

} catch (error) {

// Log the error for debugging purposes

console.error("Error verifying reCAPTCHA:", error);

// Check if this is an Axios error (network or HTTP error)

if (axios.isAxiosError && axios.isAxiosError(error)) {

return new Response(JSON.stringify({ message: "Error communicating with reCAPTCHA service" }), {

status: 502, // Bad Gateway

});

}

// For all other errors, return a generic 500

Copilot · 2025-12-13T06:51:38Z

client/src/components/ui/recaptchaV2.tsx

+    } catch (e) {
+      console.error(e);
+      alert("Unable to verify Captcha. Please try again.");
+      setVerified(false);


Using console.error followed by an alert is not ideal for production. Consider implementing a more user-friendly error notification system (like toast notifications) instead of browser alerts.

Copilot · 2025-12-13T06:51:39Z

client/src/components/ui/alert.tsx

+        {/* To remove in future: demo button to simulate async work */}
+        <Button
+          variant="ghost"
+          onClick={() => {
+            setIsPending(true);
+            // simulate async work
+            setTimeout(() => setIsPending(false), 1200);
+          }}
+          disabled={isPending}
+        >
+          Demo
+        </Button>


This demo button should be removed before merging to production. It's clearly marked for removal but is still present in the code.

Suggested change

{/* To remove in future: demo button to simulate async work */}

<Button

variant="ghost"

onClick={() => {

setIsPending(true);

// simulate async work

setTimeout(() => setIsPending(false), 1200);

}}

disabled={isPending}

>

Demo

</Button>

Copilot · 2025-12-13T06:51:39Z

client/package.json

    "is-inside-container": "^1.0.0",
    "lucide-react": "^0.516.0",
-    "next": "15.4.7",
+    "next": "^15.5.9",


The Next.js version has been changed from a pinned version (15.4.7) to a caret range (^15.5.9). This could introduce unexpected breaking changes if minor/patch versions are automatically updated. Consider keeping the exact version pinned for stability, especially in production.

Suggested change

"next": "^15.5.9",

"next": "15.5.9",

Fozzyack

Good work Mel! Some minor changes required.

Let me know if you need any help.

client/src/components/ui/navbar.tsx

client/src/app/page.tsx

Fozzyack

Good work mel. However, the buttons on the mobile navbar should be centered. Also the mobile navbar does not take up the height of the screen. Note: you may have to use a different positioning property for the mobile nav.

Fozzyack · 2026-01-17T04:17:58Z

client/src/components/ui/navbar.tsx

-                Admin login
-              </Button>
+        <div className="absolute left-0 top-full max-h-screen w-full overflow-y-auto bg-white md:hidden">
+          <div className="flex h-full flex-col items-end gap-6 px-8 py-6">


items-end can be changed top items-center

melbauerr added 6 commits November 29, 2025 06:35

added navbar

a820492

Navbar button styling

f8d499f

Mobile view styling

b155ab0

Add responsive navbar styling

1017d75

mobile view adjustments

c234df6

mobile view adjustments

05a327f

Copilot AI review requested due to automatic review settings December 13, 2025 06:48

Copilot started reviewing on behalf of melbauerr December 13, 2025 06:48 View session

Copilot AI reviewed Dec 13, 2025

View reviewed changes

merge conflicts

7d9d137

Fozzyack self-requested a review December 13, 2025 14:14

Fozzyack requested changes Dec 13, 2025

View reviewed changes

melbauerr added 7 commits January 10, 2026 05:11

Merges main branch

af2e312

Sticky navbar

76cc6bc

format page with prettier

3d5d9ca

ClassName redundant changes

b2c22fe

navbar border changed to black

e24c4a7

navbar adjustments: dropdown and styling

68048b6

link to find-my-booking page.tsx

a4bd95a

Fozzyack requested changes Jan 17, 2026

View reviewed changes

-  } catch (error) {
+  } catch (error) {
+    // Log the error for debugging purposes
+    console.error("Error verifying reCAPTCHA:", error);
+    // Check if this is an Axios error (network or HTTP error)
+    if (axios.isAxiosError && axios.isAxiosError(error)) {
+      return new Response(JSON.stringify({ message: "Error communicating with reCAPTCHA service" }), {
+        status: 502, // Bad Gateway
+      });
+    }
+    // For all other errors, return a generic 500

Issue 18 create navbar component #80

Are you sure you want to change the base?

Issue 18 create navbar component #80

Uh oh!

Conversation

melbauerr commented Dec 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Change Summary

Change Form

Other Information

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 13, 2025

Choose a reason for hiding this comment

Uh oh!

Fozzyack left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Fozzyack left a comment

Choose a reason for hiding this comment

Uh oh!

Fozzyack Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

melbauerr commented Dec 13, 2025 •

edited

Loading