Skip to content

Commit

Permalink
feat: navbar responsive.
Browse files Browse the repository at this point in the history
  • Loading branch information
@spiritanand
spiritanand committed Sep 28, 2023
1 parent 9b1914e commit 8790608
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 78 deletions.
9 changes: 9 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"dependencies": {
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-icons": "^1.3.0",
"@react-three/drei": "9.32.4",
"@react-three/fiber": "8.8.7",
"@react-three/postprocessing": "2.6.2",
Expand Down
70 changes: 48 additions & 22 deletions public/svgs/TrustAuthXLogo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,50 @@
import React from 'react';
import React from "react";

export const TrustAuthXLogo = () => {

return (
<svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 852">
<circle id="Ellipse 203" cx="23.7272" cy="23.2521" r="22.9732" fill="black" />
<g id="Group 837">
<g id="Group 835">
<path id="v" d="M23.8782 39.1812C23.7603 39.2212 23.6448 39.2206 23.5273 39.1796C22.016 38.6523 11.2383 34.4751 11.2383 22.5813V11.8298C11.2383 11.5454 11.4329 11.2974 11.7103 11.2284L23.5513 8.28365C23.6506 8.25897 23.7544 8.25897 23.8536 8.28365C23.9529 8.30833 35.6946 11.2284 35.6946 11.2284C35.9721 11.2974 36.1667 11.5454 36.1667 11.8298V22.5813C36.1667 34.5951 25.3913 38.6684 23.8782 39.1812Z" fill="white" />
</g>
<path id="Ellipse 202" d="M31.177 15.646C30.2233 14.6001 29.0604 13.7663 27.7638 13.1987C26.4671 12.6311 25.0656 12.3424 23.6502 12.3513C22.2348 12.3602 20.837 12.6664 19.5476 13.2503C18.2581 13.8341 17.1058 14.6824 16.1653 15.7402L23.7136 22.4514L31.177 15.646Z" fill="url(#paint0_radial_252_6321)" />
</g>
</g>
<defs>
<radialGradient id="paint0_radial_252_6321" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.7136 22.4514) rotate(-89.9555) scale(22.2943)">
<stop offset="0.220303" />
<stop offset="0.995966" stopOpacity="0" />
</radialGradient>
</defs>
</svg>);
}

return (
<svg
width="50"
height="50"
viewBox="0 0 47 47"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Group 852">
<circle
id="Ellipse 203"
cx="23.7272"
cy="23.2521"
r="22.9732"
fill="black"
/>
<g id="Group 837">
<g id="Group 835">
<path
id="v"
d="M23.8782 39.1812C23.7603 39.2212 23.6448 39.2206 23.5273 39.1796C22.016 38.6523 11.2383 34.4751 11.2383 22.5813V11.8298C11.2383 11.5454 11.4329 11.2974 11.7103 11.2284L23.5513 8.28365C23.6506 8.25897 23.7544 8.25897 23.8536 8.28365C23.9529 8.30833 35.6946 11.2284 35.6946 11.2284C35.9721 11.2974 36.1667 11.5454 36.1667 11.8298V22.5813C36.1667 34.5951 25.3913 38.6684 23.8782 39.1812Z"
fill="white"
/>
</g>
<path
id="Ellipse 202"
d="M31.177 15.646C30.2233 14.6001 29.0604 13.7663 27.7638 13.1987C26.4671 12.6311 25.0656 12.3424 23.6502 12.3513C22.2348 12.3602 20.837 12.6664 19.5476 13.2503C18.2581 13.8341 17.1058 14.6824 16.1653 15.7402L23.7136 22.4514L31.177 15.646Z"
fill="url(#paint0_radial_252_6321)"
/>
</g>
</g>
<defs>
<radialGradient
id="paint0_radial_252_6321"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23.7136 22.4514) rotate(-89.9555) scale(22.2943)"
>
<stop offset="0.220303" />
<stop offset="0.995966" stopOpacity="0" />
</radialGradient>
</defs>
</svg>
);
};
136 changes: 96 additions & 40 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,111 @@
import React from "react";
import React, { useState } from "react";
import { TrustAuthXLogo } from "../../public/svgs/TrustAuthXLogo";
import { Vector } from "../../public/svgs/Vector";
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { HamburgerMenuIcon } from "@radix-ui/react-icons";
import { GithubLogo } from "../../public/svgs/Github";
import { VectorRight } from "../../public/svgs/VectorRight";

const internalLinks = [
{ name: "Products" },
{ name: "Customers" },
{ name: "Enterprise" },
{ name: "Pricing" },
{ name: "Resources" },
{ name: "Contact us" },
];

const externalLinks = [
{ name: "Github" },
{ name: "Docs" },
{ name: "Sign in" },
{ name: "Let’s Get Started" },
];

const ExternalLinks = () => (
<>
<div className="flex items-center justify-start gap-1.5">
<GithubLogo />
<div className="font-semibold">Github</div>
</div>
<div className="font-semibold">Docs</div>
<div className="font-semibold">Sign in</div>

<div className="flex items-center justify-center gap-1 rounded-full border border-neutral-800 bg-white px-5 py-2.5">
<div className="text-center font-semibold leading-normal text-white mix-blend-exclusion">
Let’s Get Started
</div>
<div className="flex h-5 w-5 items-center justify-start gap-2 py-1.5 pr-2" />
<VectorRight />
</div>
</>
);

