# Navbar Design System ⭐

<img width="1119" alt="Screenshot 2022-12-03 at 6 48 07 PM" src="https://user-images.githubusercontent.com/91758830/205443496-bc793dac-35c2-4794-afd7-03450a1f99a8.png">

## General convention to follow :
The componet should contain insdie a `<nav></ nav>` tag.

### **Border-radius** :

Border radius of each card is `none`. Donot need to give any border radius class as well. 

### **Paddings :**

Generally for the outermost padding we use. `px-6 py-4`

### Font :

|  | heading / logo | Normal text / Buttons or anchor tag | sub text | badge type |
| --- | --- | --- | --- | --- |
| size | text-lg | text-lg | text-sm | text-sm / text-md |
| color | text-gray-800 | text-gray-800 / text-gray-600 ( according to the design) | text-gray-600 | text-gray-400 |
| font | semi-bold | semibold / normal | normal | normal |

### Width & heights :

The width of the component totally depends on the design.

But we usually use these 3 breakpoints 🔽

- `md` → This will be default one. Breaks form the mobile view to desktop view
- `sm` → This is used ocassionally for complex Navbars for tablet views.

The height of the components depends on the amount of content on it. We need to make it fluid. **Giving a fixed height is not recommended at all.** 

---

### Anchor tag :

- **color** : `text-blue-600`
- **underline** : On hover there is an underline → `hover:underline`
- **underline offset** : `underline-offset-4`

### Buttons :

**We will be mostly using the anchor tags for all navigation.** 


We need to use the already built buttons for this. **[Buttons](https://github.com/Clueless-Community/seamless-ui/tree/main/Buttons)** 🔗 . Don’t use any buttons outside this.

### Icons :

Icons must be used from **[Heroicons](https://heroicons.com/)** 🖇️

**Note :** You need to use a solid 24X24 SVG form heroicons.

### Images & Names:

For the name you must use the name : `SeamLess UI`


For the logo you must use : [`https://i.ibb.co/jGMgp7r/seamless-ui.png`](https://i.ibb.co/jGMgp7r/seamless-ui.png)


## Responsive design

For the hamburger menu, we will use this button given below.
```html
    <button class="rounded-md border border-blue-600 p-3 text-blue-600 transition-all hover:border-blue-600 hover:bg-blue-600 hover:text-white disabled:bg-gray-600 md:hidden">
      <svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
    </button>
```

## Example Code :
This is the example code of the `Navbar/src/navbar-0.html`

```html
<nav class="shadow-md dark:bg-white sm:px-4">
  <div class="flex items-center justify-between py-4 px-6">
    <a href="https://clueless.tech/" class="flex items-center">
      <img src="https://i.ibb.co/jGMgp7r/seamless-ui.png" alt="" class="w-16" />
      <p class="text-xl">SeamLess UI</p>
    </a>
    <div class="hidden gap-8 md:flex">
      <a href="#" class="block py-2 pr-4 pl-12 transition-all dark:text-gray-400 md:border-0 md:p-0 md:hover:bg-transparent md:dark:hover:text-gray-900">Home</a>
      <a href="#" class="block py-2 pr-4 pl-12 transition-all dark:text-gray-400 md:border-0 md:p-0 md:hover:bg-transparent md:dark:hover:text-gray-900">About</a>
      <a href="#" class="block py-2 pr-4 pl-12 transition-all dark:text-gray-400 md:border-0 md:p-0 md:hover:bg-transparent md:dark:hover:text-gray-900">Services</a>
      <a href="#" class="block py-2 pr-4 pl-12 transition-all dark:text-gray-400 md:border-0 md:p-0 md:hover:bg-transparent md:dark:hover:text-gray-900">Pricing</a>
      <a href="#" class="block py-2 pr-4 pl-12 transition-all dark:text-gray-400 md:border-0 md:p-0 md:hover:bg-transparent md:dark:hover:text-gray-900">Contact</a>
    </div>
    <div href="#" class="search hidden md:block">
      <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block h-6 w-6 py-2 pr-4 pl-3 dark:text-gray-400 md:border-0 md:p-0 md:hover:bg-transparent md:dark:hover:text-gray-900">
        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </div>
    <button class="rounded-md border border-blue-600 p-3 text-blue-600 transition-all hover:border-blue-600 hover:bg-blue-600 hover:text-white disabled:bg-gray-600 md:hidden">
      <svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
    </button>
  </div>
</nav>


```
