Skip to content
This repository was archived by the owner on Jan 24, 2022. It is now read-only.

Commit a51e19e

Browse files
khatabwedaakhatabwedaa
committed
Build header & navbar
1 parent b00c45d commit a51e19e

File tree

7 files changed

+245
-6
lines changed

7 files changed

+245
-6
lines changed

‎config.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
return [
44
'production' => false,
55
'baseUrl' => '',
6-
'title' => 'Jigsaw Tailwindcss',
6+
'title' => 'Tailwind CSS Components',
77
'description' => '',
88
'collections' => [],
99
];

‎source/_layouts/master.blade.php

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,48 @@
1212
<title>{{ $page->title }}</title>
1313

1414
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap">
15-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tajawal:300,400,500,700&display=swap&subset=arabic">
1615

1716
<link rel="stylesheet" href="{{ mix('css/app.css', 'assets/build') }}">
1817

1918
<script src="{{ mix('js/app.js', 'assets/build') }}"></script>
2019
</head>
2120
<body class="font-roboto">
22-
@yield('body')
21+
<header class="border-b" x-data="{ isOpen: false }">
22+
<div class="container px-4 py-5 mx-auto space-y-4 lg:space-y-0 lg:flex lg:items-center lg:justify-between lg:space-x-10">
23+
<div class="flex justify-between">
24+
<img class="w-48 lg:-mt-1 sm:w-60" src="./assets/logo.svg" alt="Tailwindcomponents logo">
25+
26+
<div class="flex items-center space-x-2 lg:hidden">
27+
<button @click="isOpen = !isOpen" class="p-1 rounded-md hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">
28+
<svg class="w-6 h-6 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
29+
<path fill-rule="evenodd"
30+
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"
31+
clip-rule="evenodd" />
32+
</svg>
33+
</button>
34+
</div>
35+
</div>
36+
37+
<div x-show="isOpen"
38+
x-transition:enter="transition ease-out duration-100 transform"
39+
x-transition:enter-start="opacity-0 scale-95"
40+
x-transition:enter-end="opacity-100 scale-100"
41+
x-transition:leave="transition ease-in duration-75 transform"
42+
x-transition:leave-start="opacity-100 scale-100"
43+
x-transition:leave-end="opacity-0 scale-95"
44+
class="flex flex-col space-y-4 lg:hidden"
45+
>
46+
@include('_layouts.nav')
47+
</div>
48+
49+
<div class="hidden lg:flex lg:flex-row lg:items-center lg:justify-between lg:flex-1 lg:space-x-2">
50+
@include('_layouts.nav')
51+
</div>
52+
</div>
53+
</header>
54+
55+
<main>
56+
@yield('body')
57+
</main>
2358
</body>
2459
</html>

‎source/_layouts/nav.blade.php

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div class="flex flex-col space-y-2 lg:space-y-0 lg:flex-row lg:space-x-6 xl:space-x-8 lg:items-center">
2+
<a class="text-primary hover:underline" href="#">Home</a>
3+
<a class="text-gray-500 hover:text-primary hover:underline" href="#">Components</a>
4+
<a class="text-gray-500 hover:text-primary hover:underline" href="#">Featured</a>
5+
<a class="text-gray-500 hover:text-primary hover:underline" href="#">Blog</a>
6+
<a class="text-gray-500 hover:text-primary hover:underline" href="#">Cheatsheet</a>
7+
</div>
8+
9+
<div class="flex flex-col space-y-4 lg:space-y-0 lg:flex-row lg:items-center lg:space-x-4">
10+
<button class="flex justify-center py-2 bg-gray-100 rounded-md lg:bg-transparent lg:p-2 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none">
11+
<svg class="w-5 h-5 text-gray-500" viewBox="0 0 20 20" fill="currentColor">
12+
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
13+
</svg>
14+
</button>
15+
16+
<a href="#" class="px-4 py-2 text-sm font-semibold text-center text-white rounded-md bg-primary hover:bg-teal-500">
17+
Submit new component
18+
</a>
19+
20+
<button class="flex items-center justify-center space-x-2 focus:outline-none">
21+
<img class="object-cover w-8 h-8 border-2 rounded-full border-primary lg:w-10 lg:h-10 " src="https://images.unsplash.com/photo-1502767882403-636aee14f873?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="avatar">
22+
<span class="font-medium text-gray-800 lg:hidden">Jane Doe</span>
23+
</button>
24+
</div>

0 commit comments

Comments
 (0)