Skip to content

Commit

Permalink
theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@intoxicoder
intoxicoder committed Aug 31, 2024
1 parent f77eb71 commit cd06e2c
Show file tree
Hide file tree
Showing 6 changed files with 422 additions and 236 deletions.
203 changes: 105 additions & 98 deletions src/App.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,117 @@
<script lang="ts">
import { Router, Route } from "svelte-routing";
import "./app.css";
import Navbar from "$lib/components/Navbar.svelte";
import ProfileView from "$lib/components/ProfileView.svelte";
import UserProfile from "$lib/components/UserProfile.svelte";
import {
Home as HomeIcon,
Search,
Bell,
User,
MoreHorizontal,
Plus,
} from "lucide-svelte";
import { Router, Route } from "svelte-routing";
import "./app.css";
import Navbar from "$lib/components/Navbar.svelte";
import ProfileView from "$lib/components/ProfileView.svelte";
import UserProfile from "$lib/components/UserProfile.svelte";
import {
Home as HomeIcon,
Search,
Bell,
User,
MoreHorizontal,
Plus,
} from "lucide-svelte";
export let url = "";
export let url = "";
const menuItems = [
{ icon: HomeIcon, label: "Home", href: "/" },
{ icon: Search, label: "Explore", href: "/explore" },
{ icon: Bell, label: "Notifications", href: "/UserProfile" },
{ icon: User, label: "Profile", href: "/profile" },
];
const menuItems = [
{ icon: HomeIcon, label: "Home", href: "/" },
{ icon: Search, label: "Explore", href: "/explore" },
{ icon: Bell, label: "Notifications", href: "/UserProfile" },
{ icon: User, label: "Profile", href: "/profile" },
];
</script>

