This commit is contained in:
drusepth 2022-03-21 18:06:28 -07:00
parent cc8e6bdbc6
commit e478b7b0b6

View File

@ -24,32 +24,31 @@
<%# render 'cards/ui/notice' %>
<section class="bg-gray-50 flex flex-col" x-data="{ sideBar: false }">
<nav class="fixed top-0 left-0 z-20 h-screen pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform bg-white border-r w-60 md:translate-x-0" :class="{ '-translate-x-full' : !sideBar, 'translate-x-0' : sideBar }" @click.away="sideBar = false">
<%= link_to root_path, class: 'flex items-center px-4 py-3 border-b border-gray-300' do %>
<nav class="fixed top-0 flex flex-col left-0 z-20 h-screen overflow-x-hidden transition origin-left transform bg-white border-r w-60 md:translate-x-0" :class="{ '-translate-x-full' : !sideBar, 'translate-x-0' : sideBar }" @click.away="sideBar = false">
<%= link_to root_path, class: 'flex items-center px-4 py-3 border-b border-blue-300 shadow' do %>
<%= image_tag 'logos/book-small.webp', class: 'h-8 mr-3' %>
<span class="text-2xl font-bold text-notebook-blue tracking-wide">
Notebook.ai
</span>
<% end %>
<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
<nav class="text-sm font-medium text-gray-600 overflow-y-auto flex-grow" aria-label="Main Navigation">
<%= link_to '#', class: 'flex items-center px-2 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900' do %>
<i class="material-icons text-gray-400 group-hover:text-gray-600 shrink-0 w-6 h-6 mr-2 text-gray-400 transition">dashboard</i>
<span>Table of Contents</span>
<% end %>
<div x-data="collapse()">
<div class="flex items-center justify-between px-2 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900" role="button" x-spread="trigger">
<div x-data="{ expandedWorldbuildingSidebar: false }">
<div class="flex items-center justify-between px-2 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900" role="button" @click="expandedWorldbuildingSidebar = !expandedWorldbuildingSidebar" >
<div class="flex items-center">
<i class="material-icons text-notebook-blue shrink-0 w-6 h-6 mr-2">book</i>
<span>Worldbuilding</span>
</div>
<svg :class="{ 'rotate-90': open }" class="shrink-0 w-4 h-4 ml-2 transition transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<svg :class="{ 'rotate-90': expandedWorldbuildingSidebar }" class="shrink-0 w-4 h-4 ml-2 transition transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div x-spread="collapse" x-cloak class="pl-1">
<div x-show="expandedWorldbuildingSidebar" x-cloak class="pl-1 mb-2">
<% @activated_content_types.each do |content_type| %>
<% content_type_klass = content_class_from_name(content_type) %>
<%= link_to main_app.polymorphic_path(content_type_klass), class: 'flex items-center px-4 py-2 cursor-pointer group hover:bg-notebook-blue hover:text-white rounded-l-full' do %>
@ -123,8 +122,9 @@
</nav>
</nav>
<!-- navbar -->
<div class="ml-0 transition md:ml-60">
<header class="flex sticky top-0 z-50 w-full px-2 bg-notebook-blue border-b border-blue-400 h-14">
<header class="flex sticky top-0 z-50 w-full px-2 bg-notebook-blue border-b border-blue-400 h-14 shadow">
<button class="block btn btn-light md:hidden" @click.stop="sideBar = true">
<span class="sr-only">Menu</span>
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@ -196,17 +196,11 @@
</div>
</div>
<!-- Sidebar Backdrop -->
<!--
<div class="fixed inset-0 z-10 w-screen h-screen bg-black bg-opacity-25 md:hidden" x-show.transition="sideBar" x-cloak></div>
-->
</section>
<%= react_component("Footer") unless defined?(@show_footer) && !@show_footer %>
<%# render 'layouts/quick_add_fab' unless defined?(@show_footer) && !@show_footer %>