From 67db5d6350b6d1ec1cdab792de2a81f90c9ca168 Mon Sep 17 00:00:00 2001 From: Xhesika Date: Thu, 19 Jun 2025 16:12:20 +0200 Subject: [PATCH 1/3] navbar dropdown ui --- components/NavBar.css | 19 +++++++++++++++---- components/Navbar.js | 13 ++++++++++++- package-lock.json | 10 ++++++++++ package.json | 1 + 4 files changed, 38 insertions(+), 5 deletions(-) diff --git a/components/NavBar.css b/components/NavBar.css index bb48a28..7a4f57b 100644 --- a/components/NavBar.css +++ b/components/NavBar.css @@ -84,13 +84,24 @@ a.nav-link:focus-visible { .navbar-collapse.collapsing { transition: height 0.3s ease; } - -@media (max-width: 990px) { +@media (max-width: 991.98px) { .navbar-container { + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + text-align: center; padding-left: 0px; + max-width: 400px !important; } - + .navbar-container .nav { + flex-direction: column !important; + align-items: center !important; + width: 100%; + } + .navbar-container .nav-link, .navbar-nav a.nav-link { + width: 100%; + text-align: center; padding-left: 0px !important; } -} +} \ No newline at end of file diff --git a/components/Navbar.js b/components/Navbar.js index cf96f31..c823185 100644 --- a/components/Navbar.js +++ b/components/Navbar.js @@ -1,6 +1,7 @@ "use client"; import React, { useState, useEffect } from "react"; +import { Sling as Hamburger } from 'hamburger-react'; import { Navbar, Nav, NavLink, Container } from "react-bootstrap"; import Link from "next/link"; import "./NavBar.css"; @@ -48,7 +49,17 @@ const NavBar = () => { PROJXON - +
+ +