Skip to content

Commit

Permalink
feat: new responsive codes (#51)
Browse files Browse the repository at this point in the history
  • Loading branch information
yasersharifi authored Feb 11, 2025
1 parent b1a9cdd commit 817f799
Show file tree
Hide file tree
Showing 35 changed files with 2,489 additions and 297 deletions.
1,049 changes: 1,002 additions & 47 deletions package-lock.json

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,16 @@
"dependencies": {
"@hookform/resolvers": "^3.10.0",
"@radix-ui/react-avatar": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-separator": "^1.1.2",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.8",
"axios": "^1.7.9",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"embla-carousel-react": "^8.5.2",
"framer-motion": "^11.15.0",
"js-cookie": "^3.0.5",
"lucide-react": "^0.469.0",
"motion": "^11.16.0",
"react": "^18.3.1",
Expand All @@ -35,6 +39,7 @@
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/js-cookie": "^3.0.6",
"@types/node": "^22.10.2",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
Expand Down
65 changes: 65 additions & 0 deletions src/components/layout/AppSidebar.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { X } from "lucide-react";

import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarHeader,
SidebarMenu,
useSidebar,
} from "./../ui/Sidebar";
import { Link } from "react-router-dom";
import MenuItems from "./MenuItems";
import { JellyFishIcon } from "@/assets/icons/nav/JellyFishIcon";
import AuthenticationAction from "./AuthenticationActions";

const AppSidebar = () => {
const { toggleSidebar } = useSidebar();

return (
<Sidebar side="left" variant="sidebar">
<SidebarContent className="p-3">
<SidebarHeader>
<div className="flex gap-2 items-center justify-between">
<div className="flex gap-2 items-center">
<Link to="/">
<JellyFishIcon />
</Link>

<div className="inline gradient-text font-bankGothic font-bold text-2xl">
JellyFish
</div>
</div>

<button
className="flex flex-col space-y-1.5 text-gray-500 hover:text-gray-800 transition-all duration-150"
onClick={toggleSidebar}
>
<X size={24} />
</button>
</div>
</SidebarHeader>

<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
<div className="space-y-4">
<MenuItems />
</div>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>

<SidebarFooter className="p-3">
<div className="flex-grow">
<AuthenticationAction />
</div>
</SidebarFooter>
</Sidebar>
);
};

export default AppSidebar;
31 changes: 31 additions & 0 deletions src/components/layout/AuthenticationActions.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { NostrIconWhite } from "@/assets/icons/NostrIconWhite";
import { Button } from "../ui/Button";
import { useState } from "react";

const AuthenticationButton = () => {
const [user, setUser] = useState<any>(null);

const handleLogout = () => {
// Add your logout logic here
setUser(null);
};

if (user) {
return (
<Button
onClick={handleLogout}
className="w-full text-gray-800 dark:text-white"
>
Logout
</Button>
);
}

return (
<Button variant="outline" className="w-full h-12 rounded-full">
<NostrIconWhite /> Log In
</Button>
);
};

export default AuthenticationButton;
43 changes: 43 additions & 0 deletions src/components/layout/MenuItems.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { HandIcon } from "@/assets/icons/nav/HandIcon";
import { LightingIcon } from "@/assets/icons/nav/LightingIcon";
import { NostrIconPink } from "@/assets/icons/nav/NostrIconPink";
import { Link } from "react-router-dom";

const MenuItems = () => {
return (
<>
<Link to="/availability" className="flex items-center gap-2">
<div className="flex-shrink-0">
<HandIcon />
</div>
<div className="text-lg font-medium gradient-text font-roboto-mono">
NIP-05 Service
</div>
</Link>
<Link
to="lightning:[email protected]"
className="flex items-center gap-2"
>
<div className="flex-shrink-0">
<LightingIcon />
</div>
<div className="text-[#EAB308] font-roboto-mono font-medium text-lg">
Zap Us
</div>
</Link>
<Link
to="nostr:npub1hu47u55pzjw8cdg0t5f2uvh4znrcvnl3pqz3st6p0pfcctzzzqrsplc46u"
className="flex items-center gap-2"
>
<div className="flex-shrink-0">
<NostrIconPink />
</div>
<div className="bg-gradient-to-r from-[#F869B6] to-[#D34CD9] bg-clip-text text-transparent font-roboto-mono font-medium text-lg">
Nostr
</div>
</Link>
</>
);
};

export default MenuItems;
117 changes: 25 additions & 92 deletions src/components/layout/Navbar.tsx
Original file line number Diff line number Diff line change
@@ -1,111 +1,44 @@
// src/components/Navbar.js
import { useState } from "react";
import { Link } from "react-router-dom";
import { Button } from "../ui/Button";
import { JellyFishIcon } from "@/assets/icons/nav/JellyFishIcon";
import { HandIcon } from "@/assets/icons/nav/HandIcon";
import { LightingIcon } from "@/assets/icons/nav/LightingIcon";
import { NostrIconPink } from "@/assets/icons/nav/NostrIconPink";
import { NostrIconWhite } from "@/assets/icons/NostrIconWhite";
// import { useAuth } from '../context/AuthContext'; // Assuming you have an AuthContext

const Links = () => {
return (
<>
<Link to="/availability" className="flex gap-2 items-center">
<div>
<HandIcon />
</div>
<div className="gradient-text font-roboto-mono font-medium text-lg">
NIP-05 Service
</div>
</Link>
<Link
to="lightning:[email protected]"
className="flex gap-2 items-center"
>
<div>
<LightingIcon />
</div>
<div className="text-[#EAB308] font-roboto-mono font-medium text-lg">
Zap Us
</div>
</Link>
<Link
to="nostr:npub1hu47u55pzjw8cdg0t5f2uvh4znrcvnl3pqz3st6p0pfcctzzzqrsplc46u"
className="flex gap-2 items-center"
>
<div>
<NostrIconPink />
</div>
<div className="bg-gradient-to-r from-[#F869B6] to-[#D34CD9] bg-clip-text text-transparent font-roboto-mono font-medium text-lg">
Nostr
</div>
</Link>
</>
);
};
import { useSidebar } from "../ui/Sidebar";
import MenuItems from "./MenuItems";
import AuthenticationAction from "./AuthenticationActions";
import { AlignJustify } from "lucide-react";

const Navbar = () => {
// const { user, logout } = useAuth();
const [isOpen, setIsOpen] = useState(false);

const toggleMenu = () => {
setIsOpen(!isOpen);
};
const { toggleSidebar } = useSidebar();

return (
<nav className="">
<div className="p-8 md:px-12">
<div className="flex justify-between">
<Link to="/" className="flex md:w-2/12 gap-2 items-center">
<div>
<div className="p-6 md:p-8 lg:px-12">
<div className="flex justify-between items-center">
<div className="flex flex-shrink-0 w-fit gap-2 items-center">
<Link to="/">
<JellyFishIcon />
</div>
<div className="hidden md:inline gradient-text font-bankGothic font-bold text-2xl">
</Link>

<div className="hidden lg:inline gradient-text font-bankGothic font-bold text-2xl">
JellyFish
</div>
<div className="md:hidden">
<Button variant={"link"} onClick={toggleMenu}>
<button className="flex flex-col space-y-1.5">
<span className="w-6 h-0.5 bg-white"></span>
<span className="w-6 h-0.5 bg-white"></span>
<span className="w-6 h-0.5 bg-white"></span>
</button>
</Button>
</div>
</Link>
</div>

<button
className="md:hidden text-white"
onClick={toggleSidebar}
>
<AlignJustify />
</button>

<div className="hidden md:w-8/12 md:flex justify-center md:space-x-8 md:ml-10">
<Links />
<div className="hidden flex-grow md:flex justify-center md:space-x-8 items-center">
<MenuItems />
</div>
<div className="md:w-2/12 flex justify-end">
<Button variant={"outline"} className="h-12">
<NostrIconWhite /> Log In
</Button>
{/* {user ? (
<Button
onClick={logout}
className="text-gray-800 dark:text-white"
>
Logout
</Button>
) : (
<Link
to="/login"
className="text-gray-800 dark:text-white"
>
Login
</Link>
)} */}

<div className="hidden md:block flex-shrink-0 w-fit">
<AuthenticationAction />
</div>
</div>
</div>
{isOpen && (
<div className="flex flex-col gap-2 justify-center items-center">
<Links />
</div>
)}
</nav>
);
};
Expand Down
71 changes: 42 additions & 29 deletions src/components/layout/RootLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,53 @@
import { Outlet, useLocation } from "react-router-dom";
import Footer from "./Footer";
import Navbar from "./Navbar";
import AppSidebar from "./AppSidebar";
import { SidebarProvider } from "../ui/sidebar";
import Cookies from "js-cookie";

const RootLayout = () => {
const { pathname } = useLocation();

const defaultOpen = Cookies.get("sidebar_state") === "true";

return (
<div className="relative">
<div className=" -z-50 absolute top-0 left-1/2 -translate-x-1/2 animate-fade">
<img src="/svg/top-light.svg" alt="top-light" />
</div>
{pathname !== "/" && (
<div className=" -z-50 absolute -top-[200px] left-1/2 -translate-x-1/2 ">
<img
className="animate-fade-up"
src="/svg/half-ring.svg"
alt="/half-ring"
height={894}
width={806}
/>
<SidebarProvider defaultOpen={defaultOpen} className="relative">
{/* -- If App Open On the mobile -- */}
<AppSidebar />

<main className="relative w-full">
<div className="absolute top-0 -translate-x-1/2 -z-50 left-1/2 animate-fade">
<img src="/svg/top-light.svg" alt="top-light" />
</div>
{pathname !== "/" && (
<div className=" -z-50 absolute -top-[200px] left-1/2 -translate-x-1/2 ">
<img
className="animate-fade-up"
src="/svg/half-ring.svg"
alt="/half-ring"
height={894}
width={806}
/>
</div>
)}
<div
className="fixed inset-0 z-20 w-full h-screen"
style={{
backgroundImage:
"linear-gradient(269.54deg, #05060F 0.39%, rgba(5, 6, 15, 0) 35.21%, rgba(5, 6, 15, 0) 64.87%, #05060F 99.6%)",
}}
></div>
<div className="relative z-50">
{/* -- If App Open Ont the Large screen */}
<Navbar />

<main className="container">
<Outlet />
</main>
<Footer />
</div>
)}
<div
className="fixed h-screen inset-0 w-full z-20"
style={{
backgroundImage:
"linear-gradient(269.54deg, #05060F 0.39%, rgba(5, 6, 15, 0) 35.21%, rgba(5, 6, 15, 0) 64.87%, #05060F 99.6%)",
}}
></div>
<div className="relative z-50">
<Navbar />
<main className="container mx-auto ">
<Outlet />
</main>
<Footer />
</div>
</div>
</main>
</SidebarProvider>
);
};

Expand Down
Loading

0 comments on commit 817f799

Please sign in to comment.