Skip to content

Commit 0f5fb86

Browse files
emmadesilvaemmadesilva
authored
Merge pull request #1047 from hydephp/1044-documentation-sidebar-improvements
Overhaul the documentation sidebar
2 parents 52cef93 + 0a156ad commit 0f5fb86

File tree

11 files changed

+121
-96
lines changed

11 files changed

+121
-96
lines changed

‎_media/app.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎config/docs.php‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,50 +13,25 @@
1313
return [
1414
/*
1515
|--------------------------------------------------------------------------
16-
| Sidebar Header Name
16+
| Sidebar Settings
1717
|--------------------------------------------------------------------------
1818
|
19-
| By default, the sidebar title shown in the documentation page layouts uses
20-
| the app name suffixed with "docs". You can change it with this setting.
19+
| The Hyde Documentation Module comes with a fancy Sidebar that is
20+
| automatically populated with links to your documentation pages.
21+
| Here, you can configure its behavior, content, look and feel.
2122
|
2223
*/
2324

24-
'header_title' => env('SITE_NAME', 'HydePHP').' Docs',
25+
'sidebar' => [
26+
// The title in the sidebar header
27+
'header' => env('SITE_NAME', 'HydePHP').' Docs',
2528

26-
/*
27-
|--------------------------------------------------------------------------
28-
| Sidebar Footer
29-
|--------------------------------------------------------------------------
30-
|
31-
| By default, there is a small footer in the sidebar that links to your home page.
32-
| If this is not your cup of tea, you can disable it by setting the option below to false.
33-
|
34-
*/
35-
36-
'sidebar_footer' => true,
29+
// When using a grouped sidebar, should the groups be collapsible?
30+
'collapsible' => false,
3731

38-
/*
39-
|--------------------------------------------------------------------------
40-
| Collaborative Source Editing Location
41-
|--------------------------------------------------------------------------
42-
|
43-
| @see https://hydephp.com/docs/master/documentation-pages#automatic-edit-page-button
44-
|
45-
| By adding a base URL here, Hyde will use it to create "edit source" links
46-
| to your documentation pages. Hyde expects this to be a GitHub path, but
47-
| it will probably work with other methods as well, if not, send a PR!
48-
|
49-
| You can also change the link text with the `edit_source_link_text` setting.
50-
|
51-
| Example: https://github.com/hydephp/docs/blob/master
52-
| Do not specify the filename or extension, Hyde will do that for you.
53-
| Setting the setting to null will disable the feature.
54-
|
55-
*/
56-
57-
// 'source_file_location_base' => 'https://github.com/<user>/<repo>/<[blob/edit]>/<branch>',
58-
'edit_source_link_text' => 'Edit Source',
59-
'edit_source_link_position' => 'footer', // 'header', 'footer', or 'both'
32+
// Should the sidebar footer be shown?
33+
'footer' => true,
34+
],
6035

6136
/*
6237
|--------------------------------------------------------------------------
@@ -97,6 +72,29 @@
9772
'max_heading_level' => 4,
9873
],
9974

75+
/*
76+
|--------------------------------------------------------------------------
77+
| Collaborative Source Editing Location
78+
|--------------------------------------------------------------------------
79+
|
80+
| @see https://hydephp.com/docs/master/documentation-pages#automatic-edit-page-button
81+
|
82+
| By adding a base URL here, Hyde will use it to create "edit source" links
83+
| to your documentation pages. Hyde expects this to be a GitHub path, but
84+
| it will probably work with other methods as well, if not, send a PR!
85+
|
86+
| You can also change the link text with the `edit_source_link_text` setting.
87+
|
88+
| Example: https://github.com/hydephp/docs/blob/master
89+
| Do not specify the filename or extension, Hyde will do that for you.
90+
| Setting the setting to null will disable the feature.
91+
|
92+
*/
93+
94+
// 'source_file_location_base' => 'https://github.com/<user>/<repo>/<[blob/edit]>/<branch>',
95+
'edit_source_link_text' => 'Edit Source',
96+
'edit_source_link_position' => 'footer', // 'header', 'footer', or 'both'
97+
10098
/*
10199
|--------------------------------------------------------------------------
102100
| Search Customization

‎packages/framework/config/docs.php‎

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,50 +13,25 @@
1313
return [
1414
/*
1515
|--------------------------------------------------------------------------
16-
| Sidebar Header Name
16+
| Sidebar Settings
1717
|--------------------------------------------------------------------------
1818
|
19-
| By default, the sidebar title shown in the documentation page layouts uses
20-
| the app name suffixed with "docs". You can change it with this setting.
19+
| The Hyde Documentation Module comes with a fancy Sidebar that is
20+
| automatically populated with links to your documentation pages.
21+
| Here, you can configure its behavior, content, look and feel.
2122
|
2223
*/
2324

24-
'header_title' => env('SITE_NAME', 'HydePHP').' Docs',
25+
'sidebar' => [
26+
// The title in the sidebar header
27+
'header' => env('SITE_NAME', 'HydePHP').' Docs',
2528

26-
/*
27-
|--------------------------------------------------------------------------
28-
| Sidebar Footer
29-
|--------------------------------------------------------------------------
30-
|
31-
| By default, there is a small footer in the sidebar that links to your home page.
32-
| If this is not your cup of tea, you can disable it by setting the option below to false.
33-
|
34-
*/
35-
36-
'sidebar_footer' => true,
29+
// When using a grouped sidebar, should the groups be collapsible?
30+
'collapsible' => false,
3731

38-
/*
39-
|--------------------------------------------------------------------------
40-
| Collaborative Source Editing Location
41-
|--------------------------------------------------------------------------
42-
|
43-
| @see https://hydephp.com/docs/master/documentation-pages#automatic-edit-page-button
44-
|
45-
| By adding a base URL here, Hyde will use it to create "edit source" links
46-
| to your documentation pages. Hyde expects this to be a GitHub path, but
47-
| it will probably work with other methods as well, if not, send a PR!
48-
|
49-
| You can also change the link text with the `edit_source_link_text` setting.
50-
|
51-
| Example: https://github.com/hydephp/docs/blob/master
52-
| Do not specify the filename or extension, Hyde will do that for you.
53-
| Setting the setting to null will disable the feature.
54-
|
55-
*/
56-
57-
// 'source_file_location_base' => 'https://github.com/<user>/<repo>/<[blob/edit]>/<branch>',
58-
'edit_source_link_text' => 'Edit Source',
59-
'edit_source_link_position' => 'footer', // 'header', 'footer', or 'both'
32+
// Should the sidebar footer be shown?
33+
'footer' => true,
34+
],
6035

6136
/*
6237
|--------------------------------------------------------------------------
@@ -97,6 +72,29 @@
9772
'max_heading_level' => 4,
9873
],
9974

75+
/*
76+
|--------------------------------------------------------------------------
77+
| Collaborative Source Editing Location
78+
|--------------------------------------------------------------------------
79+
|
80+
| @see https://hydephp.com/docs/master/documentation-pages#automatic-edit-page-button
81+
|
82+
| By adding a base URL here, Hyde will use it to create "edit source" links
83+
| to your documentation pages. Hyde expects this to be a GitHub path, but
84+
| it will probably work with other methods as well, if not, send a PR!
85+
|
86+
| You can also change the link text with the `edit_source_link_text` setting.
87+
|
88+
| Example: https://github.com/hydephp/docs/blob/master
89+
| Do not specify the filename or extension, Hyde will do that for you.
90+
| Setting the setting to null will disable the feature.
91+
|
92+
*/
93+
94+
// 'source_file_location_base' => 'https://github.com/<user>/<repo>/<[blob/edit]>/<branch>',
95+
'edit_source_link_text' => 'Edit Source',
96+
'edit_source_link_position' => 'footer', // 'header', 'footer', or 'both'
97+
10098
/*
10199
|--------------------------------------------------------------------------
102100
| Search Customization

‎packages/framework/resources/views/components/docs/collapsible-grouped-sidebar-navigation.blade.php‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@php /** @var \Hyde\Framework\Features\Navigation\DocumentationSidebar $sidebar */ @endphp
2+
<ul id="sidebar-navigation-items" role="list">
3+
@foreach ($sidebar->getGroups() as $group)
4+
<li class="sidebar-group" role="listitem" x-data="{ groupOpen: {{ $page->navigationMenuGroup() === $group ? 'true' : 'false' }} }">
5+
<header class="sidebar-group-header p-2 px-4 -ml-2 flex justify-between items-center group hover:bg-black/10" @click="groupOpen = ! groupOpen">
6+
<h4 class="sidebar-group-heading text-base font-semibold cursor-pointer dark:group-hover:text-white">{{ Hyde::makeTitle($group) }}</h4>
7+
<button class="sidebar-group-toggle opacity-50 group-hover:opacity-100">
8+
<svg class="sidebar-group-toggle-icon sidebar-group-toggle-icon-open" x-show="groupOpen" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
9+
<path d="M8 12L12 8L4 8L8 12Z" fill="currentColor" />
10+
</svg>
11+
<svg class="sidebar-group-toggle-icon sidebar-group-toggle-icon-closed" x-show="! groupOpen" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
12+
<path d="M12 8L8 12L8 4L12 8Z" fill="currentColor" />
13+
</svg>
14+
</button>
15+
</header>
16+
<ul class="sidebar-group-list ml-4 px-2 mb-2" role="list" x-show="groupOpen">
17+
@foreach ($sidebar->getItemsInGroup($group) as $item)
18+
<x-hyde::docs.grouped-sidebar-item :item="$item" :active="$item->route->getRouteKey() === $currentRoute->getRouteKey()" />
19+
@endforeach
20+
</ul>
21+
</li>
22+
@endforeach
23+
</ul>

‎packages/framework/resources/views/components/docs/grouped-sidebar-navigation.blade.php‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
@php /** @var \Hyde\Framework\Features\Navigation\DocumentationSidebar $sidebar */ @endphp
22
<ul id="sidebar-navigation-items" role="list">
3-
@foreach ($sidebar->getGroups() as $group)
4-
<li class="sidebar-group mb-4 mt-4 first:mt-0" role="listitem">
5-
<h4 class="sidebar-group-heading text-base font-semibold mb-2 -ml-1">{{ Hyde::makeTitle($group) }}</h4>
6-
<ul class="sidebar-group-list ml-4" role="list">
7-
@foreach ($sidebar->getItemsInGroup($group) as $item)
8-
<x-hyde::docs.grouped-sidebar-item :item="$item" :active="$item->route->getRouteKey() === $currentRoute->getRouteKey()" />
9-
@endforeach
10-
</ul>
11-
</li>
12-
@endforeach
3+
@foreach ($sidebar->getGroups() as $group)
4+
<li class="sidebar-group" role="listitem">
5+
<header class="sidebar-group-header p-2 px-4 -ml-2 flex justify-between items-center">
6+
<h4 class="sidebar-group-heading text-base font-semibold">{{ Hyde::makeTitle($group) }}</h4>
7+
</header>
8+
<ul class="sidebar-group-list ml-4 px-2 mb-2" role="list">
9+
@foreach ($sidebar->getItemsInGroup($group) as $item)
10+
<x-hyde::docs.grouped-sidebar-item :item="$item" :active="$item->route->getRouteKey() === $currentRoute->getRouteKey()" />
11+
@endforeach
12+
</ul>
13+
</li>
14+
@endforeach
1315
</ul>

‎packages/framework/resources/views/components/docs/mobile-navigation.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<strong class="px-2 mr-auto">
33
@if(DocumentationPage::home() !== null)
44
<a href="{{ DocumentationPage::home() }}">
5-
{{ config('docs.header_title', 'Documentation') }}
5+
{{ config('docs.sidebar.header', 'Documentation') }}
66
</a>
77
@else
8-
{{ config('docs.header_title', 'Documentation') }}
8+
{{ config('docs.sidebar.header', 'Documentation') }}
99
@endif
1010
</strong>
1111
<ul class="flex items-center">

‎packages/framework/resources/views/components/docs/sidebar-brand.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<strong class="px-2">
33
@if(DocumentationPage::home() !== null)
44
<a href="{{ DocumentationPage::home() }}">
5-
{{ config('docs.header_title', 'Documentation') }}
5+
{{ config('docs.sidebar.header', 'Documentation') }}
66
</a>
77
@else
8-
{{ config('docs.header_title', 'Documentation') }}
8+
{{ config('docs.sidebar.header', 'Documentation') }}
99
@endif
1010
</strong>
1111
<x-hyde::navigation.theme-toggle-button class="opacity-75 hover:opacity-100"/>

‎packages/framework/resources/views/components/docs/sidebar-navigation.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@php /** @var \Hyde\Framework\Features\Navigation\DocumentationSidebar $sidebar */ @endphp
2-
<ul id="sidebar-navigation" role="list">
2+
<ul id="sidebar-navigation" role="list" class="pl-2">
33
@foreach ($sidebar->items as $item)
44
<li @class(['sidebar-navigation-item -ml-4 pl-4' , 'active bg-black/5 dark:bg-black/10'=> $item->route->getRouteKey() === $currentRoute->getRouteKey()])>
55
@if($item->route->getRouteKey() === $currentRoute->getRouteKey())

‎packages/framework/resources/views/components/docs/sidebar.blade.php‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,22 @@ class="bg-gray-100 dark:bg-gray-800 dark:text-gray-200 h-screen w-64 fixed z-30
44
@include('hyde::components.docs.sidebar-brand')
55
</header>
66
<nav id="sidebar-navigation"
7-
class="p-4 overflow-y-auto border-y border-gray-300 dark:border-[#1b2533] h-full">
7+
class="p-2 overflow-y-auto border-y border-gray-300 dark:border-[#1b2533] h-full">
88
@php
99
$sidebar = \Hyde\Framework\Features\Navigation\DocumentationSidebar::create();
1010
@endphp
1111

1212
@if($sidebar->hasGroups())
13-
@include('hyde::components.docs.grouped-sidebar-navigation')
13+
@if(config('docs.sidebar.collapsible', false))
14+
@include('hyde::components.docs.collapsible-grouped-sidebar-navigation')
15+
@else
16+
@include('hyde::components.docs.grouped-sidebar-navigation')
17+
@endif
1418
@else
1519
@include('hyde::components.docs.sidebar-navigation')
1620
@endif
1721
</nav>
18-
@if(config('docs.sidebar_footer', true))
22+
@if(config('docs.sidebar.footer', true))
1923
<footer id="sidebar-footer" class="h-16 p-4 w-full bottom-0 left-0 text-center leading-8">
2024
@include('hyde::components.docs.sidebar-footer')
2125
</footer>

‎packages/hydefront/sass/docs/table-of-contents.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
opacity: 1;
3333
transition: opacity,
3434
background 0.3s ease-in-out;
35-
background-color: rgba(221, 221, 221, 0.5);
35+
background-color: rgba(128, 128, 128, 20%);
3636
}
3737
}
3838
}

0 commit comments

Comments
 (0)