SXS20240115/SRC/iMES_PAD/module/system/program/menu/SideMenu.html

<!-- inner-side-menu是用來固定與作業區位置的div -->
<div id="inner-side-menu" class="inner-side-menu" ng-if="!$root.judgeDevice">
    <!-- strech layer用來展開側邊選單 -->
    <div class="strech-layer">
        <div class="screen-hight-side-box" ng-class="{'full-side-menu':$root.isShowSideSubMenu , 'test-mode':$root.environment=='Test'}">
            <div class="top-panel" ng-class="{'test-mode':$root.environment=='Test'}">
                <div class="side-menu-item" ng-hide="!isShowProgram || $root.isShowSideSubMenu">
                    <svg>
                        <image xlink:href="image/mobileSMT/com_ic_menu.svg" width="24" height="24"/>
                    </svg>                  
                </div>
                <div class="side-menu-item" ng-show="$root.isShowSideSubMenu" ng-click="hideSideSubMenu();">
                    <div style="display: flex; position:relative">
                        <svg>
                            <image xlink:href="image/mobileSMT/com_ic_menu.svg" width="24" height="28"/>
                        </svg>
                        <div class="logo" ng-if="$root.isShowSideSubMenu" style="margin: 0 0 0 8px;"><span class="s">i</span>MES</div>
                    </div>
                    <div class="kmi-can-click"></div>
                </div>
            </div>
            <div class="content-panel" ng-show="isShowProgram" >
                <div class="content-panel-inner">
                    <div ng-repeat="moduleItem in modules | orderBy: 'order' | filter: {isShow : true} track by moduleItem.name"
                        class="side-menu-item" ng-click="showSideSubMenu(moduleItem);" ng-class="{'is-select' : $root.selectModule.name == moduleItem.name}" ng-style="moduleItem.marginZero">
                        <div class="side-menu-item-head" ng-style="moduleItem.bottom_space">
                            <img ng-src="{{moduleItem.icon_s}}"></img>
                            <div class="sideMenu-title" ng-bind-html="moduleItem.title | translate" ng-show="$root.isShowSideSubMenu"></div>
                        </div>
                        <div class="kmi-can-click"  ng-class="{'is-select' : $root.selectModule.name == moduleItem.name}"></div>
                        <!-- sub side menu-->
                        <div class="sub-menu-list perfect-scrollbar-item" ng-style="moduleItem.show">
                            <div ng-repeat="menuItem in $root.selectModule.childs | orderBy: 'order' | filter: {isShow : true} track by menuItem.name"
                                class="sub-menu-item" ng-click="ChangeProgram(menuItem);" style="position: relative;">
                                <div class="item-icon" ng-show="menuItem.icon">
                                    <img ng-src="{{menuItem.icon}}"></img>
                                </div>
                                <div class="item-icon" ng-hide="menuItem.icon" ng-bind="menuItem.enTitle"></div>
                                <div class="item-title" ng-bind-html="menuItem.title | translate"></div>
                                <div class="kmi-can-click item-background"></div>
                            </div>
                        </div>
                    </div> 
                </div>
            </div>
            <div class="bottom-panel">
                <div class="side-menu-item bottom-item" ng-repeat="tool in sideTools"
                    ng-click="tool.click(tool);" ng-class="tool.class">
                    <div class="side-menu-item-head">
                        <i class="material-icons" ng-bind="tool.icon"></i>
                        <div class="dot" style="right:-4px;" ng-show="tool.dot > 0" ng-bind="tool.dot"></div>
                        <div class="sideMenu-title" ng-bind-html="'info_list' | translate" ng-show="$root.isShowSideSubMenu"></div>
                    </div>
                    <div class="kmi-can-click"></div>
                </div>
                <div class="side-menu-item bottom-item" ng-click="settings();" ng-class="{'is-select' : $root.currentState == 'setting'}">
                    <div class="side-menu-item-head">
                        <i class="material-icons">settings</i>
                        <div class="sideMenu-title" ng-bind-html="'home.setting' | translate" ng-show="$root.isShowSideSubMenu" style="border-radius: 1px solid red;"></div>
                    </div>
                    <div class="kmi-can-click"></div>
                </div>
                <div class="side-menu-item bottom-item" ng-click="logout();">
                    <div class="side-menu-item-head">
                         <i class="material-icons">exit_to_app</i>
                        <div class="sideMenu-title" ng-bind-html="'home.logout' | translate" ng-show="$root.isShowSideSubMenu" style="border-radius: 1px solid red;"></div>
                    </div>
                    <div class="kmi-can-click"></div>
                </div>
            </div>
        </div>
        <div class="iam-radius" ng-class="{'test-mode':$root.environment=='Test'}" ng-click="hideSideSubMenu();"></div>
        <div class="sidemenu-close-area" ng-click="hideSideSubMenu();" ng-show="$root.isShowSideSubMenu"></div>
    </div>
   
</div>
<div class="SMT-top-head-box" ng-if="$root.judgeDevice==1">
    <div class="kmi-index-inner-wrap">
       <div class="kmi-row-fields-SMT index-head">
           <div class="kmi-side-btn left SMT-btn sideMenu" ng-click="home();">
               <!-- <i class="material-icons dp48 back-menue" style="font-size: 24px;">widgets</i> -->
               <div class="kmi-can-click"></div>
           </div>
           <div class="SMT-header-title">SMT</div>
           <div class="kmi-side-btn right SMT-btn notification" ng-repeat="tool in sideTools" ng-click="tool.click(tool)">
               <div class="dot" style="right:-4px;" ng-show="tool.dot > 0" ng-bind="tool.dot"></div>
               <div class="kmi-can-click"></div>
           </div>
       </div>
       <div class="kmi-row-fields-SMT index-content-box">
           <div class="kmi-row-fields-SMT index-content">
               <div class="id-box">
                   <div class="id-photo">
                       <i class="material-icons dp48">account_circle</i>
                   </div>
                   <div class="id-card">
                       <div class="id-name">
                           <label class="label main_item">葉大雄</label>
                       </div>
                       <div class="id-no">
                           <label class="label main_item">13055</label>
                       </div>
                   </div>
               </div>
               <div class="index-setting" ng-click="settings();">
                   <!-- <i class="material-icons" style='color: #fff; margin-right: 2px;'>settings</i> -->
                   <div class="kmi-can-click"></div>
               </div>
           </div>
       </div>
   </div>
</div>
<!-- SMT 標頭 end-->