docsite.rsx 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. pub(crate) fn Nav() -> Element {
  2. rsx! {
  3. SearchModal {}
  4. header {
  5. class: "sticky top-0 z-30 bg-white dark:text-gray-200 dark:bg-ideblack border-b dark:border-stone-700 h-16 bg-opacity-80 backdrop-blur-sm",
  6. class: if HIGHLIGHT_NAV_LAYOUT() { "border border-orange-600 rounded-md" },
  7. div { class: "lg:py-2 px-2 max-w-screen-2xl mx-auto flex items-center justify-between text-sm leading-6 h-16",
  8. button {
  9. class: "bg-gray-100 rounded-lg p-2 mr-4 lg:hidden my-3 h-10 flex items-center text-lg z-[100]",
  10. class: if !SHOW_DOCS_NAV() { "hidden" },
  11. onclick: move |_| {
  12. let mut sidebar = SHOW_SIDEBAR.write();
  13. *sidebar = !*sidebar;
  14. },
  15. MaterialIcon { name: "menu", size: 24, color: MaterialIconColor::Dark }
  16. }
  17. div { class: "flex z-50 md:flex-1 px-2", LinkList {} }
  18. div { class: "hidden md:flex h-full justify-end ml-2 flex-1",
  19. div { class: "hidden md:flex items-center",
  20. Search {}
  21. div { class: "hidden lg:flex items-center border-l border-gray-200 ml-4 pl-4 dark:border-gray-800",
  22. label {
  23. class: "sr-only",
  24. id: "headlessui-listbox-label-2",
  25. "Theme"
  26. }
  27. Link {
  28. to: "https://discord.gg/XgGxMSkvUM",
  29. class: "block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300",
  30. new_tab: true,
  31. span { class: "sr-only", "Dioxus on Discord" }
  32. crate::icons::DiscordLogo {}
  33. }
  34. Link {
  35. to: "https://github.com/dioxuslabs/dioxus",
  36. class: "ml-4 block text-gray-400 hover:text-gray-500 dark:hover:text-gray-300",
  37. new_tab: true,
  38. span { class: "sr-only", "Dioxus on GitHub" }
  39. crate::icons::Github2 {}
  40. }
  41. }
  42. div { class: "hidden lg:flex items-center border-l border-gray-200 ml-4 pl-6 dark:border-gray-800",
  43. label {
  44. class: "sr-only",
  45. id: "headlessui-listbox-label-2",
  46. "Theme"
  47. }
  48. Link {
  49. to: Route::Deploy {},
  50. class: "md:ml-0 md:py-2 md:px-3 bg-blue-500 ml-4 text-lg md:text-sm text-white rounded font-semibold",
  51. "DEPLOY"
  52. }
  53. if LOGGED_IN() {
  54. Link { to: Route::Homepage {},
  55. img {
  56. src: "https://avatars.githubusercontent.com/u/10237910?s=40&v=4",
  57. class: "ml-4 h-10 rounded-full w-auto"
  58. }
  59. }
  60. }
  61. }
  62. }
  63. }
  64. }
  65. }
  66. }
  67. }
  68. #[component]
  69. fn SidebarSection(chapter: &'static SummaryItem<BookRoute>) -> Element {
  70. let link = chapter.maybe_link()?;
  71. let sections = link.nested_items.iter().map(|chapter| {
  72. rsx! {
  73. SidebarChapter { chapter }
  74. }
  75. });
  76. let _ = rsx! {
  77. SidebarChapter { chapter }
  78. };
  79. rsx! {
  80. SidebarChapter { chapter }
  81. };
  82. rsx! {
  83. div {}
  84. };
  85. rsx! { "hi" }
  86. rsx! {
  87. div { class: "full-chapter pb-4 mb-6",
  88. if let Some(url) = &link.location {
  89. Link {
  90. onclick: move |_| *SHOW_SIDEBAR.write() = false,
  91. to: Route::Docs { child: *url },
  92. h3 { class: "font-semibold mb-4", "{link.name}" }
  93. }
  94. }
  95. ul { class: "ml-1", {sections} }
  96. }
  97. }
  98. }