mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
more navbar wip
This commit is contained in:
drusepth
parent
5774890d6c
commit
a1557b324f
@ -1,14 +1,14 @@
|
||||
<div class="bg-notebook-blue text-white w-full flex justify-between sticky top-0 z-50">
|
||||
<div class="relative block p-4 lg:p-6 text-xl font-bold">
|
||||
<%= image_tag 'logos/book-small.webp', class: 'h-8 w-8 float-left mr-3 bg-white rounded-full' %>
|
||||
<div class="shadow-lg bg-notebook-blue text-white w-full flex justify-between sticky top-0 z-50 py-1 px-1">
|
||||
<div class="block pt-1 pl-1 text-xl font-bold">
|
||||
<%= image_tag 'logos/book-small.webp', class: 'h-8 w-8 px-1 float-left mr-3 bg-white rounded-full' %>
|
||||
<%= link_to 'Notebook.ai', root_path, class: 'hover:text-blue-100' %>
|
||||
</div>
|
||||
|
||||
<div class="pt-2 relative mx-auto text-notebook-blue">
|
||||
<div class="text-notebook-blue">
|
||||
<input class="border-2 border-gray-300 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none"
|
||||
type="search" name="search" placeholder="Search your notebook">
|
||||
<button type="submit" class="absolute right-0 top-0 mt-5 mr-4">
|
||||
<svg class="text-gray-600 h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg"
|
||||
<button type="submit" class="absolute right-0 top-0 mt-4 mr-4">
|
||||
<svg class="text-gray-600 hover:text-notebook-blue h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px"
|
||||
viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve"
|
||||
width="512px" height="512px">
|
||||
@ -18,169 +18,10 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul class="flex">
|
||||
<!--
|
||||
<li class="border-transparent border-b-2 hover:border-white text-sm">
|
||||
<a href="#" class="relative block py-6 px-2 lg:p-6 text-sm lg:text-base font-bold">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
-->
|
||||
|
||||
<!-- Toggle dropdown by click -->
|
||||
<li class="toggleable border-transparent border-b-2 hover:border-white text-sm">
|
||||
<input type="checkbox" value="selected" id="toggle-one" class="toggle-input">
|
||||
<label for="toggle-one" class="block cursor-pointer py-6 px-4 lg:p-6 text-sm lg:text-base font-bold">Worldbuilding</label>
|
||||
<div role="toggle" class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-blue-100 text-black border-b border-notebook-blue">
|
||||
<div class="w-full flex flex-wrap justify-between mx-2">
|
||||
<div class="px-4 w-full sm:w-full lg:w-1/2 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-3 lg:pt-2">
|
||||
<div class="flex flex-row">
|
||||
<h3 class="flex-grow font-bold text-xl text-black text-bold mb-2">
|
||||
Pages for <span class="<%= Universe.text_color %>">The Great Universe</span>
|
||||
<%= link_to 'change universe', main_app.customization_content_types_path, class: "text-xs #{Universe.text_color} ml-4" %>
|
||||
</h3>
|
||||
<div class="text-notebook-blue">
|
||||
<%= link_to 'customize active pages', main_app.customization_content_types_path %>
|
||||
</div>
|
||||
</div>
|
||||
<% (@current_user_content.keys - [Document.name, Timeline.name, Universe.name]).sort.each do |key| %>
|
||||
<%= link_to polymorphic_path(key.pluralize.downcase) do %>
|
||||
<span class="bg-white rounded-lg inline-block <%= content_class_from_name(key).color %> text-white pb-4 pt-1 px-4 m-1 hover:shadow-lg">
|
||||
<i class="material-icons mr-2 relative top-2"><%= content_class_from_name(key).icon %></i>
|
||||
<span><%= key.pluralize %></span>
|
||||
<span class="bg-black rounded-full px-2 py-1 ml-2 bg-white text-gray-700 text-xs">
|
||||
<%= number_with_delimiter @current_user_content.fetch(key, []).length %>
|
||||
</span>
|
||||
</span>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-b-0 sm:border-r md:border-b-0 pb-6 pt-6 lg:pt-3">
|
||||
<h3 class="font-bold text-xl text-bold">Recently-edited pages</h3>
|
||||
<div class="overflow-y-scroll max-h-72">
|
||||
<% @recently_edited_pages.each do |content| %>
|
||||
<% content_class = content_class_from_name(content.page_type) %>
|
||||
<li>
|
||||
<%= link_to main_app.send("#{content.page_type.downcase}_path", content.id), class: "block px-3 pb-2 hover:bg-notebook-blue #{content.text_color} hover:text-white" do %>
|
||||
<i class="material-icons mr-2 relative top-2"><%= content_class.icon %></i>
|
||||
<%= content.name %>
|
||||
<span class="text-gray-400 text-xs ml-1"><%= time_ago_in_words content.updated_at %> ago</span>
|
||||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 pb-6 pt-6 lg:pt-3">
|
||||
<h3 class="font-bold text-xl text-bold mb-2">Expand your world</h3>
|
||||
<li class="pt-3 font-bold mb-2">
|
||||
What is <span class="<%= Character.text_color %>">Brock Lentil</span>'s hair color?
|
||||
</li>
|
||||
<li class="mb-1">
|
||||
<textarea class="w-full rounded-lg h-24 p-4" placeholder="Write as little or as much as you'd like!"></textarea>
|
||||
</li>
|
||||
<li class="text-right">
|
||||
<button class="bg-notebook-blue text-white rounded-lg px-2 py-1">Save answer</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- ## Toggleable Link Template ##
|
||||
|
||||
<li class="toggleable"><input type="checkbox" value="selected" id="toggle-xxx" class="toggle-input"><label for="toggle-xxx" class="cursor-pointer">Click</label><div role="toggle" class="mega-menu">
|
||||
Add your mega menu content
|
||||
</div></li>
|
||||
|
||||
-->
|
||||
|
||||
<!--Hoverable Link-->
|
||||
<li class="hoverable hover:bg-blue-800 hover:text-white">
|
||||
<a href="#" class="relative block py-6 px-4 lg:p-6 text-sm lg:text-base font-bold hover:bg-blue-800 hover:text-white">Writing</a>
|
||||
<div class="p-6 mega-menu mb-16 sm:mb-0 shadow-xl bg-blue-800">
|
||||
<div class="container mx-auto w-full flex flex-wrap justify-between mx-2">
|
||||
<div class="w-full text-white mb-8">
|
||||
<h2 class="font-bold text-2xl">Main Hero Message for the menu section</h2>
|
||||
<p>Sub-hero message, not too long and not too short. Make it just right!</p>
|
||||
</div>
|
||||
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
|
||||
<div class="flex items-center">
|
||||
<svg class="h-8 mb-3 mr-3 fill-current text-white"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M3 6c0-1.1.9-2 2-2h8l4-4h2v16h-2l-4-4H5a2 2 0 0 1-2-2H1V6h2zm8 9v5H8l-1.67-5H5v-2h8v2h-2z"/>
|
||||
</svg>
|
||||
<h3 class="font-bold text-xl text-white text-bold mb-2">Heading 1</h3>
|
||||
</div>
|
||||
<p class="text-gray-100 text-sm">Quarterly sales are at an all-time low create spaces to explore the accountable talk and blind vampires.</p>
|
||||
<div class="flex items-center py-3">
|
||||
<svg class="h-6 pr-3 fill-current text-blue-300"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
|
||||
</svg>
|
||||
<a href="#" class="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-r-0 lg:border-r lg:border-b-0 pb-6 pt-6 lg:pt-3">
|
||||
<div class="flex items-center">
|
||||
<svg class="h-8 mb-3 mr-3 fill-current text-white"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M4.13 12H4a2 2 0 1 0 1.8 1.11L7.86 10a2.03 2.03 0 0 0 .65-.07l1.55 1.55a2 2 0 1 0 3.72-.37L15.87 8H16a2 2 0 1 0-1.8-1.11L12.14 10a2.03 2.03 0 0 0-.65.07L9.93 8.52a2 2 0 1 0-3.72.37L4.13 12zM0 4c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4z"/>
|
||||
</svg>
|
||||
<h3 class="font-bold text-xl text-white text-bold mb-2">Heading 2</h3>
|
||||
</div>
|
||||
<p class="text-gray-100 text-sm">Prioritize these line items game-plan draw a line in the sand come up with something buzzworthy UX upstream selling.</p>
|
||||
<div class="flex items-center py-3">
|
||||
<svg class="h-6 pr-3 fill-current text-blue-300"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
|
||||
</svg>
|
||||
<a href="#" class="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 border-b sm:border-b-0 sm:border-r md:border-b-0 pb-6 pt-6 lg:pt-3">
|
||||
<div class="flex items-center">
|
||||
<svg class="h-8 mb-3 mr-3 fill-current text-white"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M2 4v14h14v-6l2-2v10H0V2h10L8 4H2zm10.3-.3l4 4L8 16H4v-4l8.3-8.3zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"/>
|
||||
</svg>
|
||||
<h3 class="font-bold text-xl text-white text-bold mb-2">Heading 3</h3>
|
||||
</div>
|
||||
<p class="text-gray-100 text-sm">This proposal is a win-win situation which will cause a stellar paradigm shift, let's touch base off-line before we fire the new ux experience.</p>
|
||||
<div class="flex items-center py-3">
|
||||
<svg class="h-6 pr-3 fill-current text-blue-300"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
|
||||
</svg>
|
||||
<a href="#" class="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
|
||||
</div>
|
||||
</ul>
|
||||
<ul class="px-4 w-full sm:w-1/2 lg:w-1/4 border-gray-600 pb-6 pt-6 lg:pt-3">
|
||||
<div class="flex items-center">
|
||||
<svg class="h-8 mb-3 mr-3 fill-current text-white"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9 12H1v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-8v2H9v-2zm0-1H0V5c0-1.1.9-2 2-2h4V2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1h4a2 2 0 0 1 2 2v6h-9V9H9v2zm3-8V2H8v1h4z"/>
|
||||
</svg>
|
||||
<h3 class="font-bold text-xl text-white text-bold mb-2">Heading 4</h3>
|
||||
</div>
|
||||
<p class="text-gray-100 text-sm">This is a no-brainer to wash your face, or we need to future-proof this high performance keywords granularity.</p>
|
||||
<div class="flex items-center py-3">
|
||||
<svg class="h-6 pr-3 fill-current text-blue-300"
|
||||
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M20 10a10 10 0 1 1-20 0 10 10 0 0 1 20 0zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0zm-8 2H5V8h5V5l5 5-5 5v-3z"/>
|
||||
</svg>
|
||||
<a href="#" class="text-white bold border-b-2 border-blue-300 hover:text-blue-300">Find out more...</a>
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- ## Hoverable Link Template ##
|
||||
|
||||
<li class="hoverable hover:bg-blue-800 hover:text-white"><a href="#" class="relative block">x</a><div class="mega-menu">
|
||||
Add your mega menu content
|
||||
</div></li>
|
||||
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
<!-- nav stuff -->
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
setTimeout(function () { $('.profiler-results').hide(); }, 500);
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user