Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

Commit

Permalink
Add sidebars from mekaui (#49)
Browse files Browse the repository at this point in the history 
* add iconsOnly

* Modify sidebar headerBodyAndFooter

* add search to sidebar

* modify icons for sidebar

* add menuWithTitle and bottomMenu

* change bg color

* add avatar sidebar

* add sidebar with submenu
  • Loading branch information
@willpinha
willpinha authored Jan 16, 2024
1 parent 66722b2 commit 90862c6
Show file tree
Hide file tree
Showing 9 changed files with 542 additions and 63 deletions.
Binary file added public/images/avatar.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Filter.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<i class="text-secondary">UI examples</i>
</h1>

<div>
<div class="text-center">
🌸 You can find
<span class="badge badge-accent badge-outline badge-sm">{numExamples}</span> UI examples in
<span class="badge badge-accent badge-outline badge-sm">{tags.length}</span> tags!
Expand Down
40 changes: 40 additions & 0 deletions src/examples/sidebar/avatar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<aside class="flex flex-col items-center h-screen sticky top-0 overflow-y-auto space-y-4 w-72 py-6 px-4 bg-base-200">
<!-- Logo -->
<a class="btn btn-ghost text-lg">
<img alt="Logo" src="/logo.svg" class="w-6"/>
Company Name
</a>

<img alt="Profile" src="/images/avatar.png" class="w-32 rounded-full"/>

<h2 class="font-bold text-lg">User name</h2>

<span class="text-sm">[email protected]</span>

<ul class="menu menu-lg w-full">
<li>
<a>
<i class="fa-solid fa-inbox fa-fw"></i>
Inbox
</a>
</li>
<li>
<a class="active">
<i class="fa-solid fa-user fa-fw"></i>
Accounts
</a>
</li>
<li>
<a>
<i class="fa-solid fa-ticket fa-fw"></i>
Tickets
</a>
</li>
<li>
<a>
<i class="fa-solid fa-gear fa-fw"></i>
Settings
</a>
</li>
</ul>
</aside>
92 changes: 92 additions & 0 deletions src/examples/sidebar/bottomMenu.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<aside class="h-screen sticky top-0 overflow-y-auto space-y-4 w-72 py-6 px-4 bg-base-200">
<!-- Logo -->
<a class="btn btn-ghost">
<img alt="Logo" src="/logo.svg" class="w-6"/>

Company Name
</a>

<!-- Links -->
<ul class="menu p-0">
<li>
<a>
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
</li>
<li>
<a>
<i class="fa-solid fa-chart-line fa-fw"></i>
Dashboard
</a>
</li>
<li>
<a class="active">
<i class="fa-solid fa-bars-progress fa-fw"></i>
Projects
</a>
</li>
<li>
<a>
<i class="fa-solid fa-list fa-fw"></i>
Tasks
</a>
</li>
<li>
<a>
<i class="fa-solid fa-chart-pie fa-fw"></i>
Reporting
</a>
</li>
<li>
<a>
<i class="fa-solid fa-users fa-fw"></i>
Users
</a>
</li>
</ul>

<div class="divider"></div>

<!-- Bottom menu -->
<div class="flex flex-col gap-2">
<div class="flex justify-between items-center">
<h2 class="font-bold">Projects</h2>

<a class="btn btn-square btn-sm text-lg" title="Add project">
<i class="fa-solid fa-square-plus"></i>
</a>
</div>

<ul class="menu px-0">
<li>
<a>
<i class="fa-solid fa-circle text-primary"></i>
UI components
<i class="fa-solid fa-chevron-right self-end"></i>
</a>
</li>
<li>
<a>
<i class="fa-solid fa-circle text-secondary"></i>
Blog navigation
<i class="fa-solid fa-chevron-right self-end"></i>
</a>
</li>
<li>
<a>
<i class="fa-solid fa-circle text-accent"></i>
Design system
<i class="fa-solid fa-chevron-right self-end"></i>
</a>
</li>
<li>
<a>
<i class="fa-solid fa-circle text-neutral"></i>
Wishlist components
<i class="fa-solid fa-chevron-right self-end"></i>
</a>
</li>
</ul>
</div>
</aside>
62 changes: 0 additions & 62 deletions src/examples/sidebar/headerBodyAndFooter.html
View file

This file was deleted.

69 changes: 69 additions & 0 deletions src/examples/sidebar/iconsOnly.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<div class="flex overflow-hidden relative">
<!-- Sidebar -->
<aside class="h-screen sticky top-0 flex flex-col overflow-y-auto gap-2 py-6 px-2 bg-base-200">
<!-- Logo -->
<a class="btn btn-square btn-ghost">
<img alt="Logo" src="/logo.svg" class="w-5" />
</a>

<!-- Icons -->

<div class="divider my-0"></div>

<a class="btn btn-square btn-ghost text-xl" title="Home">
<i class="fa-solid fa-house"></i>
</a>

<a class="btn btn-square btn-secondary text-xl" title="Data">
<i class="fa-solid fa-chart-simple"></i>
</a>

<a class="btn btn-square btn-ghost text-xl" title="Evolution">
<i class="fa-solid fa-chart-line"></i>
</a>

<div class="divider my-0"></div>

<a class="btn btn-square btn-ghost text-xl" title="Deliver">
<i class="fa-solid fa-truck"></i>
</a>

<a class="btn btn-square btn-ghost text-xl" title="Products">
<i class="fa-solid fa-box"></i>
</a>

<div class="divider my-0"></div>

<a class="btn btn-square btn-ghost text-xl" title="Podcast">
<i class="fa-solid fa-podcast"></i>
</a>

<a class="btn btn-square btn-ghost text-xl" title="Blog">
<i class="fa-solid fa-blog"></i>
</a>

<a class="btn btn-square btn-ghost text-xl" title="News">
<i class="fa-solid fa-newspaper"></i>
</a>

<div class="divider my-0"></div>

<a class="btn btn-square btn-ghost text-xl" title="GitHub">
<i class="fa-brands fa-github"></i>
</a>

<a class="btn btn-square btn-ghost text-xl" title="Facebook">
<i class="fa-brands fa-facebook"></i>
</a>

<a class="btn btn-square btn-ghost text-xl" title="Youtube">
<i class="fa-brands fa-youtube"></i>
</a>

<div class="divider my-0"></div>

<a class="btn btn-circle btn-ghost text-xl" title="Profile">
<img alt="Profile" src="/images/avatar.png" class="w-8 rounded-full" />
</a>
</aside>
</div>
Loading

0 comments on commit 90862c6

Please sign in to comment.