<Router {url}>
<div class="flex h-screen overflow-hidden">
<aside class="w-64 bg-white shadow-lg flex flex-col justify-between p-4">
<div class="space-y-4">
<div class="p-2">
<svg
class="w-8 h-8 text-purple-500"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
></path>
</svg>
</div>
<nav>
<ul class="space-y-2">
{#each menuItems as item}
<li>
<a
href={item.href}
class="flex items-center p-2 rounded-full hover:bg-purple-100 transition-colors duration-200"
>
<svelte:component
this={item.icon}
class="w-6 h-6 mr-4 text-purple-500"
/>
<span class="text-lg font-medium text-gray-700"
>{item.label}</span
>
</a>
</li>
{/each}
<li>
<button
class="flex items-center p-2 rounded-full hover:bg-purple-100 transition-colors duration-200"
>
<MoreHorizontal class="w-6 h-6 mr-4 text-purple-500" />
<span class="text-lg font-medium text-gray-700">More</span>
</button>
</li>
</ul>
</nav>
<button
class="w-full bg-purple-500 text-white rounded-full py-3 font-bold text-lg hover:bg-purple-600 transition-colors duration-200 flex items-center justify-center"
<div class="flex h-screen overflow-hidden">
<aside
class="w-64 bg-white shadow-lg flex flex-col justify-between p-4"
>
<Plus class="w-5 h-5 mr-2" />
Post
</button>
</div>
<div class="p-4">
<button class="flex items-center space-x-2">
<div
class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center text-purple-500 font-bold text-xl"
>
N
</div>
<div class="flex-grow text-left">
<p class="font-semibold text-gray-800">Nickzz</p>
<p class="text-sm text-gray-500">@Nickzz_AO</p>
</div>
<MoreHorizontal class="w-5 h-5 text-gray-500" />
</button>
</div>
</aside>
<div class="space-y-4">
<div class="p-2">
<svg
class="w-8 h-8 text-secondary-500"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
></path>
</svg>
</div>
<nav>
<ul class="space-y-2">
{#each menuItems as item}
<li>
<a
href={item.href}
class="flex items-center p-2 rounded-full hover:bg-secondary-100 transition-colors duration-200"
>
<svelte:component
this={item.icon}
class="w-6 h-6 mr-4 text-primary-500"
/>
<span
class="text-lg font-medium text-gray-700"
>{item.label}</span
>
</a>
</li>
{/each}
<li>
<button
class="flex items-center p-2 rounded-full hover:bg-secondary-100 transition-colors duration-200"
>
<MoreHorizontal
class="w-6 h-6 mr-4 text-primary-500"
/>
<span class="text-lg font-medium text-gray-700"
>More</span
>
</button>
</li>
</ul>
</nav>
<button
class="w-full bg-secondary-500 text-white rounded-full py-3 font-bold text-lg hover:bg-secondary-600 transition-colors duration-200 flex items-center justify-center"
>
<Plus class="w-5 h-5 mr-2" />
Post
</button>
</div>
<div class="p-4">
<button class="flex items-center space-x-2">
<div
class="w-10 h-10 rounded-full bg-secondary-200 flex items-center justify-center text-secondary-500 font-bold text-xl"
>
N
</div>
<div class="flex-grow text-left">
<p class="font-semibold text-gray-800">Nickzz</p>
<p class="text-sm text-gray-500">@Nickzz_AO</p>
</div>
<MoreHorizontal class="w-5 h-5 text-gray-500" />
</button>
</div>
</aside>

<main class="flex-1 overflow-y-auto bg-[#FFF0F5]">
<Navbar />
<div class="container mx-auto px-4 pt-16">
<Route path="/profile" component={ProfileView} />
<Route path="/UserProfile" component={UserProfile} />
</div>
</main>
</div>
<main class="flex-1 overflow-y-auto bg-[#FFF0F5]">
<Navbar />
<div class="container mx-auto px-4 pt-16">
<Route path="/profile" component={ProfileView} />
<Route path="/UserProfile" component={UserProfile} />
</div>
</main>
</div>
</Router>

<style>
:global(body) {
@apply bg-[#FFF0F5];
}
:global(body) {
@apply bg-[#FFF0F5];
}
</style>
65 changes: 45 additions & 20 deletions src/lib/components/Navbar.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,74 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { onMount } from 'svelte';
import { Toaster } from '$lib/components/ui/ui/sonner';
import WalletConnectButton from '$lib/components/wallet.svelte';
import { writable } from "svelte/store";
import { onMount } from "svelte";
import { Toaster } from "$lib/components/ui/ui/sonner";
import WalletConnectButton from "$lib/components/wallet.svelte";
let isMenuOpen = false;
function toggleMenu() {
isMenuOpen = !isMenuOpen;
}
</script>

<nav class="fixed top-0 left-0 right-0 z-50 bg-purple-600/90 backdrop-blur-md shadow-md">
<nav
class="fixed top-0 left-0 right-0 z-50 bg-secondary backdrop-blur-md shadow-md"
>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<span class="ml-2 text-xl font-bold text-white nova-mono-regular">Swappy</span>
<span
class="ml-2 text-xl font-bold text-white nova-mono-regular"
>Swappy</span
>
</div>

<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-2 lg:space-x-4">
<p class="text-white px-2 py-2 rounded-md text-xs lg:text-sm font-medium">Launch a Token Swap a Token</p>
<p
class="text-white px-2 py-2 rounded-md text-xs lg:text-sm font-medium"
>
Launch a Token Swap a Token
</p>
</div>
</div>
<div class="hidden md:block">
<WalletConnectButton buttonClass="text-purple-600 border-white bg-white hover:bg-purple-100 text-xs lg:text-sm font-semibold transition-colors duration-300" />
<WalletConnectButton
buttonClass="text-secondary-600 border-white bg-white hover:bg-secondary-100 text-xs lg:text-sm font-semibold transition-colors duration-300"
/>
</div>
<div class="md:hidden">
<button on:click={toggleMenu} class="text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
<svg
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7"
></path>
</svg>
</button>
</div>
</div>
</div>

{#if isMenuOpen}
<div class="md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<p class="text-white px-3 py-2 rounded-md text-sm font-medium">Launch a Token Swap a Token</p>
<div class="mt-4">
<WalletConnectButton buttonClass="w-full text-purple-600 border-white bg-white hover:bg-purple-100 font-semibold transition-colors duration-300" />
<div class="md:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<p class="text-white px-3 py-2 rounded-md text-sm font-medium">
Launch a Token Swap a Token
</p>
<div class="mt-4">
<WalletConnectButton
buttonClass="w-full text-secondary-600 border-white bg-white hover:bg-secondary-100 font-semibold transition-colors duration-300"
/>
</div>
</div>
</div>
</div>
{/if}
</nav>
</nav>
Loading

0 comments on commit cd06e2c

Please sign in to comment.