function Navbar() {
const [isOpen, setIsOpen] = useState(false);

return (
<div
className="fixed z-[1000] flex w-full justify-between text-white"
style={{
border: "0.5px solid #696C70",
background: "rgba(0, 0, 0, 0.41)",
padding: "1rem 3.53363rem",
mixBlendMode: "luminosity",
backdropFilter: "blur(75px)",
}}
>
{/*Internal Links*/}
<div className="flex items-center gap-7">
<div className="h-11 w-11">
<>
<div className="fixed z-[1000] flex w-full justify-between border-b-[0.5px] border-[#696C70] bg-[#00000068] px-6 py-2 text-white mix-blend-luminosity backdrop-blur-[75px] md:py-6">
{/*Internal Links*/}
<div className="flex items-center gap-7">
<TrustAuthXLogo />
</div>
<div className="flex items-start justify-center gap-7">
<div className="text-center font-medium">Products</div>
<div className="font-medium">Customers</div>
<div className="font-medium">Enterprise</div>
<div className="font-medium">Pricing</div>
<div className="font-medium">Resources</div>
<div className="font-medium leading-normal mix-blend-exclusion">
Contact us
<div className="hidden items-start justify-center gap-7 md:flex md:flex-wrap">
{internalLinks.map((link) => (
<div key={link.name} className="font-medium mix-blend-exclusion">
{link.name}
</div>
))}
</div>
</div>
</div>

{/*External Links*/}
<div className="flex items-center justify-center gap-11">
<div className="flex items-center justify-start gap-1.5">
<GithubLogo />
<div className="font-semibold">Github</div>
</div>
<div className="font-semibold">Docs</div>
<div className="font-semibold">Sign in</div>
<div className="flex items-center justify-center gap-1 rounded-full border border-neutral-800 bg-white px-5 py-2.5">
<div className="text-center font-semibold leading-normal text-white mix-blend-exclusion">
Let’s Get Started
</div>
<div className="flex h-5 w-5 items-center justify-start gap-2 py-1.5 pr-2" />
<VectorRight />
{/*External Links*/}
<div className="hidden items-center justify-center gap-11 md:flex md:flex-wrap">
<ExternalLinks />
</div>

{/* Mobile Menu*/}
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild className="md:hidden">
<button className="IconButton" aria-label="Customise options">
<HamburgerMenuIcon width={35} height={35} />
</button>
</DropdownMenu.Trigger>

<DropdownMenu.Portal>
<DropdownMenu.Content
className="DropdownMenuContent z-[1000] flex h-screen w-screen flex-col items-center gap-4 bg-black p-4 font-medium text-white md:hidden"
sideOffset={5}
>
{internalLinks.map((link) => (
<DropdownMenu.Item className="DropdownMenuItem" key={link.name}>
{link.name}
</DropdownMenu.Item>
))}

<DropdownMenu.Separator className="DropdownMenuSeparator" />

<DropdownMenu.Item className="DropdownMenuItem flex gap-3">
<GithubLogo />
GitHub
</DropdownMenu.Item>
<DropdownMenu.Item className="DropdownMenuItem">
Docs
</DropdownMenu.Item>
<DropdownMenu.Item className="DropdownMenuItem">
SignIn
</DropdownMenu.Item>
<div className="flex items-center justify-center gap-1 rounded-full border border-neutral-800 bg-white px-5 py-2.5">
<div className="text-center font-semibold leading-normal text-white mix-blend-exclusion">
Let’s Get Started
</div>
<div className="flex h-5 w-5 items-center justify-start gap-2 py-1.5 pr-2" />
<VectorRight />
</div>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
</div>
</div>
</>
);
}

Expand Down
33 changes: 17 additions & 16 deletions src/components/interactivePrism/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
"use client";

import * as THREE from "three";
import { useRef, useCallback, useState } from "react";
import { Canvas, useFrame, extend } from "@react-three/fiber";
import { Bloom, EffectComposer } from "@react-three/postprocessing";
import { PerformanceMonitor, usePerformanceMonitor } from '@react-three/drei';
import { round } from 'lodash'; // Import the round function
import { useCallback, useRef, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import { EffectComposer } from "@react-three/postprocessing";
import { PerformanceMonitor, usePerformanceMonitor } from "@react-three/drei";
import { round } from "lodash"; // Import the round function
import { Beam } from "./Beam/Beam";
import { Rainbow } from "./Rainbow";
import { Prism } from "./Prism";
Expand All @@ -19,6 +19,7 @@ export function lerp(object, prop, goal, speed = 0.1) {
}

const vector = new THREE.Vector3();

export function lerpV3(value, goal, speed = 0.1) {
value.lerp(vector.set(...goal), speed);
}
Expand All @@ -35,18 +36,18 @@ export function calculateRefractionAngle(
function Effects() {
const [hasEffects, setHasEffects] = useState(true);

usePerformanceMonitor({ onChange: ({ factor }) => {
if (hasEffects && factor > 0.5) {
// Decrease the qualityScale of your effects.
effect.qualityScale = round(0.5 + 0.5 * factor, 1);
}
// Handle other conditions for declining or inclining quality
}});
// usePerformanceMonitor({
// onChange: ({ factor }) => {
// if (hasEffects && factor > 0.5) {
// // Decrease the qualityScale of your effects.
// effect.qualityScale = round(0.5 + 0.5 * factor, 1);
// }
// // Handle other conditions for declining or inclining quality
// },
// });

return (
<EffectComposer>
{ /* Your post-processing effects here */ }
</EffectComposer>
<EffectComposer>{/* Your post-processing effects here */}</EffectComposer>
);
}

Expand All @@ -70,7 +71,7 @@ export default function InteractivePrism({
camera={{ position: [0, 0, 20], zoom: 65 }}
>
<color attach="background" args={[bgColor]} />
<PerformanceMonitor
<PerformanceMonitor
onDecline={() => setDpr(1)}
onIncline={() => setDpr(2)}
>
Expand Down

0 comments on commit 8790608

Please sign in to comment.