save file

Author: javascript-2020

libs/html/libs-hdr/v1.0/libs-hdr-v1.0.html

@@ -0,0 +1,151 @@
+
+
+<libs-hdr>
+
+      <template shadowrootmode=open>
+      
+            <style>
+            
+  section
+    {margin:0;box-sizing:border-box;display:flex;align-items:center;gap:10px;border-bottom:1px solid lightgray;margin-bottom:20px;padding-bottom:10px}
+    
+  .icon
+    {cursor:pointer;border-radius:3px;border:1px solid gray;box-sizing:border-box;width:38px;height:38px;}
+    
+  .item
+    {display:inline-flex;align-items:center;text-align:center;background:buttonface;border-radius:3px;border:1px solid lightgray;padding:5px 7px;}
+    
+  .item-label
+    {/*margin-right:10px;*/}
+    
+  ::slotted([slot=title])
+    {text-align:center;position:absolute;left:0;right:0;top:25px;z-index:-1;margin:0 auto;color:blue}
+    
+    
+  .date
+    {}
+  .spc
+    {flex:1}
+    
+  a
+    {color:blue;}
+  a:visited
+    {color:blue;}
+    
+    
+            </style>
+            
+            <section>
+            
+                  <div class=item>
+                  
+                        <a id=home class=item-label href='/'>
+                              home
+                        </a>
+                        
+                        <!--
+                        <home-menu v2.0 component=parent parent=html-components-hdr></home-menu>
+                        -->
+                        
+                        
+                  </div>
+                  
+                  <div class=item>
+                        <a id=list class=item-label href='#'>
+                              code
+                        </a>
+                  </div>
+                  
+                  <div class=item>
+                        <a id=list class=item-label href='#'>
+                              nodejs
+                        </a>
+                  </div>
+                  
+                  <div class=item>
+                        <a id=list class=item-label href='#'>
+                              servers
+                        </a>
+                  </div>
+                  
+                  <div class=spc></div>
+                  
+                  <slot name=date></slot>
+                  
+                  <slot name=title></slot>
+                  
+            </section>
+            
+      </template>
+      
+      
+      <script>
+      
+      
+(function libs_hdr({mod,host}){
+
+  var obj   = {
+        version   : 'v2.0',
+  };
+  
+      var df=true,did='libs-hdr'
+      ;
+      
+      
+      var $,menu
+      ;
+      
+      obj.initmod   = function(params){
+      
+            $         = params.$;
+            menu      = params.menu;
+            
+      }//initmod
+      
+      
+  //:
+  
+  
+      var top;
+      
+      
+      obj.init    = async function(){
+      
+/*
+            top    = mod['top-menu']
+            
+            top.initmod({$,menu});
+            
+            await top.init();
+*/
+
+
+      }//init
+      
+      
+  //:
+  
+  
+      obj.initdom   = function(rootnode){
+      
+            var shadow          = host.shadowRoot;
+            
+            //top.initdom(shadow);
+            
+            
+      }//initdom
+      
+      
+      
+  return obj;
+  
+//libs_hdr
+})
+
+
+      </script>
+      
+</libs-hdr>
+
+
+