From 1ec90496e19caed75eead1937f2610a44b21822d Mon Sep 17 00:00:00 2001
From: Dima Rifai <dima.rifai@gmail.com>
Date: Wed, 27 Nov 2024 11:50:10 +0200
Subject: [PATCH] Issue 386 - Style the menu in case of mobile
---
components/navbar.tsx | 62 +++++++++++++++++++++++++++++--------------
1 file changed, 42 insertions(+), 20 deletions(-)
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 59e2c6d8..146cc03a 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -2,6 +2,8 @@ import { useState } from "react";
import { Menu, X } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faWrench, faCaretDown, faCircleNodes } from "@fortawesome/free-solid-svg-icons";
import { cn } from "@/lib/utils";
import useMediaQuery from "@/hooks/common/useMediaQuery";
@@ -14,19 +16,21 @@ export default function Navbar() {
const isMobile = useMediaQuery("(max-width: 768px)");
const [menuOpen, setMenuOpen] = useState(false);
const [searchBarOpen, setSearchBarOpen] = useState(false);
+ const [settingsOpen, setSettingsOpen] = useState(false);
return (
<div
className="fixed w-full top-0 left-0 z-50"
data-testid="navbar"
>
- <div className="flex p-2 justify-between bg-theme dark:bg-theme text-white items-center relative">
+ <div
+ className="flex p-2 justify-between bg-theme text-white items-center relative">
{isMobile ? (
<div className="flex items-center justify-between w-full">
<Link
href={"/"}
className="relative pr-2"
- >
+ >
<Image
src="/hive-logo.png"
alt="Hive logo"
@@ -49,9 +53,13 @@ export default function Navbar() {
</div>
<div
className={cn(
- "fixed top-0 right-0 p-5 bg-theme dark:bg-theme w-full h-full translate-x-full duration-500 z-50",
+ "fixed top-0 right-0 p-5 w-full h-full translate-x-full duration-500 z-50",
{ "translate-x-0": menuOpen }
)}
+ style={{
+ background: "var(--background-start-rgb)",
+ backgroundImage: "linear-gradient(var(--background-start-rgb), var(--background-end-rgb))",
+ }}
>
<div className="w-full flex items-center justify-end">
<X
@@ -61,28 +69,45 @@ export default function Navbar() {
className="cursor-pointer"
/>
</div>
- <div className="flex flex-col text-2xl gap-y-2">
- <ThemeToggle />
+ <div className="text-left py-2 rounded-lg bg-white shadow-md mb-4 px-4 hover:bg-gray-100 transition dark:bg-gray-800 dark:hover:bg-gray-700">
+ <div className="flex items-center">
+ <FontAwesomeIcon icon={faWrench} className="mr-2" />
+ <span
+ className="text-lg font-bold cursor-pointer"
+ onClick={() => setSettingsOpen(!settingsOpen)}
+ >
+ Settings
+ <FontAwesomeIcon icon={faCaretDown} className="ml-2" />
+ </span>
+ </div>
+ {settingsOpen && (
+ <div className="mt-2 pl-8 space-y-2">
+ <div className="py-1 border-b-2 border-gray-300 dark:border-gray-600 flex items-center">
+ <ThemeToggle />
+ <span className="text-base ml-2 text-gray-600 dark:text-gray-400">Dark/Light Mode</span>
+ </div>
+ <div className="py-1 text-gray-600 dark:text-gray-400">
+ <ViewPopover isMobile={isMobile} />
+ </div>
+ </div>
+ )}
+ </div>
+ <div className="text-left py-2 rounded-lg bg-white shadow-md px-4 hover:bg-gray-100 transition dark:bg-gray-800 dark:hover:bg-gray-700">
<Link
href={"/witnesses"}
+ className="flex items-center"
onClick={() => setMenuOpen(false)}
>
- Witnesses
+ <FontAwesomeIcon icon={faCircleNodes} className="mr-2" />
+ <span className="text-lg font-bold">Witnesses</span>
</Link>
-
- <div>
- <ViewPopover isMobile={isMobile} />
- </div>
</div>
</div>
</div>
) : (
<>
<div className="flex items-center pl-12 gap-x-4">
- <Link
- href={"/"}
- className="pr-2 flex justify-normal items-center text-explorer-turquoise font-medium"
- >
+ <Link href={"/"} className="pr-2 flex justify-normal items-center text-explorer-turquoise font-medium">
<Image
src="/hive-logo.png"
alt="Hive logo"
@@ -90,8 +115,8 @@ export default function Navbar() {
height={50}
data-testid="hive-logo"
/>
- <div
- className="ml-4"
+ <div
+ className="ml-4"
data-testid="hive-block-explorer"
>
Hive Block Explorer
@@ -99,10 +124,7 @@ export default function Navbar() {
</Link>
<ViewPopover />
<SyncInfo />
- <Link
- href={"/witnesses"}
- data-testid="navbar-witnesses-link"
- >
+ <Link href={"/witnesses"} data-testid="navbar-witnesses-link">
Witnesses
</Link>
<ThemeToggle />
--
GitLab