Skip to content

Instantly share code, notes, and snippets.

@transcendr

transcendr/gist from clipboard

Created December 7, 2023 13:52
Show Gist options
  • Save transcendr/c5493fff03e597b33bdae319cc5a77fc to your computer and use it in GitHub Desktop.
Save transcendr/c5493fff03e597b33bdae319cc5a77fc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gist from clipboard
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sidebar</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div
class="bg-gray-800 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out"
>
<!-- Logo and upgrade plan -->
<div class="flex items-center space-x-2 px-4">
<div class="rounded-full bg-purple-600 w-10 h-10"></div>
<span class="text-lg font-semibold">Reflection.app</span>
</div>
<nav>
<a
href="#"
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700"
>Home</a
>
<a
href="#"
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700"
>Threads</a
>
<a
href="#"
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700"
>Drafts & sent</a
>
<a
href="#"
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700"
>Activity</a
>
<a
href="#"
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700"
>Later</a
>
<a
href="#"
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700"
>More</a
>
<!-- Channels -->
<div class="pt-4">
<p class="px-4 text-xs">Channels</p>
<a
href="#"
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700"
># development</a
>
<!-- Add more channels here -->
</div>
<!-- Direct Messages -->
<div class="pt-4">
<p class="px-4 text-xs">Direct messages</p>
<a
href="#"
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700"
>Kim</a
>
<!-- Add more direct messages here -->
</div>
<!-- Apps -->
<div class="pt-4">
<p class="px-4 text-xs">Apps</p>
<a
href="#"
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700"
>GitHub</a
>
<!-- Add more apps here -->
</div>
</nav>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment