/+  sigil=sigil-sigil
/*  global-css  %css  /web/index/css
|_  =bowl:gall
++  css  ^~  %-  trip
'''
body > nav {
  box-shadow: inset 0 2px 4px rgba(30, 30, 30, 0.15);
  position: sticky;
  top: 0;
  z-index: 1020;
  clear: both;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 4rem;
  text-align: center;
  background: black;
  color: rgb(220, 220, 220);
  padding: 0 1rem;
  z-index: 100;
  box-sizing: border-box;
  
 &  #top-left {
    margin: 1rem 0;
    color: inherit;
    width: 60px;
  }
 & .menu{
    height: 55px;
  }
& .option{
    display: block; 
    text-decoration: none; 
    color: #fff; 
    text-transform: uppercase; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 500; 
    font-size: 13px; 
    letter-spacing: 0.5px; 
    margin: 1.2rem 0.5rem;
}


 & ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding-left: 0;
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, -50%); /* This is a shorthand of
                                          translateX(-50%) and translateY(-50%) */

   & li{
      margin: 0 0.5rem;
      
    &  a, nav>form a {
        display: block; 
        text-decoration: none; 
        color: #fff; 
        text-transform: uppercase; 
        font-family: 'Montserrat', sans-serif; 
        font-weight: 500; 
        font-size: 13px; 
        letter-spacing: 0.5px; 
      }
    }
  }
  & a:hover { 
    color: rgba(255, 255, 255, 0.7); 
  }

  /* icon links style
  & svg{
    fill: white;
  }
  & path{
    fill: white;
  }
  & circle{
    stroke: white;
  }
  & svg{
    float: left;
    margin-top: 10px;
    margin-left: 10px;
  }
  & .nav-right svg{
    height: 4rem;
    border-left: 1px solid white;
    border-right: 1px solid white;
    margin-left: 0.5rem;
  } */
  & .icon{
    width: 30px;
  }
  & form{
    background-color: var(--background-color);
    margin: 0.7rem;
    padding: 0 0.3rem;
  }
  & input[type=text]{
    background-color: var(--background-color);
    outline: none;
    padding: 0.3rem;
    border: none;
  }

   @media (max-width:935px) {
  &  input[type=text]{
      display: none;
    }
  &  form{
      background-color: inherit;
      width: 50px;
    }
  &  .icon{
      filter: invert();
    }
  }
  & .sigil{
    padding: 6px 0;
  }

}

'''
++  mobile-css  ^~  %-  trip
'''
body > nav{
  padding: 5px 1rem;
  & #logo{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 25%;
  }
  & #menu-button{
    width: 30px;
    float: right;
  }
  #nav-menu{
    background-color: black;
    position: fixed;
    top: 25px;
    right: 25px;
    height: max-content;
    width: 40%;

    & a{
      display: block;
      padding: 5px;
      color: white;
    }
  }
}
'''
++  smol
;nav
  ;style:"{css}"
  ;style:"{mobile-css}"
  ;a/"/"
    ;img#logo@"https://s3.spandrell.ch/assets/board/ui/tianming.svg";
  ==
  ;img#menu-button@"https://s3.spandrell.ch/assets/board/ui/menu.svg"
    =kaji  "toggle"
    =targ  "#nav-menu"
    ;
  ==
  ;div#nav-menu.cp
    =role  "link"
    =kaji  "clickaway"
    =hidden  ""
    ;a/"/blog":"BLOG"
    ;a/"/chat":"CHAT"
    ;a/"/board":"BOARD"
    ;a/"/feed":"FEED"
    ;a/"/tv":"TV"
    ;a/"/wiki":"WIKI"
    :: ;a/"/apps/canvas":"CANVAS"
    ;a/"/book":"BOOKS"
    ;a/"/about":"ABOUT"
    ;a/"/search":"SEARCH"
    ;+  ?:  .=(%pawn (clan:title src.bowl))
      ;a/"/login":"LOGIN"
      ;a/"/user":"PROFILE"
  ==
==
:: TODO figure this out
++  ext  ^-  manx
  =/  sip  (scow %p src.bowl)
  =/  dap  (trip dap.bowl)
  ;nav
    =kaji  "mobile"
    =path  "/f/mobile-nav"
    =hide  "clickaway"
    ;style:"{css}"
    ;style:"{(trip global-css)}"
    ;a#top-left/"/"
      ;img@"https://s3.spandrell.ch/assets/board/ui/tianming.svg";
    ==
    ;ul
      ;li
        ;a/"/blog":"BLOG"
      ==
      ;li
        ;a/"/chat":"CHAT"
      ==
      ;li
        ;a/"/board":"BOARD"
      ==
      ;li
        ;a/"/feed":"FEED"
      ==
      ;li
        ;a/"/tv":"TV"
      ==
      ;li
        ;a/"/wiki":"WIKI"
      ==
      :: ;li
      ::   ;a/"/apps/canvas":"CANVAS"
      :: ==
      ;li
        ;a/"/book":"BOOKS"
      ==
      ;li
        ;a/"/about":"ABOUT"
      ==
    ==
    ;div.flex.nav-right
      :: ;form#global-search.f1
      ::   =kaji  "search"
      ::   =path  "/search"
      ::   ;input(type "text", name "query");
      ::   ;input.icon@"https://s3.sortug.com/img/icons/search-l.svg"(type "image");
      :: ==
      ;a.option/"/search":"search"
      ;+  ?:  .=(%pawn (clan:title src.bowl))  
      ;a.option 
        =href  "/login"
        ; Login
      ==
      ;a.sigil
        =href  "/user"
        ;+  (sigil(size 48) src.bowl)
      ==
    ==
    ;script@"/kaji.js";
    ;script@"/kaji-session.js?ship={sip}&dap={dap}";
  ==
++  $  ^-  manx
  ;nav
    =kaji  "mobile"
    =path  "/f/mobile-nav"
    =hide  "clickaway"
    ;style:"{css}"
    ;a#top-left/"/"
      ;img@"https://s3.spandrell.ch/assets/board/ui/tianming.svg";
    ==
    ;ul
      ;li
        ;a/"/blog":"BLOG"
      ==
      ;li
        ;a/"/chat":"CHAT"
      ==
      ;li
        ;a/"/board":"BOARD"
      ==
      ;li
        ;a/"/feed":"FEED"
      ==
      ;li
        ;a/"/tv":"TV"
      ==
      ;li
        ;a/"/wiki":"WIKI"
      ==
      :: ;li
      ::   ;a/"/apps/canvas":"CANVAS"
      :: ==
      ;li
        ;a/"/book":"BOOKS"
      ==
      ;li
        ;a/"/about":"ABOUT"
      ==
    ==
    ;div.flex.nav-right
      :: ;form#global-search.f1
      ::   =kaji  "search"
      ::   =path  "/search"
      ::   ;input(type "text", name "query");
      ::   ;input.icon@"https://s3.sortug.com/img/icons/search-l.svg"(type "image");
      :: ==
      ;a.option/"/search":"search"
      ;+  ?:  .=(%pawn (clan:title src.bowl))  
      ;a.option 
        =href  "/login"
        ; Login
      ==
      ;a.sigil
        =href  "/user"
        ;+  (sigil(size 48) src.bowl)
      ==
    ==
  ==
--