sosokker/B2D-Ventures
1
0
Fork 0
mirror of https://github.com/Sosokker/B2D-Ventures.git synced 2025-12-18 21:44:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance mobile menu with theme toggle and improve layout for better usability

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2024-11-18 15:19:03 +07:00
parent c091e3c5ea
commit 46abff402d
1 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/navigationBar/mobileMenu.tsx
View File

@ -15,6 +15,7 @@ import React from "react";
import { SearchBar } from "./serchBar"; import { SearchBar } from "./serchBar";
import ListItem from "../listItem"; import ListItem from "../listItem";
import { businessComponents, projectComponents, dataroomComponents } from "./menu"; import { businessComponents, projectComponents, dataroomComponents } from "./menu";
import { ThemeToggle } from "../theme-toggle";
export function MobileMenu() { export function MobileMenu() {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
@ -29,11 +30,11 @@ export function MobileMenu() {
animate={{ x: 0 }} animate={{ x: 0 }}
exit={{ x: "-100%" }} exit={{ x: "-100%" }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
className="fixed top-0 left-0 w-full bg-gray-800 text-white flex" className="fixed top-0 left-0 w-full bg-blue-500 flex items-center"
> >
<X className="cursor-pointer w-10" onClick={() => setIsVisible(false)} /> <X className="cursor-pointer w-8" onClick={() => setIsVisible(false)} />
<NavigationMenu> <NavigationMenu>
<NavigationMenuList className="grid grid-cols-3"> <NavigationMenuList className="grid grid-cols-3 space-x-4 mt-1">
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger className="text-base">Businesses</NavigationMenuTrigger> <NavigationMenuTrigger className="text-base">Businesses</NavigationMenuTrigger>
<NavigationMenuContent> <NavigationMenuContent>
@ -45,7 +46,7 @@ export function MobileMenu() {
</NavigationMenuContent> </NavigationMenuContent>
</NavigationMenuItem> </NavigationMenuItem>
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger className="text-base font-medium ">Projects</NavigationMenuTrigger> <NavigationMenuTrigger className="text-base ">Projects</NavigationMenuTrigger>
<NavigationMenuContent> <NavigationMenuContent>
<ul className="grid w-[400px] "> <ul className="grid w-[400px] ">
{projectComponents.map((component) => ( {projectComponents.map((component) => (
@ -57,7 +58,7 @@ export function MobileMenu() {
</NavigationMenuContent> </NavigationMenuContent>
</NavigationMenuItem> </NavigationMenuItem>
<NavigationMenuItem> <NavigationMenuItem>
<NavigationMenuTrigger className="text-base font-medium ">Dataroom</NavigationMenuTrigger> <NavigationMenuTrigger className="text-base ">Dataroom</NavigationMenuTrigger>
<NavigationMenuContent> <NavigationMenuContent>
<ul className="grid w-[400px] "> <ul className="grid w-[400px] ">
{dataroomComponents.map((component) => ( {dataroomComponents.map((component) => (
@ -69,7 +70,8 @@ export function MobileMenu() {
</NavigationMenuContent> </NavigationMenuContent>
</NavigationMenuItem> </NavigationMenuItem>
<NavigationMenuItem className="pl-5 flex"> <NavigationMenuItem className="pl-5 flex mt-5 flex">
<ThemeToggle />
<SearchBar /> <SearchBar />
</NavigationMenuItem> </NavigationMenuItem>
</NavigationMenuList> </NavigationMenuList>